이름 색상 · #A76372

Heather Rose

Heather Rose은(는) #A76372: rgb(167 99 114), hsl(347 28% 52%), oklch(0.58 0.09 6). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Red mean? → · Heather Rose color name →

#A76372

oklch(0.58 0.09 6)

색상 변환

HEX: #a76372
RGB: rgb(167 99 114)
HSL: hsl(347 28% 52%)
HWB: hwb(347 39% 35%)
OKLCH: oklch(0.58 0.09 6)
OKLab: oklab(0.58 0.089 0.009)
CIE Lab: lab(50.17 29.57 3.99)
LCH: lch(50.17 29.84 7.7)
CMYK: cmyk(0% 41% 32% 35%)

틴트 · 셰이드 · 톤

틴트

B1727F
BA818C
C3909A
CCA0A8
D5AFB6
DEBFC4
E6CFD3
EFDFE1
F7EFF0

셰이드

915562
7B4753
663A44
522E36
3E2128
2C161B
1A0B0E
0A0304
010001

톤

A46673
A06975
9D6D76
997078
957279
91757A
8D787C
897B7D
857D7F

색 조화

보색 +180°

A76372
Heather Rose
298B82
≈ Copper Turquoise

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 4.49:1 · APCA Lc 71

Fail

검은색 위

WCAG 4.67:1 · APCA Lc 31

가장 좋은 글자색: #000000

WCAG 4.67:1 (AA) · APCA Lc 31

Contrast pairs

코드 스니펫

CSS

:root {
  --heather-rose: #a76372;
  --heather-rose-rgb: 167 99 114;
  --heather-rose-oklch: oklch(0.58 0.09 6);
}

.element {
  color: var(--heather-rose);
  background-color: hsl(347 28% 52%);
  border-color: oklch(0.58 0.09 6);
}

Tailwind CSS v4

@theme {
  --color-heather-rose: #a76372;
  --color-heather-rose-50: #ffebf0;
  --color-heather-rose-100: #ffdce2;
  --color-heather-rose-200: #f7c5cd;
  --color-heather-rose-300: #e1a5af;
  --color-heather-rose-400: #cc8896;
  --color-heather-rose-500: #b86c7d;
  --color-heather-rose-600: #9c5c6a;
  --color-heather-rose-700: #7d4955;
  --color-heather-rose-800: #5c353f;
  --color-heather-rose-900: #41242b;
  --color-heather-rose-950: #291318;
}

SCSS

$heather-rose: #a76372;
$heather-rose-rgb: 167, 99, 114;
$heather-rose-light: mix(#fff, $heather-rose, 20%);
$heather-rose-dark: mix(#000, $heather-rose, 20%);

.element {
  color: $heather-rose;
  box-shadow: 0 0 0 2px rgba($heather-rose, 0.35);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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