#4286AD#4286AD
#4286AD is a mid, moderate cyan. Relative luminance 0.212; OKLCH L 59.2% C 0.091 H 236.3°. Best body text is #000000 at 5.25:1 contrast (WCAG AA passes).
Color values
| HEX | #4286AD |
|---|---|
| RGB | rgb(66, 134, 173) |
| HSL | hsl(202, 45%, 47%) |
| HSV | hsv(202, 62%, 68%) |
| CMYK | cmyk(61.8%, 22.5%, 0%, 32.2%) |
| CIE-LAB | lab(53.19, -9.47, -27.05) |
| CIE-LCH | lch(53.19, 28.66, 250.71°) |
| OKLab | oklab(59.23% -0.0506 -0.0757) |
| OKLCH | oklch(59.23% 0.091 236.3) |
| XYZ | xyz(18.3118, 21.2238, 42.6586) |
| Luminance | 0.2123 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Steel Blue
#4682B4
ΔE00 3.89
Cool Blue
#4984B8
ΔE00 4.27
Dusty Blue
#5A86AD
ΔE00 4.36
Off Blue
#5684AE
ΔE00 4.41
Dirty Blue
#3F829D
ΔE00 4.46
Stormy Blue
#507B9C
ΔE00 5.03
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#4286AD #AD6942
analogous
#42AD9F #4286AD #4251AD
triadic
#4286AD #AD4286 #86AD42
tetradic
#4286AD #9F42AD #AD6942 #51AD42
square
#4286AD #9F42AD #AD6942 #51AD42
split-complementary
#4286AD #AD4251 #AD9F42
monochromatic
#204154 #316481 #4286AD #67A3C5 #93BED6
Accessibility & contrast
On white
4.00
#4286AD on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.25
#4286AD on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #4286AD
5.25:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##4286AD | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##4286AD | 1.00 | 4.00 | 5.25 | 5.25 |
| #FFFFFF | 4.00 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.25 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.25 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7485AF
Deuteranopia (green-blind)
#657AAC
Tritanopia (blue-blind)
#009093
Achromatopsia (no color)
#7F7F7F
Design tokens & code
CSS
--color: #4286ad; /* rgb */ color: rgb(66, 134, 173); /* oklch */ color: oklch(59.2% 0.091 236.3);
Tailwind
colors: {
custom: {
50: '#80a9c5',
500: '#4286ad',
950: '#000000',
},
}SCSS
$custom: #4286ad; $custom-light: #80a9c5; $custom-dark: #000000;
JSON
{
"hex": "#4286ad",
"rgb": {
"r": 66,
"g": 134,
"b": 173
},
"hsl": {
"h": 201.869,
"s": 44.77,
"l": 46.863
},
"oklch": {
"l": 0.59232,
"c": 0.09107,
"h": 236.3
},
"luminance": 0.21226
}Semantic roles & 50–950 ramp
primary
#4286AD
secondary
#C19E89
accent
#8253D4
background
#F8FAFC
surface
#EFF4F8
border
#CACED1
text
#0B0F13
muted
#7C7F82