命名颜色 · #F4D8E8
Nursery Pink
Nursery Pink 即 #F4D8E8：rgb(244 216 232)、hsl(326 56% 90%)、oklch(0.91 0.037 342.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Pink mean? → · Nursery Pink color name →
#F4D8E8
oklch(0.91 0.037 342.5)
颜色转换
- HEX
- #f4d8e8
- RGB
- rgb(244 216 232)
- HSL
- hsl(326 56% 90%)
- HWB
- hwb(326 85% 4%)
- OKLCH
- oklch(0.91 0.037 342.5)
- OKLab
- oklab(0.91 0.036 -0.011)
- CIE Lab
- lab(89.04 12 -4.13)
- LCH
- lch(89.04 12.69 341)
- CMYK
- cmyk(0% 11% 5% 4%)
浅色调 · 深色调 · 灰色调
浅色调
- F5DCEA
- F6E0ED
- F8E4EF
- F9E8F1
- FAEBF3
- FBEFF6
- FCF3F8
- FDF7FA
- FEFBFD
深色调
- D4BCCA
- B5A0AC
- 978590
- 7A6B74
- 5E5359
- 443B40
- 2B2529
- 141113
- 030203
灰色调
- E8CFDD
- DCC6D2
- D0BDC8
- C4B4BD
- B8ABB3
- ADA2A8
- A19A9E
- 969194
- 8B888A
配色和谐
互补色 +180°
- F4D8E8
Nursery Pink
- CCEADA
≈ Turquoise White
类似色 -30° +30°
- F4D8E8
Nursery Pink
- EADBF4
≈ Pouty Purple
- F9D8DA
≈ Lucky You
三角配色 +120° +240°
- F4D8E8
Nursery Pink
- E6E3C7
≈ White Cliffs
- C8E7F3
≈ Sapphireberry
分裂互补色 +150° +210°
- F4D8E8
Nursery Pink
- D8E7CE
≈ Light Lime Sherbet
- C6EAE8
≈ Tahitian Sky
四角配色 +90° +180° +270°
- F4D8E8
Nursery Pink
- F1DEC7
≈ Silk Teddy
- CCEADA
≈ Turquoise White
- D0E3FA
≈ Weathered Blue
对比度与无障碍
Ag
Fail白底
WCAG 1.32:1 · APCA Lc 16
Ag
AAA黑底
WCAG 15.83:1 · APCA Lc 88
最佳文字颜色: #000000
WCAG 15.83:1 (AAA) · APCA Lc 88
Contrast pairs
代码片段
CSS
:root {
--nursery-pink: #f4d8e8;
--nursery-pink-rgb: 244 216 232;
--nursery-pink-oklch: oklch(0.91 0.037 342.5);
}
.element {
color: var(--nursery-pink);
background-color: hsl(326 56% 90%);
border-color: oklch(0.91 0.037 342.5);
}Tailwind CSS v4
@theme {
--color-nursery-pink: #f4d8e8;
--color-nursery-pink-50: #fef1f8;
--color-nursery-pink-100: #f2e3eb;
--color-nursery-pink-200: #e1ced8;
--color-nursery-pink-300: #c6b0bc;
--color-nursery-pink-400: #af96a4;
--color-nursery-pink-500: #987d8d;
--color-nursery-pink-600: #816a77;
--color-nursery-pink-700: #67545f;
--color-nursery-pink-800: #4c3d46;
--color-nursery-pink-900: #352a31;
--color-nursery-pink-950: #20181d;
}SCSS
$nursery-pink: #f4d8e8;
$nursery-pink-rgb: 244, 216, 232;
$nursery-pink-light: mix(#fff, $nursery-pink, 20%);
$nursery-pink-dark: mix(#000, $nursery-pink, 20%);
.element {
color: $nursery-pink;
box-shadow: 0 0 0 2px rgba($nursery-pink, 0.35);
}