Couleur nommée la plus proche · #713E09
#713E09
Couleur nommée la plus proche: Hazelnut Chocolate
#713E09 (rgb(113 62 9), hsl(31 85% 24%), oklch(0.418 0.094 59.3)) est la plus proche de la couleur nommée Hazelnut Chocolate. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#713E09
oklch(0.418 0.094 59.3)
Conversions de couleur
- HEX
- #713e09
- RGB
- rgb(113 62 9)
- HSL
- hsl(31 85% 24%)
- HWB
- hwb(31 4% 56%)
- OKLCH
- oklch(0.418 0.094 59.3)
- OKLab
- oklab(0.418 0.048 0.08)
- CIE Lab
- lab(32.13 20.13 38.75)
- LCH
- lch(32.13 43.67 62.5)
- CMYK
- cmyk(0% 45% 92% 56%)
Teintes · Ombres · Tons
Teintes
- 7F5027
- 8D623F
- 9C7556
- AA886D
- B89B85
- C6AE9C
- D4C2B4
- E2D6CD
- F1EAE6
Ombres
- 613507
- 522B05
- 432303
- 351A02
- 271201
- 1A0A01
- 0E0400
- 040100
- 010000
Tons
- 73451C
- 754C29
- 775235
- 795940
- 7A604B
- 7C6656
- 7D6D60
- 7E736B
- 7F7A75
Harmonies de couleurs
Complémentaire +180°
- 713E09
Hazelnut Chocolate
- 03527A
≈ Silk Jewel
Analogue -30° +30°
- 713E09
Hazelnut Chocolate
- 77362D
≈ Auburn Lights
- 5F4A00
≈ Mud Brown
Triadique +120° +240°
- 713E09
Hazelnut Chocolate
- 005A4E
≈ Forest Shadows
- 544078
≈ Raw Amethyst
Complémentaire divisée +150° +210°
- 713E09
Hazelnut Chocolate
- 005762
≈ Abyssal Waters
- 38497F
≈ Expressionism
Tétradique +90° +180° +270°
- 713E09
Hazelnut Chocolate
- 1F5A2F
≈ Crusoe
- 03527A
≈ Silk Jewel
- 683865
≈ Berry Light
Contraste et accessibilité
Ag
AAASur blanc
WCAG 8.76:1 · APCA Lc 90
Ag
FailSur noir
WCAG 2.39:1 · APCA Lc 13
Meilleure couleur de texte: #FFFFFF
WCAG 8.76:1 (AAA) · APCA Lc 90
Contrast pairs
Extraits de code
CSS
:root {
--hazelnut-chocolate: #713e09;
--hazelnut-chocolate-rgb: 113 62 9;
--hazelnut-chocolate-oklch: oklch(0.418 0.094 59.3);
}
.element {
color: var(--hazelnut-chocolate);
background-color: hsl(31 85% 24%);
border-color: oklch(0.418 0.094 59.3);
}Tailwind CSS v4
@theme {
--color-hazelnut-chocolate: #713e09;
--color-hazelnut-chocolate-50: #fff0db;
--color-hazelnut-chocolate-100: #ffe2c9;
--color-hazelnut-chocolate-200: #f2ccac;
--color-hazelnut-chocolate-300: #dbad86;
--color-hazelnut-chocolate-400: #c89165;
--color-hazelnut-chocolate-500: #b47642;
--color-hazelnut-chocolate-600: #986439;
--color-hazelnut-chocolate-700: #7a502d;
--color-hazelnut-chocolate-800: #5b3a20;
--color-hazelnut-chocolate-900: #3f2815;
--color-hazelnut-chocolate-950: #281507;
}SCSS
$hazelnut-chocolate: #713e09;
$hazelnut-chocolate-rgb: 113, 62, 9;
$hazelnut-chocolate-light: mix(#fff, $hazelnut-chocolate, 20%);
$hazelnut-chocolate-dark: mix(#000, $hazelnut-chocolate, 20%);
.element {
color: $hazelnut-chocolate;
box-shadow: 0 0 0 2px rgba($hazelnut-chocolate, 0.35);
}