Couleur nommée · #A8715A
Hazelnut
Hazelnut correspond à #A8715A : rgb(168 113 90), hsl(18 31% 51%), oklch(0.6 0.078 43.5). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Red mean? → · Hazelnut color name →
#A8715A
oklch(0.6 0.078 43.5)
Conversions de couleur
- HEX
- #a8715a
- RGB
- rgb(168 113 90)
- HSL
- hsl(18 31% 51%)
- HWB
- hwb(18 35% 34%)
- OKLCH
- oklch(0.6 0.078 43.5)
- OKLab
- oklab(0.6 0.057 0.054)
- CIE Lab
- lab(53.14 20.39 22.07)
- LCH
- lch(53.14 30.05 47.3)
- CMYK
- cmyk(0% 33% 46% 34%)
Teintes · Ombres · Tons
Teintes
- B17F6A
- BA8C79
- C39A89
- CCA89A
- D5B6AA
- DDC5BB
- E6D3CB
- EEE2DC
- F7F0EE
Ombres
- 92614D
- 7C5241
- 674335
- 523529
- 3F271E
- 2C1A13
- 1A0E09
- 0A0403
- 010100
Tons
- A4735E
- A17462
- 9D7666
- 99786A
- 95796E
- 917B71
- 8D7C75
- 897D79
- 847F7C
Harmonies de couleurs
Complémentaire +180°
- A8715A
Hazelnut
- 468BA3
≈ Cossack Dancer
Analogue -30° +30°
- A8715A
Hazelnut
- AA6D73
≈ Pomegranate Tea
- 9D794A
≈ Treasured
Triadique +120° +240°
- A8715A
Hazelnut
- 518F73
≈ Green Weed
- 7A7AAE
≈ Ontario Violet
Complémentaire divisée +150° +210°
- A8715A
Hazelnut
- 3F8F8D
≈ Blue Chill
- 5F83AE
≈ Shrinking Violet
Tétradique +90° +180° +270°
Contraste et accessibilité
Ag
FailSur blanc
WCAG 4.05:1 · APCA Lc 68
Ag
AASur noir
WCAG 5.17:1 · APCA Lc 34
Meilleure couleur de texte: #000000
WCAG 5.17:1 (AA) · APCA Lc 34
Contrast pairs
Extraits de code
CSS
:root {
--hazelnut: #a8715a;
--hazelnut-rgb: 168 113 90;
--hazelnut-oklch: oklch(0.6 0.078 43.5);
}
.element {
color: var(--hazelnut);
background-color: hsl(18 31% 51%);
border-color: oklch(0.6 0.078 43.5);
}Tailwind CSS v4
@theme {
--color-hazelnut: #a8715a;
--color-hazelnut-50: #ffefe3;
--color-hazelnut-100: #ffe0d3;
--color-hazelnut-200: #f2cbb9;
--color-hazelnut-300: #daac97;
--color-hazelnut-400: #c69079;
--color-hazelnut-500: #b2755b;
--color-hazelnut-600: #96634e;
--color-hazelnut-700: #794f3e;
--color-hazelnut-800: #5a392d;
--color-hazelnut-900: #3f271e;
--color-hazelnut-950: #28150e;
}SCSS
$hazelnut: #a8715a;
$hazelnut-rgb: 168, 113, 90;
$hazelnut-light: mix(#fff, $hazelnut, 20%);
$hazelnut-dark: mix(#000, $hazelnut, 20%);
.element {
color: $hazelnut;
box-shadow: 0 0 0 2px rgba($hazelnut, 0.35);
}