#368CE2#368CE2
#368CE2 is a light, vivid cyan. Relative luminance 0.250; OKLCH L 63.0% C 0.153 H 251.6°. Best body text is #000000 at 6.01:1 contrast (WCAG AA passes).
Color values
| HEX | #368CE2 |
|---|---|
| RGB | rgb(54, 140, 226) |
| HSL | hsl(210, 75%, 55%) |
| HSV | hsv(210, 76%, 89%) |
| CMYK | cmyk(76.1%, 38.1%, 0%, 11.4%) |
| CIE-LAB | lab(57.10, 3.64, -50.96) |
| CIE-LCH | lch(57.10, 51.09, 274.08°) |
| OKLab | oklab(63.04% -0.0482 -0.1454) |
| OKLCH | oklch(63.04% 0.153 251.6) |
| XYZ | xyz(24.6217, 25.0285, 75.4701) |
| Luminance | 0.2503 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Dark Sky Blue
#448EE4
ΔE00 1.49
Dodgerblue
#1E90FF
ΔE00 2.76
Cerulean (survey)
#0485D1
ΔE00 4.47
Cool Blue
#4984B8
ΔE00 4.96
Water Blue
#0E87CC
ΔE00 4.98
Azure
#007FFF
ΔE00 5.17
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#368CE2 #E28C36
analogous
#36E2E2 #368CE2 #3636E2
triadic
#368CE2 #E2368C #8CE236
tetradic
#368CE2 #E236E2 #E28C36 #36E236
square
#368CE2 #E236E2 #E28C36 #36E236
split-complementary
#368CE2 #E23636 #E2E236
monochromatic
#144F8A #1C6DBF #368CE2 #6BABEA #A1C9F1
Accessibility & contrast
On white
3.50
#368CE2 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.01
#368CE2 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #368CE2
6.01:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##368CE2 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##368CE2 | 1.00 | 3.50 | 6.01 | 6.01 |
| #FFFFFF | 3.50 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.01 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.01 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6392E5
Deuteranopia (green-blind)
#4982E0
Tritanopia (blue-blind)
#00A0AC
Achromatopsia (no color)
#898989
Design tokens & code
CSS
--color: #368ce2; /* rgb */ color: rgb(54, 140, 226); /* oklch */ color: oklch(63.0% 0.153 251.6);
Tailwind
colors: {
custom: {
50: '#84adeb',
500: '#368ce2',
950: '#000000',
},
}SCSS
$custom: #368ce2; $custom-light: #84adeb; $custom-dark: #000000;
JSON
{
"hex": "#368ce2",
"rgb": {
"r": 54,
"g": 140,
"b": 226
},
"hsl": {
"h": 210,
"s": 74.783,
"l": 54.902
},
"oklch": {
"l": 0.63036,
"c": 0.15316,
"h": 251.6
},
"luminance": 0.25031
}Semantic roles & 50–950 ramp
primary
#368CE2
secondary
#DEBA96
accent
#9436F1
background
#F8FAFE
surface
#F0F4FD
border
#CBCED5
text
#0D1016
muted
#7D7F84