#4458AD#4458AD
#4458AD is a mid, vivid blue. Relative luminance 0.112; OKLCH L 48.9% C 0.137 H 270.6°. Best body text is #FFFFFF at 6.47:1 contrast (WCAG AA passes).
Color values
| HEX | #4458AD |
|---|---|
| RGB | rgb(68, 88, 173) |
| HSL | hsl(229, 44%, 47%) |
| HSV | hsv(229, 61%, 68%) |
| CMYK | cmyk(60.7%, 49.1%, 0%, 32.2%) |
| CIE-LAB | lab(39.96, 19.13, -47.93) |
| CIE-LCH | lch(39.96, 51.61, 291.76°) |
| OKLab | oklab(48.95% 0.0016 -0.137) |
| OKLCH | oklch(48.95% 0.137 270.6) |
| XYZ | xyz(13.4139, 11.2244, 40.9867) |
| Luminance | 0.1123 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Dusky Blue
#475F94
ΔE00 4.62
Denim Blue
#3B5B92
ΔE00 4.80
Sapphire
#0F52BA
ΔE00 5.01
Iris
#6258C4
ΔE00 6.67
Denim
#1560BD
ΔE00 6.67
Warm Blue
#4B57DB
ΔE00 6.72
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#4458AD #AD9944
analogous
#448DAD #4458AD #6444AD
triadic
#4458AD #AD4458 #58AD44
tetradic
#4458AD #AD448D #AD9944 #44AD64
square
#4458AD #AD448D #AD9944 #44AD64
split-complementary
#4458AD #AD6444 #8DAD44
monochromatic
#212B55 #334281 #4458AD #6A7BC4 #96A2D6
Accessibility & contrast
On white
6.47
#4458AD on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.25
#4458AD on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #4458AD
6.47:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##4458AD | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##4458AD | 1.00 | 6.47 | 3.25 | 6.47 |
| #FFFFFF | 6.47 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.25 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.47 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#2D63B0
Deuteranopia (green-blind)
#195AAB
Tritanopia (blue-blind)
#006B7A
Achromatopsia (no color)
#5E5E5E
Design tokens & code
CSS
--color: #4458ad; /* rgb */ color: rgb(68, 88, 173); /* oklch */ color: oklch(48.9% 0.137 270.6);
Tailwind
colors: {
custom: {
50: '#8186c6',
500: '#4458ad',
950: '#000000',
},
}SCSS
$custom: #4458ad; $custom-light: #8186c6; $custom-dark: #000000;
JSON
{
"hex": "#4458ad",
"rgb": {
"r": 68,
"g": 88,
"b": 173
},
"hsl": {
"h": 228.571,
"s": 43.568,
"l": 47.255
},
"oklch": {
"l": 0.48948,
"c": 0.13706,
"h": 270.6
},
"luminance": 0.11226
}Semantic roles & 50–950 ramp
primary
#4458AD
secondary
#C1B78B
accent
#BB54D3
background
#F8F8FC
surface
#EFEFF8
border
#CACAD1
text
#0B0B13
muted
#7C7C82