En yakın adlandırılmış renk · #CC8354
#CC8354
En yakın adlandırılmış renk: Copperhead
#CC8354 (rgb(204 131 84), hsl(23 54% 56%), oklch(0.676 0.11 52.6)) en çok Copperhead adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#CC8354
oklch(0.676 0.11 52.6)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D28F66
- D89C77
- DDA888
- E3B499
- E8C1A9
- EDCDBA
- F2DACB
- F6E6DC
- FBF2EE
Koyu tonlar
- B17148
- 97603C
- 7E4F31
- 653F26
- 4E2F1B
- 372011
- 221208
- 0F0602
- 020100
Gri tonlar
- C5835A
- BD835F
- B68364
- AE8368
- A7836D
- 9F8271
- 988275
- 908179
- 88817C
Renk uyumları
Tamamlayıcı +180°
- CC8354
Copperhead
- 45A2CF
≈ Blue Tango
Analog -30° +30°
- CC8354
Copperhead
- D27B77
≈ Hearts Afire
- B8903F
≈ Fervent Brass
Üçlü +120° +240°
- CC8354
Copperhead
- 3DAD90
≈ Walk in the Woods
- 998AD5
≈ Adora
Bölünmüş tamamlayıcı +150° +210°
- CC8354
Copperhead
- 1EABB5
≈ Placid Sea
- 7296DB
≈ Little Boy Blue
Dörtlü +90° +180° +270°
- CC8354
Copperhead
- 6EA869
≈ Happy Cricket
- 45A2CF
≈ Blue Tango
- B780BF
≈ Lavender Sweater
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.02:1 · APCA Lc 57
Ag
AASiyah üzerinde
WCAG 6.94:1 · APCA Lc 45
En iyi metin rengi: #000000
WCAG 6.94:1 (AA) · APCA Lc 45
Contrast pairs
Kod parçacıkları
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);
}