Named color · #4579AC
Sleep
Sleep is #4579AC: rgb(69 121 172), hsl(210 43% 47%), oklch(0.562 0.097 249.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Sleep color name →
#4579AC
oklch(0.562 0.097 249.5)
Color conversions
- HEX
- #4579ac
- RGB
- rgb(69 121 172)
- HSL
- hsl(210 43% 47%)
- HWB
- hwb(210 27% 33%)
- OKLCH
- oklch(0.562 0.097 249.5)
- OKLab
- oklab(0.562 -0.034 -0.091)
- CIE Lab
- lab(48.92 -5.88 -33)
- LCH
- lch(48.92 33.52 259.9)
- CMYK
- cmyk(60% 30% 0% 33%)
Tints · Shades · Tones
Tints
- 5886B5
- 6A93BD
- 7CA0C6
- 8EAECE
- A1BBD6
- B3C8DF
- C6D6E7
- D9E3EF
- ECF1F7
Shades
- 3B6895
- 31587F
- 274869
- 1E3954
- 152B40
- 0C1D2D
- 05101B
- 02050B
- 000101
Tones
- 4C7AA8
- 537BA4
- 597C9F
- 5F7D9B
- 657D97
- 6A7E92
- 707F8E
- 757F89
- 7B8085
Color harmonies
Complementary +180°
- 4579AC
Sleep
- 9A6A2E
≈ Damascene
Analogous -30° +30°
- 4579AC
Sleep
- 15829C
≈ Decore Splash
- 6A6EAD
≈ Mediaeval
Triadic +120° +240°
- 4579AC
Sleep
- A65C69
≈ Delicate Prunus
- 638040
≈ Talipot Palm
Split-complementary +150° +210°
- 4579AC
Sleep
- A56048
≈ Spiced Carrot
- 837629
≈ Faience Green
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 4.58:1 · APCA Lc 72
Ag
AAOn black
WCAG 4.58:1 · APCA Lc 30
Best text color: #000000
WCAG 4.58:1 (AA) · APCA Lc 30
Contrast pairs
Code snippets
CSS
:root {
--sleep: #4579ac;
--sleep-rgb: 69 121 172;
--sleep-oklch: oklch(0.562 0.097 249.5);
}
.element {
color: var(--sleep);
background-color: hsl(210 43% 47%);
border-color: oklch(0.562 0.097 249.5);
}Tailwind CSS v4
@theme {
--color-sleep: #4579ac;
--color-sleep-50: #e2f8ff;
--color-sleep-100: #d1ebff;
--color-sleep-200: #b6d8fd;
--color-sleep-300: #93bbe8;
--color-sleep-400: #71a3d6;
--color-sleep-500: #508ac4;
--color-sleep-600: #4475a5;
--color-sleep-700: #365e85;
--color-sleep-800: #254562;
--color-sleep-900: #183045;
--color-sleep-950: #091c2d;
}SCSS
$sleep: #4579ac;
$sleep-rgb: 69, 121, 172;
$sleep-light: mix(#fff, $sleep, 20%);
$sleep-dark: mix(#000, $sleep, 20%);
.element {
color: $sleep;
box-shadow: 0 0 0 2px rgba($sleep, 0.35);
}