命名颜色 · #D7EDEA
Puffy Little Cloud
Puffy Little Cloud 即 #D7EDEA：rgb(215 237 234)、hsl(172 38% 89%)、oklch(0.929 0.024 186.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Puffy Little Cloud color name →
#D7EDEA
oklch(0.929 0.024 186.9)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- DBEFEC
- DFF1EE
- E3F2F0
- E7F4F2
- EBF6F4
- EFF8F7
- F3FAF9
- F7FBFB
- FBFDFD
深色调
- BBCECB
- 9FB0AE
- 859391
- 6B7775
- 525C5A
- 3B4241
- 252A29
- 111413
- 020303
灰色调
- CEE2DF
- C5D6D4
- BCCBC9
- B3C0BE
- ABB5B4
- A2AAA9
- 999F9F
- 919594
- 888A8A
配色和谐
互补色 +180°
- D7EDEA
Puffy Little Cloud
- F7E1E5
≈ Poetic Princess
类似色 -30° +30°
- D7EDEA
Puffy Little Cloud
- DCEDE1
≈ Cryo Freeze
- D7ECF2
≈ Sparkling River
三角配色 +120° +240°
- D7EDEA
Puffy Little Cloud
- ECE4F4
≈ Sheer Lavender
- F3E5D7
≈ Finest Silk
分裂互补色 +150° +210°
- D7EDEA
Puffy Little Cloud
- F3E2ED
≈ Pale Orchid Petal
- F7E3DD
≈ Berry Cheesecake
四角配色 +90° +180° +270°
- D7EDEA
Puffy Little Cloud
- E3E7F8
≈ Glitter
- F7E1E5
≈ Poetic Princess
- ECE8D6
≈ Light Frost
对比度与无障碍
Ag
Fail白底
WCAG 1.22:1 · APCA Lc 11
Ag
AAA黑底
WCAG 17.19:1 · APCA Lc 93
最佳文字颜色: #000000
WCAG 17.19:1 (AAA) · APCA Lc 93
Contrast pairs
代码片段
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);
}