Concord

#827f79

Warm mid gray with earthy softness for UI

Save
Share

About Concord

Concord feels like it's sitting in shadow, but not the deep kind, more like the inside of something. It's warmer than , softer than , and it doesn't have the architectural weight that carries. This is a gray that's actually touched by brown, the kind that reads as a material rather than a void.

Reach for it in interfaces where warmth matters but darkness does too: design tools, photo editing platforms, anywhere you're asking users to look at content for hours without the background screaming for attention. It's less austere than its cooler neighbors but still composed enough to hold type and UI elements without fussing. Pair it with warm blacks, earth-toned accents, or muted metallics and it sits there like it belongs. This is the one I reach for when I need the interface to feel inhabited, not empty.

The trick: it's close enough to that you need to know what you're choosing. is heavier, more declarative. Concord is quieter. It's the difference between a surface that's already been used and a surface that's waiting for you to start.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
3.99:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.66:1FailAA Large

On Gray 900 #18181b

Aa
4.44:1FailAA Large

On Black #000000

Aa
5.26:1AAAAA Large

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#808080
#7d7d77
#827b77
#897d76
#7c8181
#7e8082
#8b7e77

Create a gradient with Concord

Open the generator with this color pre-loaded.

Start creating