#397DC9#397DC9
#397DC9 is a mid, vivid cyan. Relative luminance 0.198; OKLCH L 58.3% C 0.136 H 253.3°. Best body text is #000000 at 4.95:1 contrast (WCAG AA passes).
Color values
| HEX | #397DC9 |
|---|---|
| RGB | rgb(57, 125, 201) |
| HSL | hsl(212, 57%, 51%) |
| HSV | hsv(212, 72%, 79%) |
| CMYK | cmyk(71.6%, 37.8%, 0%, 21.2%) |
| CIE-LAB | lab(51.56, 4.01, -45.68) |
| CIE-LCH | lch(51.56, 45.85, 275.02°) |
| OKLab | oklab(58.29% -0.039 -0.1301) |
| OKLCH | oklch(58.29% 0.136 253.3) |
| XYZ | xyz(19.5597, 19.7520, 58.0287) |
| Luminance | 0.1975 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Windows Blue
#3778BF
ΔE00 2.11
Cool Blue
#4984B8
ΔE00 3.42
Steel Blue
#4682B4
ΔE00 3.44
Bluish
#2976BB
ΔE00 3.50
Off Blue
#5684AE
ΔE00 4.61
Cerulean (survey)
#0485D1
ΔE00 4.87
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#397DC9 #C98539
analogous
#39C5C9 #397DC9 #3D39C9
triadic
#397DC9 #C9397D #7DC939
tetradic
#397DC9 #C939C5 #C98539 #39C93D
square
#397DC9 #C939C5 #C98539 #39C93D
split-complementary
#397DC9 #C93D39 #C5C939
monochromatic
#1D426B #2A5F9B #397DC9 #699DD6 #99BCE3
Accessibility & contrast
On white
4.24
#397DC9 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.95
#397DC9 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #397DC9
4.95:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##397DC9 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##397DC9 | 1.00 | 4.24 | 4.95 | 4.95 |
| #FFFFFF | 4.24 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.95 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.95 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#5A82CC
Deuteranopia (green-blind)
#4475C7
Tritanopia (blue-blind)
#008F99
Achromatopsia (no color)
#7B7B7B
Design tokens & code
CSS
--color: #397dc9; /* rgb */ color: rgb(57, 125, 201); /* oklch */ color: oklch(58.3% 0.136 253.3);
Tailwind
colors: {
custom: {
50: '#81a2da',
500: '#397dc9',
950: '#000000',
},
}SCSS
$custom: #397dc9; $custom-light: #81a2da; $custom-dark: #000000;
JSON
{
"hex": "#397dc9",
"rgb": {
"r": 57,
"g": 125,
"b": 201
},
"hsl": {
"h": 211.667,
"s": 57.143,
"l": 50.588
},
"oklch": {
"l": 0.5829,
"c": 0.13582,
"h": 253.3
},
"luminance": 0.19754
}Semantic roles & 50–950 ramp
primary
#397DC9
secondary
#CFB18F
accent
#9847E0
background
#F8F9FD
surface
#F0F2FA
border
#CBCCD3
text
#0C0F15
muted
#7D7E83