Couleur nommée · #BCA486
Chestnut Butter
Chestnut Butter correspond à #BCA486 : rgb(188 164 134), hsl(33 29% 63%), oklch(0.732 0.05 73.1). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Orange mean? → · Chestnut Butter color name →
#BCA486
oklch(0.732 0.05 73.1)
Conversions de couleur
- HEX
- #bca486
- RGB
- rgb(188 164 134)
- HSL
- hsl(33 29% 63%)
- HWB
- hwb(33 53% 26%)
- OKLCH
- oklch(0.732 0.05 73.1)
- OKLab
- oklab(0.732 0.015 0.048)
- CIE Lab
- lab(68.93 5.69 19.03)
- LCH
- lch(68.93 19.86 73.4)
- CMYK
- cmyk(0% 13% 29% 26%)
Teintes · Ombres · Tons
Teintes
- C3AD92
- C9B69E
- D0BFA9
- D7C8B5
- DDD1C1
- E4DACE
- EBE3DA
- F1ECE6
- F8F6F3
Ombres
- A38E74
- 8B7962
- 736451
- 5D5040
- 473D30
- 322B21
- 1F1A13
- 0D0A06
- 020101
Tons
- B6A086
- B09D85
- AA9985
- A49684
- 9E9284
- 988E83
- 928B82
- 8C8782
- 868481
Harmonies de couleurs
Complémentaire +180°
- BCA486
Chestnut Butter
- 93ABC8
≈ Bachelor Blue
Analogue -30° +30°
- BCA486
Chestnut Butter
- C59F90
≈ Cabbage Rose
- AEAA86
≈ Green Grey Mist
Triadique +120° +240°
- BCA486
Chestnut Butter
- 84B3B1
≈ Cold Front Green
- B4A0BF
≈ Calming Silver Lavender
Complémentaire divisée +150° +210°
- BCA486
Chestnut Butter
- 86B0C0
≈ Resolute Blue
- A3A5C8
≈ Blossom Mauve
Tétradique +90° +180° +270°
- BCA486
Chestnut Butter
- 8CB39F
≈ Andean Slate
- 93ABC8
≈ Bachelor Blue
- C09CB1
≈ Lily
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.38:1 · APCA Lc 47
Ag
AAASur noir
WCAG 8.79:1 · APCA Lc 55
Meilleure couleur de texte: #000000
WCAG 8.79:1 (AAA) · APCA Lc 55
Contrast pairs
Extraits de code
CSS
:root {
--chestnut-butter: #bca486;
--chestnut-butter-rgb: 188 164 134;
--chestnut-butter-oklch: oklch(0.732 0.05 73.1);
}
.element {
color: var(--chestnut-butter);
background-color: hsl(33 29% 63%);
border-color: oklch(0.732 0.05 73.1);
}Tailwind CSS v4
@theme {
--color-chestnut-butter: #bca486;
--color-chestnut-butter-50: #fef3e6;
--color-chestnut-butter-100: #f2e6d6;
--color-chestnut-butter-200: #e1d2bd;
--color-chestnut-butter-300: #c7b49c;
--color-chestnut-butter-400: #b19a7e;
--color-chestnut-butter-500: #9b8161;
--color-chestnut-butter-600: #836e53;
--color-chestnut-butter-700: #695842;
--color-chestnut-butter-800: #4e402f;
--color-chestnut-butter-900: #362c20;
--color-chestnut-butter-950: #211910;
}SCSS
$chestnut-butter: #bca486;
$chestnut-butter-rgb: 188, 164, 134;
$chestnut-butter-light: mix(#fff, $chestnut-butter, 20%);
$chestnut-butter-dark: mix(#000, $chestnut-butter, 20%);
.element {
color: $chestnut-butter;
box-shadow: 0 0 0 2px rgba($chestnut-butter, 0.35);
}