#405DAA#405DAA
#405DAA is a mid, vivid blue. Relative luminance 0.118; OKLCH L 49.6% C 0.128 H 266.3°. Best body text is #FFFFFF at 6.24:1 contrast (WCAG AA passes).
Color values
| HEX | #405DAA |
|---|---|
| RGB | rgb(64, 93, 170) |
| HSL | hsl(224, 45%, 46%) |
| HSV | hsv(224, 62%, 67%) |
| CMYK | cmyk(62.4%, 45.3%, 0%, 33.3%) |
| CIE-LAB | lab(40.93, 14.08, -44.61) |
| CIE-LCH | lch(40.93, 46.78, 287.52°) |
| OKLab | oklab(49.57% -0.0082 -0.1273) |
| OKLCH | oklch(49.57% 0.128 266.3) |
| XYZ | xyz(13.2819, 11.8198, 39.6039) |
| Luminance | 0.1182 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Dusky Blue
#475F94
ΔE00 3.39
Denim Blue
#3B5B92
ΔE00 3.47
Denim
#1560BD
ΔE00 4.89
Sapphire
#0F52BA
ΔE00 5.02
French Blue
#436BAD
ΔE00 5.07
Denim (survey)
#3B638C
ΔE00 5.47
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#405DAA #AA8D40
analogous
#4092AA #405DAA #5840AA
triadic
#405DAA #AA405D #5DAA40
tetradic
#405DAA #AA4092 #AA8D40 #40AA58
square
#405DAA #AA4092 #AA8D40 #40AA58
split-complementary
#405DAA #AA5840 #92AA40
monochromatic
#1F2C51 #2F457E #405DAA #637EC4 #8FA2D5
Accessibility & contrast
On white
6.24
#405DAA on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.36
#405DAA on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #405DAA
6.24:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##405DAA | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##405DAA | 1.00 | 6.24 | 3.36 | 6.24 |
| #FFFFFF | 6.24 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.36 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.24 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#3966AD
Deuteranopia (green-blind)
#285CA8
Tritanopia (blue-blind)
#006E7B
Achromatopsia (no color)
#606060
Design tokens & code
CSS
--color: #405daa; /* rgb */ color: rgb(64, 93, 170); /* oklch */ color: oklch(49.6% 0.128 266.3);
Tailwind
colors: {
custom: {
50: '#7f8ac4',
500: '#405daa',
950: '#000000',
},
}SCSS
$custom: #405daa; $custom-light: #7f8ac4; $custom-dark: #000000;
JSON
{
"hex": "#405daa",
"rgb": {
"r": 64,
"g": 93,
"b": 170
},
"hsl": {
"h": 223.585,
"s": 45.299,
"l": 45.882
},
"oklch": {
"l": 0.49569,
"c": 0.12757,
"h": 266.3
},
"luminance": 0.11821
}Semantic roles & 50–950 ramp
primary
#405DAA
secondary
#C0B086
accent
#B153D5
background
#F8F8FC
surface
#EFF0F8
border
#CACBD1
text
#0B0B13
muted
#7C7C82