#3F445D#3F445D
#3F445D is a dark, muted blue. Relative luminance 0.060; OKLCH L 39.3% C 0.043 H 275.5°. Best body text is #FFFFFF at 9.56:1 contrast (WCAG AA passes).
Color values
| HEX | #3F445D |
|---|---|
| RGB | rgb(63, 68, 93) |
| HSL | hsl(230, 19%, 31%) |
| HSV | hsv(230, 32%, 36%) |
| CMYK | cmyk(32.3%, 26.9%, 0%, 63.5%) |
| CIE-LAB | lab(29.36, 4.56, -15.46) |
| CIE-LCH | lch(29.36, 16.12, 286.45°) |
| OKLab | oklab(39.27% 0.0041 -0.0427) |
| OKLCH | oklch(39.27% 0.043 275.5) |
| XYZ | xyz(6.0923, 5.9811, 11.1873) |
| Luminance | 0.0598 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Dusk
#4E5481
ΔE00 8.40
Navy Blue
#1B2A4A
ΔE00 9.42
Twilight
#4E518B
ΔE00 10.18
Dark Grey Blue
#29465B
ΔE00 10.36
Charcoal
#36454F
ΔE00 10.51
Dark Slate Blue
#214761
ΔE00 11.18
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#3F445D #5D583F
analogous
#3F535D #3F445D #493F5D
triadic
#3F445D #5D3F44 #445D3F
tetradic
#3F445D #5D3F53 #5D583F #3F5D49
square
#3F445D #5D3F53 #5D583F #3F5D49
split-complementary
#3F445D #5D493F #535D3F
monochromatic
#0E0F14 #262939 #3F445D #585F81 #757CA1
Accessibility & contrast
On white
9.56
#3F445D on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.20
#3F445D on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #3F445D
9.56:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##3F445D | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##3F445D | 1.00 | 9.56 | 2.20 | 9.56 |
| #FFFFFF | 9.56 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.20 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 9.56 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#3D465E
Deuteranopia (green-blind)
#3B445C
Tritanopia (blue-blind)
#37494D
Achromatopsia (no color)
#454545
Design tokens & code
CSS
--color: #3f445d; /* rgb */ color: rgb(63, 68, 93); /* oklch */ color: oklch(39.3% 0.043 275.5);
Tailwind
colors: {
custom: {
50: '#75778b',
500: '#3f445d',
950: '#000000',
},
}SCSS
$custom: #3f445d; $custom-light: #75778b; $custom-dark: #000000;
JSON
{
"hex": "#3f445d",
"rgb": {
"r": 63,
"g": 68,
"b": 93
},
"hsl": {
"h": 230,
"s": 19.231,
"l": 30.588
},
"oklch": {
"l": 0.39272,
"c": 0.04292,
"h": 275.5
},
"luminance": 0.05981
}Semantic roles & 50–950 ramp
primary
#3F445D
secondary
#8D876B
accent
#AF6CBC
background
#F7F7F8
surface
#EDEDF0
border
#C8C8CB
text
#08080C
muted
#7B7B7D