最接近的命名颜色 · #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);
}