#3A344A#3A344A
#3A344A is a dark, muted violet. Relative luminance 0.038; OKLCH L 34.1% C 0.039 H 296.8°. Best body text is #FFFFFF at 11.86:1 contrast (WCAG AA passes).
Color values
| HEX | #3A344A |
|---|---|
| RGB | rgb(58, 52, 74) |
| HSL | hsl(256, 17%, 25%) |
| HSV | hsv(256, 30%, 29%) |
| CMYK | cmyk(21.6%, 29.7%, 0%, 71%) |
| CIE-LAB | lab(23.17, 8.06, -12.58) |
| CIE-LCH | lch(23.17, 14.94, 302.64°) |
| OKLab | oklab(34.08% 0.0175 -0.0346) |
| OKLCH | oklch(34.08% 0.039 296.8) |
| XYZ | xyz(4.2087, 3.8499, 6.9986) |
| Luminance | 0.0385 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Navy Blue
#1B2A4A
ΔE00 9.08
Dark
#1B2431
ΔE00 11.39
Dark Grey
#363737
ΔE00 12.86
Onyx
#353839
ΔE00 13.10
Dusk
#4E5481
ΔE00 13.58
Marine
#042E60
ΔE00 13.70
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#3A344A #444A34
analogous
#34394A #3A344A #45344A
triadic
#3A344A #4A3A34 #344A3A
tetradic
#3A344A #4A3439 #444A34 #344A45
square
#3A344A #4A3439 #444A34 #344A45
split-complementary
#3A344A #4A4534 #394A34
monochromatic
#0E0D12 #1E1B26 #3A344A #564D6E #726792
Accessibility & contrast
On white
11.86
#3A344A on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.77
#3A344A on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #3A344A
11.86:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##3A344A | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##3A344A | 1.00 | 11.86 | 1.77 | 11.86 |
| #FFFFFF | 11.86 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.77 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 11.86 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#2F374B
Deuteranopia (green-blind)
#303749
Tritanopia (blue-blind)
#37373C
Achromatopsia (no color)
#373737
Design tokens & code
CSS
--color: #3a344a; /* rgb */ color: rgb(58, 52, 74); /* oklch */ color: oklch(34.1% 0.039 296.8);
Tailwind
colors: {
custom: {
50: '#706b7c',
500: '#3a344a',
950: '#000000',
},
}SCSS
$custom: #3a344a; $custom-light: #706b7c; $custom-dark: #000000;
JSON
{
"hex": "#3a344a",
"rgb": {
"r": 58,
"g": 52,
"b": 74
},
"hsl": {
"h": 256.364,
"s": 17.46,
"l": 24.706
},
"oklch": {
"l": 0.34076,
"c": 0.03872,
"h": 296.8
},
"luminance": 0.0385
}Semantic roles & 50–950 ramp
primary
#3A344A
secondary
#737A60
accent
#BA6EA5
background
#F6F6F7
surface
#ECEBEE
border
#C7C6C9
text
#070609
muted
#7A7A7B