Named color · #D5E0CF
Comforting Green
Comforting Green is #D5E0CF: rgb(213 224 207), hsl(99 22% 85%), oklch(0.894 0.026 134.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Comforting Green color name →
#D5E0CF
oklch(0.894 0.026 134.3)
Color conversions
- HEX
- #d5e0cf
- RGB
- rgb(213 224 207)
- HSL
- hsl(99 22% 85%)
- HWB
- hwb(99 81% 12%)
- OKLCH
- oklch(0.894 0.026 134.3)
- OKLab
- oklab(0.894 -0.018 0.018)
- CIE Lab
- lab(87.98 -6.11 7.02)
- LCH
- lch(87.98 9.3 131)
- CMYK
- cmyk(5% 0% 8% 12%)
Tints · Shades · Tones
Tints
- D9E3D4
- DDE6D8
- E1E9DD
- E6ECE2
- EAEFE7
- EEF3EC
- F2F6F0
- F7F9F5
- FBFCFA
Shades
- B9C3B4
- 9EA699
- 838A7F
- 6A7067
- 51564F
- 3A3E38
- 242723
- 101210
- 020202
Tones
- CCD6C7
- C3CCBF
- BBC2B7
- B2B8AF
- AAAFA7
- A1A59F
- 999C97
- 90928F
- 888988
Color harmonies
Complementary +180°
- D5E0CF
Comforting Green
- E2D7E8
≈ Old Chalk
Analogous -30° +30°
- D5E0CF
Comforting Green
- DEDDCA
≈ Green White
- CDE2D7
≈ Light Silverton
Triadic +120° +240°
- D5E0CF
Comforting Green
- D1DDED
≈ Morning Shower
- EDD5D7
≈ Berry Taffy
Split-complementary +150° +210°
- D5E0CF
Comforting Green
- D9DAED
≈ Eyeshadow
- E9D6E0
≈ Swiss Rose
Tetradic +90° +180° +270°
- D5E0CF
Comforting Green
- CBE0E9
≈ Duck’s Egg Blue
- E2D7E8
≈ Old Chalk
- ECD7CE
≈ Coral Cream
Contrast & accessibility
Ag
FailOn white
WCAG 1.36:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.39:1 · APCA Lc 86
Best text color: #000000
WCAG 15.39:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--comforting-green: #d5e0cf;
--comforting-green-rgb: 213 224 207;
--comforting-green-oklch: oklch(0.894 0.026 134.3);
}
.element {
color: var(--comforting-green);
background-color: hsl(99 22% 85%);
border-color: oklch(0.894 0.026 134.3);
}Tailwind CSS v4
@theme {
--color-comforting-green: #d5e0cf;
--color-comforting-green-50: #f2f7f0;
--color-comforting-green-100: #e4eae2;
--color-comforting-green-200: #cfd7cc;
--color-comforting-green-300: #b2bbae;
--color-comforting-green-400: #98a293;
--color-comforting-green-500: #7f8a79;
--color-comforting-green-600: #6c7567;
--color-comforting-green-700: #565e52;
--color-comforting-green-800: #3f443b;
--color-comforting-green-900: #2b2f29;
--color-comforting-green-950: #191c17;
}SCSS
$comforting-green: #d5e0cf;
$comforting-green-rgb: 213, 224, 207;
$comforting-green-light: mix(#fff, $comforting-green, 20%);
$comforting-green-dark: mix(#000, $comforting-green, 20%);
.element {
color: $comforting-green;
box-shadow: 0 0 0 2px rgba($comforting-green, 0.35);
}