Named color · #55AAEE
Cerulean
Cerulean is #55AAEE: rgb(85 170 238), hsl(207 82% 63%), oklch(0.714 0.129 245.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Cerulean color name →
#55AAEE
oklch(0.714 0.129 245.2)
Color conversions
- HEX
- #55aaee
- RGB
- rgb(85 170 238)
- HSL
- hsl(207 82% 63%)
- HWB
- hwb(207 33% 7%)
- OKLCH
- oklch(0.714 0.129 245.2)
- OKLab
- oklab(0.714 -0.054 -0.117)
- CIE Lab
- lab(66.54 -10.76 -42.49)
- LCH
- lch(66.54 43.83 255.8)
- CMYK
- cmyk(64% 29% 0% 7%)
Tints · Shades · Tones
Tints
- 68B3F0
- 7ABCF3
- 8CC4F5
- 9DCDF7
- ADD5F8
- BEDEFA
- CEE6FB
- DEEEFD
- EFF7FE
Shades
- 4993CF
- 3D7DB1
- 316893
- 265377
- 1C3F5C
- 112D42
- 081B2A
- 020B14
- 000103
Tones
- 5CA6E3
- 62A2D8
- 679ECD
- 6C9AC2
- 7096B7
- 7492AC
- 778DA1
- 7A8996
- 7D858B
Color harmonies
Complementary +180°
- 55AAEE
Cerulean
- D99040
≈ Suede Vest
Analogous -30° +30°
- 55AAEE
Cerulean
- 00B6D4
≈ Ocean Sigh
- 8C9BF3
≈ Periwinkle Blue
Triadic +120° +240°
- 55AAEE
Cerulean
- E57E97
≈ Carissima
- 90B151
≈ Usumoegi Green
Split-complementary +150° +210°
- 55AAEE
Cerulean
- E7836A
≈ Brewed Mustard
- BCA132
≈ Grassy Ochre
Tetradic +90° +180° +270°
- 55AAEE
Cerulean
- D482C2
≈ Pink Punk
- D99040
≈ Suede Vest
- 56BA7F
≈ Heart Chakra
Contrast & accessibility
Ag
FailOn white
WCAG 2.50:1 · APCA Lc 49
Ag
AAAOn black
WCAG 8.37:1 · APCA Lc 53
Best text color: #000000
WCAG 8.37:1 (AAA) · APCA Lc 53
Contrast pairs
Code snippets
CSS
:root {
--cerulean: #55aaee;
--cerulean-rgb: 85 170 238;
--cerulean-oklch: oklch(0.714 0.129 245.2);
}
.element {
color: var(--cerulean);
background-color: hsl(207 82% 63%);
border-color: oklch(0.714 0.129 245.2);
}Tailwind CSS v4
@theme {
--color-cerulean: #55aaee;
--color-cerulean-50: #d8faff;
--color-cerulean-100: #c6edff;
--color-cerulean-200: #a8daff;
--color-cerulean-300: #80bef6;
--color-cerulean-400: #56a5e6;
--color-cerulean-500: #258cd5;
--color-cerulean-600: #2377b4;
--color-cerulean-700: #1c5f91;
--color-cerulean-800: #0d466b;
--color-cerulean-900: #09314b;
--color-cerulean-950: #001d32;
}SCSS
$cerulean: #55aaee;
$cerulean-rgb: 85, 170, 238;
$cerulean-light: mix(#fff, $cerulean, 20%);
$cerulean-dark: mix(#000, $cerulean, 20%);
.element {
color: $cerulean;
box-shadow: 0 0 0 2px rgba($cerulean, 0.35);
}