#302A42#302A42
#302A42 is a dark, muted violet. Relative luminance 0.027; OKLCH L 30.3% C 0.043 H 295.2°. Best body text is #FFFFFF at 13.68:1 contrast (WCAG AA passes).
Color values
| HEX | #302A42 |
|---|---|
| RGB | rgb(48, 42, 66) |
| HSL | hsl(255, 22%, 21%) |
| HSV | hsv(255, 36%, 26%) |
| CMYK | cmyk(27.3%, 36.4%, 0%, 74.1%) |
| CIE-LAB | lab(18.70, 8.96, -14.14) |
| CIE-LCH | lch(18.70, 16.74, 302.34°) |
| OKLab | oklab(30.26% 0.0184 -0.0391) |
| OKLCH | oklch(30.26% 0.043 295.2) |
| XYZ | xyz(3.0300, 2.6776, 5.5104) |
| Luminance | 0.0268 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Navy Blue
#1B2A4A
ΔE00 7.90
Dark
#1B2431
ΔE00 10.63
Navy (survey)
#01153E
ΔE00 11.02
Midnight
#03012D
ΔE00 12.37
Dark Navy Blue
#00022E
ΔE00 12.59
Marine
#042E60
ΔE00 12.89
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#302A42 #3C422A
analogous
#2A3042 #302A42 #3C2A42
triadic
#302A42 #42302A #2A4230
tetradic
#302A42 #422A30 #3C422A #2A423C
square
#302A42 #422A30 #3C422A #2A423C
split-complementary
#302A42 #423C2A #30422A
monochromatic
#0E0C13 #15121D #302A42 #4B4267 #665A8D
Accessibility & contrast
On white
13.68
#302A42 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.54
#302A42 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #302A42
13.68:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##302A42 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##302A42 | 1.00 | 13.68 | 1.54 | 13.68 |
| #FFFFFF | 13.68 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.54 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 13.68 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#242E43
Deuteranopia (green-blind)
#252D41
Tritanopia (blue-blind)
#2C2E33
Achromatopsia (no color)
#2D2D2D
Design tokens & code
CSS
--color: #302a42; /* rgb */ color: rgb(48, 42, 66); /* oklch */ color: oklch(30.3% 0.043 295.2);
Tailwind
colors: {
custom: {
50: '#696376',
500: '#302a42',
950: '#000000',
},
}SCSS
$custom: #302a42; $custom-light: #696376; $custom-dark: #000000;
JSON
{
"hex": "#302a42",
"rgb": {
"r": 48,
"g": 42,
"b": 66
},
"hsl": {
"h": 255,
"s": 22.222,
"l": 21.176
},
"oklch": {
"l": 0.30265,
"c": 0.04326,
"h": 295.2
},
"luminance": 0.02678
}Semantic roles & 50–950 ramp
primary
#302A42
secondary
#6C7354
accent
#BF69A9
background
#F6F5F7
surface
#EBEAED
border
#C6C6C8
text
#060508
muted
#7A797B