Nearest named color · #CAF7EF
#CAF7EF
Nearest named color: Glacial Drift
#CAF7EF (rgb(202 247 239), hsl(169 74% 88%), oklch(0.942 0.047 183.3)) is closest to the named color Glacial Drift. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#CAF7EF
oklch(0.942 0.047 183.3)
Color conversions
- HEX
- #caf7ef
- RGB
- rgb(202 247 239)
- HSL
- hsl(169 74% 88%)
- HWB
- hwb(169 79% 3%)
- OKLCH
- oklch(0.942 0.047 183.3)
- OKLab
- oklab(0.942 -0.047 -0.003)
- CIE Lab
- lab(93.91 -16.11 -1.17)
- LCH
- lch(93.91 16.15 184.2)
- CMYK
- cmyk(18% 0% 3% 3%)
Tints · Shades · Tones
Tints
- D0F8F1
- D5F9F2
- DAFAF4
- E0FAF5
- E5FBF7
- EAFCF9
- F0FDFA
- F5FDFC
- FAFEFD
Shades
- AFD7D0
- 95B7B1
- 7C9994
- 647C78
- 4D605C
- 374542
- 222C2A
- 0F1514
- 020303
Tones
- C3EBE3
- BBDED8
- B4D2CC
- ACC6C1
- A5BAB6
- 9DAEAB
- 96A2A0
- 8F9795
- 878B8B
Color harmonies
Complementary +180°
- CAF7EF
Glacial Drift
- FFE4EA
≈ Early Blossom
Analogous -30° +30°
- CAF7EF
Glacial Drift
- D5F6DD
≈ Fennel Tea
- C9F5FF
≈ Vaporised
Triadic +120° +240°
- CAF7EF
Glacial Drift
- F0E7FF
≈ Bright Dusk
- FFE7D3
≈ Mood Lighting
Split-complementary +150° +210°
- CAF7EF
Glacial Drift
- FFE2F9
≈ Fairy Salt
- FFE6E0
≈ Olm Pink
Tetradic +90° +180° +270°
- CAF7EF
Glacial Drift
- E6EBFF
≈ Icy Lilac
- FFE4EA
≈ Early Blossom
- F7ECC9
≈ Shiny Silk
Contrast & accessibility
Ag
FailOn white
WCAG 1.16:1 · APCA Lc 8
Ag
AAAOn black
WCAG 18.06:1 · APCA Lc 97
Best text color: #000000
WCAG 18.06:1 (AAA) · APCA Lc 97
Contrast pairs
Code snippets
CSS
:root {
--glacial-drift: #caf7ef;
--glacial-drift-rgb: 202 247 239;
--glacial-drift-oklch: oklch(0.942 0.047 183.3);
}
.element {
color: var(--glacial-drift);
background-color: hsl(169 74% 88%);
border-color: oklch(0.942 0.047 183.3);
}Tailwind CSS v4
@theme {
--color-glacial-drift: #caf7ef;
--color-glacial-drift-50: #e7faf7;
--color-glacial-drift-100: #d7edea;
--color-glacial-drift-200: #bfdbd7;
--color-glacial-drift-300: #9dc0bb;
--color-glacial-drift-400: #80a8a1;
--color-glacial-drift-500: #629189;
--color-glacial-drift-600: #537a74;
--color-glacial-drift-700: #42625d;
--color-glacial-drift-800: #304843;
--color-glacial-drift-900: #20322e;
--color-glacial-drift-950: #101e1b;
}SCSS
$glacial-drift: #caf7ef;
$glacial-drift-rgb: 202, 247, 239;
$glacial-drift-light: mix(#fff, $glacial-drift, 20%);
$glacial-drift-dark: mix(#000, $glacial-drift, 20%);
.element {
color: $glacial-drift;
box-shadow: 0 0 0 2px rgba($glacial-drift, 0.35);
}