가장 가까운 이름 색상 · #CC8354
#CC8354
가장 가까운 이름 색상: Copperhead
#CC8354(rgb(204 131 84), hsl(23 54% 56%), oklch(0.676 0.11 52.6))와 가장 가까운 이름 색상은 Copperhead입니다. 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
#CC8354
oklch(0.676 0.11 52.6)
색상 변환
- HEX
- #cc8354
- RGB
- rgb(204 131 84)
- HSL
- hsl(23 54% 56%)
- HWB
- hwb(23 33% 20%)
- OKLCH
- oklch(0.676 0.11 52.6)
- OKLab
- oklab(0.676 0.067 0.087)
- CIE Lab
- lab(61.86 25.54 37.38)
- LCH
- lch(61.86 45.27 55.7)
- CMYK
- cmyk(0% 36% 59% 20%)
틴트 · 셰이드 · 톤
틴트
- D28F66
- D89C77
- DDA888
- E3B499
- E8C1A9
- EDCDBA
- F2DACB
- F6E6DC
- FBF2EE
셰이드
- B17148
- 97603C
- 7E4F31
- 653F26
- 4E2F1B
- 372011
- 221208
- 0F0602
- 020100
톤
- C5835A
- BD835F
- B68364
- AE8368
- A7836D
- 9F8271
- 988275
- 908179
- 88817C
색 조화
보색 +180°
- CC8354
Copperhead
- 45A2CF
≈ Blue Tango
유사색 -30° +30°
- CC8354
Copperhead
- D27B77
≈ Hearts Afire
- B8903F
≈ Fervent Brass
삼각 배색 +120° +240°
- CC8354
Copperhead
- 3DAD90
≈ Walk in the Woods
- 998AD5
≈ Adora
분열 보색 +150° +210°
- CC8354
Copperhead
- 1EABB5
≈ Placid Sea
- 7296DB
≈ Little Boy Blue
사각 배색 +90° +180° +270°
- CC8354
Copperhead
- 6EA869
≈ Happy Cricket
- 45A2CF
≈ Blue Tango
- B780BF
≈ Lavender Sweater
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.02:1 · APCA Lc 57
Ag
AA검은색 위
WCAG 6.94:1 · APCA Lc 45
가장 좋은 글자색: #000000
WCAG 6.94:1 (AA) · APCA Lc 45
Contrast pairs
코드 스니펫
CSS
:root {
--copperhead: #cc8354;
--copperhead-rgb: 204 131 84;
--copperhead-oklch: oklch(0.676 0.11 52.6);
}
.element {
color: var(--copperhead);
background-color: hsl(23 54% 56%);
border-color: oklch(0.676 0.11 52.6);
}Tailwind CSS v4
@theme {
--color-copperhead: #cc8354;
--color-copperhead-50: #ffeed8;
--color-copperhead-100: #ffdfc6;
--color-copperhead-200: #fac8a8;
--color-copperhead-300: #e4a981;
--color-copperhead-400: #d28c5f;
--color-copperhead-500: #be6f3a;
--color-copperhead-600: #a15f32;
--color-copperhead-700: #814c28;
--color-copperhead-800: #60361c;
--color-copperhead-900: #432512;
--color-copperhead-950: #2b1305;
}SCSS
$copperhead: #cc8354;
$copperhead-rgb: 204, 131, 84;
$copperhead-light: mix(#fff, $copperhead, 20%);
$copperhead-dark: mix(#000, $copperhead, 20%);
.element {
color: $copperhead;
box-shadow: 0 0 0 2px rgba($copperhead, 0.35);
}