#302B96#302B96
#302B96 is a dark, vivid blue. Relative luminance 0.046; OKLCH L 37.3% C 0.168 H 276.6°. Best body text is #FFFFFF at 10.99:1 contrast (WCAG AA passes).
Color values
| HEX | #302B96 |
|---|---|
| RGB | rgb(48, 43, 150) |
| HSL | hsl(243, 55%, 38%) |
| HSV | hsv(243, 71%, 59%) |
| CMYK | cmyk(68%, 71.3%, 0%, 41.2%) |
| CIE-LAB | lab(25.43, 36.68, -57.72) |
| CIE-LCH | lch(25.43, 68.39, 302.43°) |
| OKLab | oklab(37.27% 0.0192 -0.1667) |
| OKLCH | oklch(37.27% 0.168 276.6) |
| XYZ | xyz(7.5860, 4.5575, 29.3282) |
| Luminance | 0.0456 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Sapphire (survey)
#2138AB
ΔE00 4.91
Royal
#0C1793
ΔE00 5.07
Indigo Blue
#3A18B1
ΔE00 5.56
Darkslateblue
#483D8B
ΔE00 6.49
Blueberry
#464196
ΔE00 6.58
Cobalt Blue
#030AA7
ΔE00 6.68
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#302B96 #91962B
analogous
#2B5B96 #302B96 #662B96
triadic
#302B96 #96302B #2B9630
tetradic
#302B96 #962B5B #91962B #2B9666
square
#302B96 #962B5B #91962B #2B9666
split-complementary
#302B96 #96662B #5B962B
monochromatic
#121037 #211D66 #302B96 #3F39C6 #6D68D4
Accessibility & contrast
On white
10.99
#302B96 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.91
#302B96 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #302B96
10.99:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##302B96 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##302B96 | 1.00 | 10.99 | 1.91 | 10.99 |
| #FFFFFF | 10.99 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.91 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 10.99 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#004199
Deuteranopia (green-blind)
#003894
Tritanopia (blue-blind)
#00485D
Achromatopsia (no color)
#3C3C3C
Design tokens & code
CSS
--color: #302b96; /* rgb */ color: rgb(48, 43, 150); /* oklch */ color: oklch(37.3% 0.168 276.6);
Tailwind
colors: {
custom: {
50: '#7765b6',
500: '#302b96',
950: '#000000',
},
}SCSS
$custom: #302b96; $custom-light: #7765b6; $custom-dark: #000000;
JSON
{
"hex": "#302b96",
"rgb": {
"r": 48,
"g": 43,
"b": 150
},
"hsl": {
"h": 242.804,
"s": 55.44,
"l": 37.843
},
"oklch": {
"l": 0.37273,
"c": 0.1678,
"h": 276.6
},
"luminance": 0.04558
}Semantic roles & 50–950 ramp
primary
#302B96
secondary
#B6BA63
accent
#DF49D8
background
#F7F6FB
surface
#EEEBF6
border
#C9C6D0
text
#0A0611
muted
#7C7A80