이름 색상 · #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);
}