Couleur nommée la plus proche · #BC6B4E
#BC6B4E
Couleur nommée la plus proche: Clay
#BC6B4E (rgb(188 107 78), hsl(16 45% 52%), oklch(0.613 0.112 40.3)) est la plus proche de la couleur nommée Clay. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#BC6B4E
oklch(0.613 0.112 40.3)
Conversions de couleur
- HEX
- #bc6b4e
- RGB
- rgb(188 107 78)
- HSL
- hsl(16 45% 52%)
- HWB
- hwb(16 31% 26%)
- OKLCH
- oklch(0.613 0.112 40.3)
- OKLab
- oklab(0.613 0.085 0.072)
- CIE Lab
- lab(54.23 31.05 30.89)
- LCH
- lch(54.23 43.8 44.9)
- CMYK
- cmyk(0% 43% 59% 26%)
Teintes · Ombres · Tons
Teintes
- C47A5F
- CB8871
- D39782
- DAA693
- E0B4A5
- E7C3B6
- EDD2C8
- F3E1DA
- F9F0ED
Ombres
- A35C43
- 8B4E38
- 733F2D
- 5D3223
- 472519
- 32180F
- 1F0D07
- 0D0402
- 020000
Tons
- B76E54
- B17059
- AB735F
- A67564
- A07769
- 9A796E
- 947B72
- 8D7D77
- 877E7C
Harmonies de couleurs
Complémentaire +180°
- BC6B4E
Clay
- 0093B2
≈ Munsell Blue
Analogue -30° +30°
- BC6B4E
Clay
- BC6674
≈ Slate Rose
- AE772D
≈ Butterbeer
Triadique +120° +240°
Complémentaire divisée +150° +210°
Tétradique +90° +180° +270°
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.92:1 · APCA Lc 66
Ag
AASur noir
WCAG 5.35:1 · APCA Lc 35
Meilleure couleur de texte: #000000
WCAG 5.35:1 (AA) · APCA Lc 35
Contrast pairs
Extraits de code
CSS
:root {
--clay: #bc6b4e;
--clay-rgb: 188 107 78;
--clay-oklch: oklch(0.613 0.112 40.3);
}
.element {
color: var(--clay);
background-color: hsl(16 45% 52%);
border-color: oklch(0.613 0.112 40.3);
}Tailwind CSS v4
@theme {
--color-clay: #bc6b4e;
--color-clay-50: #ffecdc;
--color-clay-100: #ffddcb;
--color-clay-200: #ffc5af;
--color-clay-300: #e9a58a;
--color-clay-400: #d7876b;
--color-clay-500: #c36a4a;
--color-clay-600: #a55a3f;
--color-clay-700: #854832;
--color-clay-800: #633324;
--color-clay-900: #452318;
--color-clay-950: #2d1209;
}SCSS
$clay: #bc6b4e;
$clay-rgb: 188, 107, 78;
$clay-light: mix(#fff, $clay, 20%);
$clay-dark: mix(#000, $clay, 20%);
.element {
color: $clay;
box-shadow: 0 0 0 2px rgba($clay, 0.35);
}