Named color · #78B1BF
Glacier
Glacier is #78B1BF: rgb(120 177 191), hsl(192 36% 61%), oklch(0.726 0.063 214.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Glacier color name →
#78B1BF
oklch(0.726 0.063 214.8)
Color conversions
- HEX
- #78b1bf
- RGB
- rgb(120 177 191)
- HSL
- hsl(192 36% 61%)
- HWB
- hwb(192 47% 25%)
- OKLCH
- oklch(0.726 0.063 214.8)
- OKLab
- oklab(0.726 -0.051 -0.036)
- CIE Lab
- lab(68.65 -16.62 -13.41)
- LCH
- lch(68.65 21.35 218.9)
- CMYK
- cmyk(37% 7% 0% 25%)
Tints · Shades · Tones
Tints
- 86B9C5
- 93C0CC
- A1C8D2
- AED0D8
- BCD8DF
- C9E0E5
- D7E7EC
- E4EFF2
- F2F7F9
Shades
- 6799A6
- 57838D
- 486C75
- 39575E
- 2A4248
- 1D2F33
- 101C1F
- 050C0D
- 010102
Tones
- 7AACB9
- 7BA7B2
- 7CA2AC
- 7D9DA5
- 7E989F
- 7F9499
- 7F8F93
- 808A8C
- 808586
Color harmonies
Complementary +180°
- 78B1BF
Glacier
- CA998C
≈ Calliope
Analogous -30° +30°
- 78B1BF
Glacier
- 79B4AB
≈ Intracoastal
- 86ABCC
≈ Mini Bay
Triadic +120° +240°
- 78B1BF
Glacier
- C098B6
≈ Dripping Wisteria
- B3A77A
≈ Geek Chic
Split-complementary +150° +210°
- 78B1BF
Glacier
- C997A1
≈ Cooing Doves
- C39F7D
≈ Meringue Tips
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.37:1 · APCA Lc 47
Ag
AAAOn black
WCAG 8.83:1 · APCA Lc 55
Best text color: #000000
WCAG 8.83:1 (AAA) · APCA Lc 55
Contrast pairs
Code snippets
CSS
:root {
--glacier: #78b1bf;
--glacier-rgb: 120 177 191;
--glacier-oklch: oklch(0.726 0.063 214.8);
}
.element {
color: var(--glacier);
background-color: hsl(192 36% 61%);
border-color: oklch(0.726 0.063 214.8);
}Tailwind CSS v4
@theme {
--color-glacier: #78b1bf;
--color-glacier-50: #e2faff;
--color-glacier-100: #d2eef6;
--color-glacier-200: #b7dbe6;
--color-glacier-300: #94c0cc;
--color-glacier-400: #73a8b6;
--color-glacier-500: #5291a0;
--color-glacier-600: #467b87;
--color-glacier-700: #38626c;
--color-glacier-800: #27484f;
--color-glacier-900: #1a3237;
--color-glacier-950: #0a1e22;
}SCSS
$glacier: #78b1bf;
$glacier-rgb: 120, 177, 191;
$glacier-light: mix(#fff, $glacier, 20%);
$glacier-dark: mix(#000, $glacier, 20%);
.element {
color: $glacier;
box-shadow: 0 0 0 2px rgba($glacier, 0.35);
}