#609CE3#609CE3
#609CE3 is a light, vivid cyan. Relative luminance 0.318; OKLCH L 68.2% C 0.123 H 253.6°. Best body text is #000000 at 7.36:1 contrast (WCAG AA passes).
Color values
| HEX | #609CE3 |
|---|---|
| RGB | rgb(96, 156, 227) |
| HSL | hsl(213, 70%, 63%) |
| HSV | hsv(213, 58%, 89%) |
| CMYK | cmyk(57.7%, 31.3%, 0%, 11%) |
| CIE-LAB | lab(63.18, 1.28, -41.81) |
| CIE-LCH | lch(63.18, 41.83, 271.75°) |
| OKLab | oklab(68.23% -0.0347 -0.1179) |
| OKLCH | oklch(68.23% 0.123 253.6) |
| XYZ | xyz(30.5725, 31.8071, 77.1864) |
| Luminance | 0.3181 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Cornflowerblue
#6495ED
ΔE00 3.39
Dark Sky Blue
#448EE4
ΔE00 4.58
Dodgerblue
#1E90FF
ΔE00 4.83
Azure (survey)
#069AF3
ΔE00 5.58
Faded Blue
#658CBB
ΔE00 6.62
Soft Blue
#6488EA
ΔE00 7.47
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#609CE3 #E3A760
analogous
#60DDE3 #609CE3 #6560E3
triadic
#609CE3 #E3609C #9CE360
tetradic
#609CE3 #E360DD #E3A760 #60E365
square
#609CE3 #E360DD #E3A760 #60E365
split-complementary
#609CE3 #E36560 #DDE360
monochromatic
#1E5EAB #2C7CDA #609CE3 #94BCEC #C8DDF5
Accessibility & contrast
On white
2.85
#609CE3 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.36
#609CE3 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #609CE3
7.36:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##609CE3 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##609CE3 | 1.00 | 2.85 | 7.36 | 7.36 |
| #FFFFFF | 2.85 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.36 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.36 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7EA0E6
Deuteranopia (green-blind)
#6D93E2
Tritanopia (blue-blind)
#00ACB5
Achromatopsia (no color)
#999999
Design tokens & code
CSS
--color: #609ce3; /* rgb */ color: rgb(96, 156, 227); /* oklch */ color: oklch(68.2% 0.123 253.6);
Tailwind
colors: {
custom: {
50: '#97b8ec',
500: '#609ce3',
950: '#000000',
},
}SCSS
$custom: #609ce3; $custom-light: #97b8ec; $custom-dark: #000000;
JSON
{
"hex": "#609ce3",
"rgb": {
"r": 96,
"g": 156,
"b": 227
},
"hsl": {
"h": 212.519,
"s": 70.053,
"l": 63.333
},
"oklch": {
"l": 0.68234,
"c": 0.1229,
"h": 253.6
},
"luminance": 0.3181
}Semantic roles & 50–950 ramp
primary
#609CE3
secondary
#E7D1B8
accent
#7B13D2
background
#F9FBFE
surface
#F2F6FD
border
#CCD0D5
text
#0E1116
muted
#7E8084