이름 색상 · #E8CABA

Home and Hearth

Home and Hearth은(는) #E8CABA: rgb(232 202 186), hsl(21 50% 82%), oklch(0.86 0.04 49.8). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Orange mean? → · Home and Hearth color name →

#E8CABA

oklch(0.86 0.04 49.8)

색상 변환

HEX: #e8caba
RGB: rgb(232 202 186)
HSL: hsl(21 50% 82%)
HWB: hwb(21 73% 9%)
OKLCH: oklch(0.86 0.04 49.8)
OKLab: oklab(0.86 0.026 0.031)
CIE Lab: lab(83.58 9.07 12.11)
LCH: lch(83.58 15.13 53.2)
CMYK: cmyk(0% 13% 20% 9%)

틴트 · 셰이드 · 톤

틴트

EACFC1
EDD5C8
EFDACE
F1DFD5
F4E4DC
F6EAE3
F8EFEA
FBF4F1
FDFAF8

셰이드

CAAFA1
AC9589
907C72
74645C
594D46
403732
29221E
130F0D
030202

톤

DDC2B4
D2BBAE
C8B3A8
BDACA2
B3A49D
A89D97
9E9691
948E8B
8A8786

색 조화

보색 +180°

E8CABA
Home and Hearth
B7D7E7
≈ Lingerie Blue

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

사각 배색 +90° +180° +270°

대비 및 접근성

흰색 위

WCAG 1.54:1 · APCA Lc 25

Fail

검은색 위

WCAG 13.58:1 · APCA Lc 78

AAA

가장 좋은 글자색: #000000

WCAG 13.58:1 (AAA) · APCA Lc 78

Contrast pairs

코드 스니펫

CSS

:root {
  --home-and-hearth: #e8caba;
  --home-and-hearth-rgb: 232 202 186;
  --home-and-hearth-oklch: oklch(0.86 0.04 49.8);
}

.element {
  color: var(--home-and-hearth);
  background-color: hsl(21 50% 82%);
  border-color: oklch(0.86 0.04 49.8);
}

Tailwind CSS v4

@theme {
  --color-home-and-hearth: #e8caba;
  --color-home-and-hearth-50: #fff2eb;
  --color-home-and-hearth-100: #f4e4dc;
  --color-home-and-hearth-200: #e3d0c5;
  --color-home-and-hearth-300: #c9b2a5;
  --color-home-and-hearth-400: #b3988a;
  --color-home-and-hearth-500: #9d7f6f;
  --color-home-and-hearth-600: #856b5e;
  --color-home-and-hearth-700: #6a564b;
  --color-home-and-hearth-800: #4e3e36;
  --color-home-and-hearth-900: #372b25;
  --color-home-and-hearth-950: #211814;
}

SCSS

$home-and-hearth: #e8caba;
$home-and-hearth-rgb: 232, 202, 186;
$home-and-hearth-light: mix(#fff, $home-and-hearth, 20%);
$home-and-hearth-dark: mix(#000, $home-and-hearth, 20%);

.element {
  color: $home-and-hearth;
  box-shadow: 0 0 0 2px rgba($home-and-hearth, 0.35);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

피커 조합 대비 검사기 Studio JSON API