Named color · #DCE9E9
Carefree
Carefree is #DCE9E9: rgb(220 233 233), hsl(180 23% 89%), oklch(0.924 0.014 196.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Carefree color name →
#DCE9E9
oklch(0.924 0.014 196.9)
Color conversions
- HEX
- #dce9e9
- RGB
- rgb(220 233 233)
- HSL
- hsl(180 23% 89%)
- HWB
- hwb(180 86% 9%)
- OKLCH
- oklch(0.924 0.014 196.9)
- OKLab
- oklab(0.924 -0.013 -0.004)
- CIE Lab
- lab(91.36 -4.47 -1.57)
- LCH
- lch(91.36 4.74 199.4)
- CMYK
- cmyk(6% 0% 0% 9%)
Tints · Shades · Tones
Tints
- DFEBEB
- E3EDED
- E6F0F0
- EAF2F2
- EDF4F4
- F1F6F6
- F4F8F8
- F8FBFB
- FBFDFD
Shades
- BFCBCB
- A3ADAD
- 889090
- 6E7474
- 545A5A
- 3C4141
- 262929
- 111313
- 020303
Tones
- D2DEDE
- C9D3D3
- C0C8C8
- B6BEBE
- ADB3B3
- A4A9A9
- 9B9E9E
- 929494
- 898A8A
Color harmonies
Complementary +180°
- DCE9E9
Carefree
- EFE2E3
≈ Dulcet Pink
Analogous -30° +30°
- DCE9E9
Carefree
- DEE9E4
≈ Frosty Pink
- DDE8ED
≈ Moby Dick
Triadic +120° +240°
- DCE9E9
Carefree
- EAE3EC
≈ Modest Violet
- EBE5DC
≈ Elk Skin
Split-complementary +150° +210°
- DCE9E9
Carefree
- EDE2E8
≈ Dream Dust
- EEE3DE
≈ Glossy Kiss
Tetradic +90° +180° +270°
- DCE9E9
Carefree
- E5E5EF
≈ Lavender Syrup
- EFE2E3
≈ Dulcet Pink
- E7E7DC
≈ Narvik
Contrast & accessibility
Ag
FailOn white
WCAG 1.24:1 · APCA Lc 12
Ag
AAAOn black
WCAG 16.87:1 · APCA Lc 92
Best text color: #000000
WCAG 16.87:1 (AAA) · APCA Lc 92
Contrast pairs
Code snippets
CSS
:root {
--carefree: #dce9e9;
--carefree-rgb: 220 233 233;
--carefree-oklch: oklch(0.924 0.014 196.9);
}
.element {
color: var(--carefree);
background-color: hsl(180 23% 89%);
border-color: oklch(0.924 0.014 196.9);
}Tailwind CSS v4
@theme {
--color-carefree: #dce9e9;
--color-carefree-50: #f1f6f6;
--color-carefree-100: #e3e9e9;
--color-carefree-200: #ced6d6;
--color-carefree-300: #b0baba;
--color-carefree-400: #96a1a1;
--color-carefree-500: #7c8989;
--color-carefree-600: #697474;
--color-carefree-700: #545d5d;
--color-carefree-800: #3d4444;
--color-carefree-900: #2a2f2f;
--color-carefree-950: #181b1b;
}SCSS
$carefree: #dce9e9;
$carefree-rgb: 220, 233, 233;
$carefree-light: mix(#fff, $carefree, 20%);
$carefree-dark: mix(#000, $carefree, 20%);
.element {
color: $carefree;
box-shadow: 0 0 0 2px rgba($carefree, 0.35);
}