命名颜色 · #E4CAAD
Interactive Cream
Interactive Cream 即 #E4CAAD：rgb(228 202 173)、hsl(32 50% 79%)、oklch(0.853 0.049 70.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Interactive Cream color name →
#E4CAAD
oklch(0.853 0.049 70.2)
颜色转换
- HEX
- #e4caad
- RGB
- rgb(228 202 173)
- HSL
- hsl(32 50% 79%)
- HWB
- hwb(32 68% 11%)
- OKLCH
- oklch(0.853 0.049 70.2)
- OKLab
- oklab(0.853 0.017 0.046)
- CIE Lab
- lab(82.99 6.18 18.06)
- LCH
- lch(82.99 19.09 71.1)
- CMYK
- cmyk(0% 11% 24% 11%)
浅色调 · 深色调 · 灰色调
浅色调
- E7CFB5
- EAD5BD
- ECDAC5
- EFDFCE
- F2E4D6
- F4EADE
- F7EFE6
- FAF4EE
- FCFAF7
深色调
- C6AF96
- A9957F
- 8D7C6A
- 726455
- 584D41
- 3F372D
- 28221B
- 120F0B
- 030201
灰色调
- DAC2A9
- CFBBA4
- C5B3A0
- BBAC9B
- B1A497
- A79D92
- 9D968E
- 938E89
- 8A8785
配色和谐
互补色 +180°
- E4CAAD
Interactive Cream
- B8D2EE
≈ Modern Blue
类似色 -30° +30°
- E4CAAD
Interactive Cream
- ECC5B7
≈ Fatty Sashimi
- D6D0AC
≈ Crystal Palace
三角配色 +120° +240°
- E4CAAD
Interactive Cream
- ABDAD6
≈ Wave Top
- D9C7E7
≈ Foggy Love
分裂互补色 +150° +210°
- E4CAAD
Interactive Cream
- ACD7E5
≈ Light Blue
- C8CCEF
≈ Miami White
四角配色 +90° +180° +270°
- E4CAAD
Interactive Cream
- B4D9C4
≈ Mint Gala
- B8D2EE
≈ Modern Blue
- E6C3D9
≈ Dreamy Memory
对比度与无障碍
Ag
Fail白底
WCAG 1.57:1 · APCA Lc 26
Ag
AAA黑底
WCAG 13.35:1 · APCA Lc 77
最佳文字颜色: #000000
WCAG 13.35:1 (AAA) · APCA Lc 77
Contrast pairs
代码片段
CSS
:root {
--interactive-cream: #e4caad;
--interactive-cream-rgb: 228 202 173;
--interactive-cream-oklch: oklch(0.853 0.049 70.2);
}
.element {
color: var(--interactive-cream);
background-color: hsl(32 50% 79%);
border-color: oklch(0.853 0.049 70.2);
}Tailwind CSS v4
@theme {
--color-interactive-cream: #e4caad;
--color-interactive-cream-50: #fef3e6;
--color-interactive-cream-100: #f2e6d7;
--color-interactive-cream-200: #e2d1be;
--color-interactive-cream-300: #c7b49d;
--color-interactive-cream-400: #b19a80;
--color-interactive-cream-500: #9b8163;
--color-interactive-cream-600: #836d54;
--color-interactive-cream-700: #695743;
--color-interactive-cream-800: #4e3f30;
--color-interactive-cream-900: #362c21;
--color-interactive-cream-950: #211910;
}SCSS
$interactive-cream: #e4caad;
$interactive-cream-rgb: 228, 202, 173;
$interactive-cream-light: mix(#fff, $interactive-cream, 20%);
$interactive-cream-dark: mix(#000, $interactive-cream, 20%);
.element {
color: $interactive-cream;
box-shadow: 0 0 0 2px rgba($interactive-cream, 0.35);
}