Blue Blood

#6b7f81

Cool blue-leaning medium slate for primary UI balance

Save
Share

About Blue Blood

Blue Blood is cooler than everything around it. It's got blue undertone that and deliberately avoid, and more saturation than , which means it actually reads as a color instead of just a neutral surface. It sits there with a slight teal lean, the kind of gray that doesn't apologize for having a temperature.

Reach for it in product interfaces, data dashboards, and design systems where you need a secondary surface that feels intentional without being warm. It works as a form background, a card layer, a sidebar that needs some presence. Finance apps, healthcare records, admin tools, anywhere you're already leaning into cool tones and want the supporting surfaces to agree with that direction instead of fight it.

Pair it with deep text or muted accents and it holds up clean. The difference: it's more saturated and visibly cooler than its gray neighbors, so it won't feel like a step back if your primary surfaces are already pushing blue. It works harder to feel calm than does because it's not relying on warmth to soften things, it's relying on restraint.

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
4.22:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.87:1FailAA Large

On Gray 900 #18181b

Aa
4.20:1FailAA Large

On Black #000000

Aa
4.98: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

Create a gradient with Blue Blood

Open the generator with this color pre-loaded.

Start creating