Named color · #DDF3C2
Envious Pastel
Envious Pastel is #DDF3C2: rgb(221 243 194), hsl(87 67% 86%), oklch(0.936 0.068 127.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Envious Pastel color name →
#DDF3C2
oklch(0.936 0.068 127.4)
Color conversions
- HEX
- #ddf3c2
- RGB
- rgb(221 243 194)
- HSL
- hsl(87 67% 86%)
- HWB
- hwb(87 76% 5%)
- OKLCH
- oklch(0.936 0.068 127.4)
- OKLab
- oklab(0.936 -0.042 0.054)
- CIE Lab
- lab(93.28 -13.75 21.19)
- LCH
- lch(93.28 25.26 123)
- CMYK
- cmyk(9% 0% 20% 5%)
Tints · Shades · Tones
Tints
- E0F4C8
- E4F6CE
- E7F7D5
- EBF8DB
- EEF9E1
- F1FAE7
- F5FCED
- F8FDF3
- FCFEF9
Shades
- C0D3A8
- A4B48F
- 889777
- 6E7A60
- 555E49
- 3D4434
- 262B20
- 11140E
- 020302
Tones
- D3E7BB
- CADBB5
- C0CFAE
- B7C4A7
- ADB8A1
- A4AD9A
- 9BA194
- 92968D
- 898B87
Color harmonies
Complementary +180°
- DDF3C2
Envious Pastel
- F1E3FF
≈ Minute Mauve
Analogous -30° +30°
- DDF3C2
Envious Pastel
- F6EBB6
≈ Lantern Light
- C5F8D8
≈ Seafair Green
Triadic +120° +240°
- DDF3C2
Envious Pastel
- D9ECFF
≈ Hoarfrost
- FFE1E6
≈ Pink Pleasure
Split-complementary +150° +210°
- DDF3C2
Envious Pastel
- E4E8FF
≈ Glitter
- FFDFF5
≈ Fairy Salt
Tetradic +90° +180° +270°
- DDF3C2
Envious Pastel
- C7F2FF
≈ Heaven’s Gate
- F1E3FF
≈ Minute Mauve
- FFE3DA
≈ Peach Cloud
Contrast & accessibility
Ag
FailOn white
WCAG 1.18:1 · APCA Lc 9
Ag
AAAOn black
WCAG 17.67:1 · APCA Lc 95
Best text color: #000000
WCAG 17.67:1 (AAA) · APCA Lc 95
Contrast pairs
Code snippets
CSS
:root {
--envious-pastel: #ddf3c2;
--envious-pastel-rgb: 221 243 194;
--envious-pastel-oklch: oklch(0.936 0.068 127.4);
}
.element {
color: var(--envious-pastel);
background-color: hsl(87 67% 86%);
border-color: oklch(0.936 0.068 127.4);
}Tailwind CSS v4
@theme {
--color-envious-pastel: #ddf3c2;
--color-envious-pastel-50: #eff9e5;
--color-envious-pastel-100: #e1edd5;
--color-envious-pastel-200: #cbdbbc;
--color-envious-pastel-300: #acbf9a;
--color-envious-pastel-400: #93a67b;
--color-envious-pastel-500: #7a8f5d;
--color-envious-pastel-600: #67794f;
--color-envious-pastel-700: #52613f;
--color-envious-pastel-800: #3d472c;
--color-envious-pastel-900: #2a311e;
--color-envious-pastel-950: #171d0e;
}SCSS
$envious-pastel: #ddf3c2;
$envious-pastel-rgb: 221, 243, 194;
$envious-pastel-light: mix(#fff, $envious-pastel, 20%);
$envious-pastel-dark: mix(#000, $envious-pastel, 20%);
.element {
color: $envious-pastel;
box-shadow: 0 0 0 2px rgba($envious-pastel, 0.35);
}