命名颜色 · #F2D7B0
Cream Custard
Cream Custard 即 #F2D7B0：rgb(242 215 176)、hsl(35 72% 82%)、oklch(0.892 0.059 76.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Cream Custard color name →
#F2D7B0
oklch(0.892 0.059 76.9)
颜色转换
- HEX
- #f2d7b0
- RGB
- rgb(242 215 176)
- HSL
- hsl(35 72% 82%)
- HWB
- hwb(35 69% 5%)
- OKLCH
- oklch(0.892 0.059 76.9)
- OKLab
- oklab(0.892 0.013 0.058)
- CIE Lab
- lab(87.54 5.44 22.93)
- LCH
- lch(87.54 23.57 76.6)
- CMYK
- cmyk(0% 11% 27% 5%)
浅色调 · 深色调 · 灰色调
浅色调
- F3DBB8
- F5DFC0
- F6E3C8
- F7E7D0
- F9EBD8
- FAEFE0
- FBF3E7
- FDF7EF
- FEFBF7
深色调
- D2BB99
- B49F82
- 96856C
- 796B56
- 5E5242
- 433B2E
- 2B251C
- 14110B
- 030201
灰色调
- E6CEAB
- DAC5A7
- CFBCA2
- C3B39D
- B8AB98
- ACA293
- A1998F
- 96918A
- 8B8885
配色和谐
互补色 +180°
- F2D7B0
Cream Custard
- C5DDFF
≈ Arc Light
类似色 -30° +30°
- F2D7B0
Cream Custard
- FED0BA
≈ Vienna Sausage
- DFDFB2
≈ Modern Zen
三角配色 +120° +240°
- F2D7B0
Cream Custard
- AEE8E9
≈ Spearmint Water
- ECD0F6
≈ Mousse aux Pruneaux
分裂互补色 +150° +210°
- F2D7B0
Cream Custard
- B3E4FA
≈ Frozen Landscape
- D8D7FF
≈ Icy Plains
四角配色 +90° +180° +270°
- F2D7B0
Cream Custard
- B7E9D3
≈ Mediterranean Mist
- C5DDFF
≈ Arc Light
- FACCE3
≈ Classic Rose
对比度与无障碍
Ag
Fail白底
WCAG 1.38:1 · APCA Lc 19
Ag
AAA黑底
WCAG 15.12:1 · APCA Lc 85
最佳文字颜色: #000000
WCAG 15.12:1 (AAA) · APCA Lc 85
Contrast pairs
代码片段
CSS
:root {
--cream-custard: #f2d7b0;
--cream-custard-rgb: 242 215 176;
--cream-custard-oklch: oklch(0.892 0.059 76.9);
}
.element {
color: var(--cream-custard);
background-color: hsl(35 72% 82%);
border-color: oklch(0.892 0.059 76.9);
}Tailwind CSS v4
@theme {
--color-cream-custard: #f2d7b0;
--color-cream-custard-50: #fff4e3;
--color-cream-custard-100: #f3e6d2;
--color-cream-custard-200: #e2d2b8;
--color-cream-custard-300: #c8b496;
--color-cream-custard-400: #b39a77;
--color-cream-custard-500: #9d8159;
--color-cream-custard-600: #846e4c;
--color-cream-custard-700: #6a583c;
--color-cream-custard-800: #4f402b;
--color-cream-custard-900: #372c1d;
--color-cream-custard-950: #22190d;
}SCSS
$cream-custard: #f2d7b0;
$cream-custard-rgb: 242, 215, 176;
$cream-custard-light: mix(#fff, $cream-custard, 20%);
$cream-custard-dark: mix(#000, $cream-custard, 20%);
.element {
color: $cream-custard;
box-shadow: 0 0 0 2px rgba($cream-custard, 0.35);
}