Couleur nommée la plus proche · #B06A4C
#B06A4C
Couleur nommée la plus proche: Clay
#B06A4C (rgb(176 106 76), hsl(18 40% 49%), oklch(0.595 0.1 43.7)) est la plus proche de la couleur nommée Clay. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#B06A4C
oklch(0.595 0.1 43.7)
Conversions de couleur
- HEX
- #b06a4c
- RGB
- rgb(176 106 76)
- HSL
- hsl(18 40% 49%)
- HWB
- hwb(18 30% 31%)
- OKLCH
- oklch(0.595 0.1 43.7)
- OKLab
- oklab(0.595 0.072 0.069)
- CIE Lab
- lab(52.32 26.52 29.23)
- LCH
- lch(52.32 39.47 47.8)
- CMYK
- cmyk(0% 40% 57% 31%)
Teintes · Ombres · Tons
Teintes
- B9795D
- C1876F
- CA9680
- D2A492
- DAB3A3
- E1C2B5
- E9D1C7
- F1E0DA
- F8F0EC
Ombres
- 995B41
- 824D36
- 6C3F2C
- 563122
- 422418
- 2E180F
- 1C0D06
- 0B0402
- 010000
Tons
- AC6D52
- A76F58
- A3725D
- 9E7462
- 9A7668
- 95786D
- 907A72
- 8B7C76
- 867E7B
Harmonies de couleurs
Complémentaire +180°
- B06A4C
Clay
- 278BAA
≈ Mediterranean Sea
Analogue -30° +30°
Triadique +120° +240°
Complémentaire divisée +150° +210°
- B06A4C
Clay
- 0C9190
≈ Common Teal
- 5381B9
≈ Fisher King
Tétradique +90° +180° +270°
Contraste et accessibilité
Ag
FailSur blanc
WCAG 4.18:1 · APCA Lc 69
Ag
AASur noir
WCAG 5.01:1 · APCA Lc 33
Meilleure couleur de texte: #000000
WCAG 5.01:1 (AA) · APCA Lc 33
Contrast pairs
Extraits de code
CSS
:root {
--clay: #b06a4c;
--clay-rgb: 176 106 76;
--clay-oklch: oklch(0.595 0.1 43.7);
}
.element {
color: var(--clay);
background-color: hsl(18 40% 49%);
border-color: oklch(0.595 0.1 43.7);
}Tailwind CSS v4
@theme {
--color-clay: #b06a4c;
--color-clay-50: #ffedde;
--color-clay-100: #ffdecd;
--color-clay-200: #fac8b1;
--color-clay-300: #e3a88d;
--color-clay-400: #d08b6e;
--color-clay-500: #bd6f4d;
--color-clay-600: #9f5e42;
--color-clay-700: #804b35;
--color-clay-800: #5f3626;
--color-clay-900: #432519;
--color-clay-950: #2b130a;
}SCSS
$clay: #b06a4c;
$clay-rgb: 176, 106, 76;
$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);
}