命名颜色 · #FFFFE7
Cotton Puff
Cotton Puff 即 #FFFFE7：rgb(255 255 231)、hsl(60 100% 95%)、oklch(0.994 0.031 107)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Cotton Puff color name →
#FFFFE7
oklch(0.994 0.031 107)
颜色转换
- HEX
- #ffffe7
- RGB
- rgb(255 255 231)
- HSL
- hsl(60 100% 95%)
- HWB
- hwb(60 91% 0%)
- OKLCH
- oklch(0.994 0.031 107)
- OKLab
- oklab(0.994 -0.009 0.03)
- CIE Lab
- lab(99.53 -2.98 11.52)
- LCH
- lch(99.53 11.9 104.5)
- CMYK
- cmyk(0% 0% 9% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- FFFFE9
- FFFFEC
- FFFFEE
- FFFFF1
- FFFFF3
- FFFFF5
- FFFFF8
- FFFFFA
- FFFFFD
深色调
- DEDEC9
- BEBEAB
- 9E9E8F
- 808073
- 636359
- 484840
- 2E2E28
- 161613
- 030303
灰色调
- F2F2DC
- E4E4D2
- D7D7C7
- CACABD
- BDBEB2
- B1B1A8
- A4A49E
- 989894
- 8C8C8A
配色和谐
互补色 +180°
- FFFFE7
Cotton Puff
- FDFDFF
≈ Pale Grey
类似色 -30° +30°
- FFFFE7
Cotton Puff
- FFFDF9
≈ Lotion
- F9FFF7
≈ Touch of Mint
三角配色 +120° +240°
- FFFFE7
Cotton Puff
- FAFEFF
≈ Polar Bear in a Blizzard
- FFFCFD
≈ Flawed White
分裂互补色 +150° +210°
- FFFFE7
Cotton Puff
- FCFDFF
≈ Pale Grey
- FEFCFF
≈ Pale Grey
四角配色 +90° +180° +270°
- FFFFE7
Cotton Puff
- F7FFFF
≈ Sparkling Snow
- FDFDFF
≈ Pale Grey
- FFFCFC
≈ Whitecap Snow
对比度与无障碍
Ag
Fail白底
WCAG 1.01:1 · APCA Lc 0
Ag
AAA黑底
WCAG 20.70:1 · APCA Lc 107
最佳文字颜色: #000000
WCAG 20.70:1 (AAA) · APCA Lc 107
Contrast pairs
代码片段
CSS
:root {
--cotton-puff: #ffffe7;
--cotton-puff-rgb: 255 255 231;
--cotton-puff-oklch: oklch(0.994 0.031 107);
}
.element {
color: var(--cotton-puff);
background-color: hsl(60 100% 95%);
border-color: oklch(0.994 0.031 107);
}Tailwind CSS v4
@theme {
--color-cotton-puff: #ffffe7;
--color-cotton-puff-50: #f5f6ec;
--color-cotton-puff-100: #e8e9dd;
--color-cotton-puff-200: #d5d6c7;
--color-cotton-puff-300: #b8b9a7;
--color-cotton-puff-400: #a0a08b;
--color-cotton-puff-500: #888870;
--color-cotton-puff-600: #73735f;
--color-cotton-puff-700: #5c5c4c;
--color-cotton-puff-800: #444337;
--color-cotton-puff-900: #2f2e25;
--color-cotton-puff-950: #1b1b14;
}SCSS
$cotton-puff: #ffffe7;
$cotton-puff-rgb: 255, 255, 231;
$cotton-puff-light: mix(#fff, $cotton-puff, 20%);
$cotton-puff-dark: mix(#000, $cotton-puff, 20%);
.element {
color: $cotton-puff;
box-shadow: 0 0 0 2px rgba($cotton-puff, 0.35);
}