Named color · #D7EDEA
Puffy Little Cloud
Puffy Little Cloud is #D7EDEA: rgb(215 237 234), hsl(172 38% 89%), oklch(0.929 0.024 186.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Puffy Little Cloud color name →
#D7EDEA
oklch(0.929 0.024 186.9)
Color conversions
- HEX
- #d7edea
- RGB
- rgb(215 237 234)
- HSL
- hsl(172 38% 89%)
- HWB
- hwb(172 84% 7%)
- OKLCH
- oklch(0.929 0.024 186.9)
- OKLab
- oklab(0.929 -0.023 -0.003)
- CIE Lab
- lab(92.05 -7.92 -1.15)
- LCH
- lch(92.05 8.01 188.2)
- CMYK
- cmyk(9% 0% 1% 7%)
Tints · Shades · Tones
Tints
- DBEFEC
- DFF1EE
- E3F2F0
- E7F4F2
- EBF6F4
- EFF8F7
- F3FAF9
- F7FBFB
- FBFDFD
Shades
- BBCECB
- 9FB0AE
- 859391
- 6B7775
- 525C5A
- 3B4241
- 252A29
- 111413
- 020303
Tones
- CEE2DF
- C5D6D4
- BCCBC9
- B3C0BE
- ABB5B4
- A2AAA9
- 999F9F
- 919594
- 888A8A
Color harmonies
Complementary +180°
- D7EDEA
Puffy Little Cloud
- F7E1E5
≈ Poetic Princess
Analogous -30° +30°
- D7EDEA
Puffy Little Cloud
- DCEDE1
≈ Cryo Freeze
- D7ECF2
≈ Sparkling River
Triadic +120° +240°
- D7EDEA
Puffy Little Cloud
- ECE4F4
≈ Sheer Lavender
- F3E5D7
≈ Finest Silk
Split-complementary +150° +210°
- D7EDEA
Puffy Little Cloud
- F3E2ED
≈ Pale Orchid Petal
- F7E3DD
≈ Berry Cheesecake
Tetradic +90° +180° +270°
- D7EDEA
Puffy Little Cloud
- E3E7F8
≈ Glitter
- F7E1E5
≈ Poetic Princess
- ECE8D6
≈ Light Frost
Contrast & accessibility
Ag
FailOn white
WCAG 1.22:1 · APCA Lc 11
Ag
AAAOn black
WCAG 17.19:1 · APCA Lc 93
Best text color: #000000
WCAG 17.19:1 (AAA) · APCA Lc 93
Contrast pairs
Code snippets
CSS
:root {
--puffy-little-cloud: #d7edea;
--puffy-little-cloud-rgb: 215 237 234;
--puffy-little-cloud-oklch: oklch(0.929 0.024 186.9);
}
.element {
color: var(--puffy-little-cloud);
background-color: hsl(172 38% 89%);
border-color: oklch(0.929 0.024 186.9);
}Tailwind CSS v4
@theme {
--color-puffy-little-cloud: #d7edea;
--color-puffy-little-cloud-50: #eef7f6;
--color-puffy-little-cloud-100: #e0ebe9;
--color-puffy-little-cloud-200: #cad8d6;
--color-puffy-little-cloud-300: #abbbba;
--color-puffy-little-cloud-400: #90a3a1;
--color-puffy-little-cloud-500: #758c89;
--color-puffy-little-cloud-600: #637674;
--color-puffy-little-cloud-700: #4f5e5c;
--color-puffy-little-cloud-800: #3a4543;
--color-puffy-little-cloud-900: #27302e;
--color-puffy-little-cloud-950: #161c1b;
}SCSS
$puffy-little-cloud: #d7edea;
$puffy-little-cloud-rgb: 215, 237, 234;
$puffy-little-cloud-light: mix(#fff, $puffy-little-cloud, 20%);
$puffy-little-cloud-dark: mix(#000, $puffy-little-cloud, 20%);
.element {
color: $puffy-little-cloud;
box-shadow: 0 0 0 2px rgba($puffy-little-cloud, 0.35);
}