Benoemde kleur · #D7EDEA
Puffy Little Cloud
Puffy Little Cloud is #D7EDEA: rgb(215 237 234), hsl(172 38% 89%), oklch(0.929 0.024 186.9). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Gray mean? → · Puffy Little Cloud color name →
#D7EDEA
oklch(0.929 0.024 186.9)
Kleurconversies
- 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%)
Tinten · Schaduwen · Tonen
Tinten
- DBEFEC
- DFF1EE
- E3F2F0
- E7F4F2
- EBF6F4
- EFF8F7
- F3FAF9
- F7FBFB
- FBFDFD
Schaduwen
- BBCECB
- 9FB0AE
- 859391
- 6B7775
- 525C5A
- 3B4241
- 252A29
- 111413
- 020303
Tonen
- CEE2DF
- C5D6D4
- BCCBC9
- B3C0BE
- ABB5B4
- A2AAA9
- 999F9F
- 919594
- 888A8A
Kleurharmonieën
Complementair +180°
- D7EDEA
Puffy Little Cloud
- F7E1E5
≈ Poetic Princess
Analoog -30° +30°
- D7EDEA
Puffy Little Cloud
- DCEDE1
≈ Cryo Freeze
- D7ECF2
≈ Sparkling River
Triadisch +120° +240°
- D7EDEA
Puffy Little Cloud
- ECE4F4
≈ Sheer Lavender
- F3E5D7
≈ Finest Silk
Gesplitst complementair +150° +210°
- D7EDEA
Puffy Little Cloud
- F3E2ED
≈ Pale Orchid Petal
- F7E3DD
≈ Berry Cheesecake
Tetradisch +90° +180° +270°
- D7EDEA
Puffy Little Cloud
- E3E7F8
≈ Glitter
- F7E1E5
≈ Poetic Princess
- ECE8D6
≈ Light Frost
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.22:1 · APCA Lc 11
Ag
AAAOp zwart
WCAG 17.19:1 · APCA Lc 93
Beste tekstkleur: #000000
WCAG 17.19:1 (AAA) · APCA Lc 93
Contrast pairs
Codefragmenten
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);
}