Nearest named color · #7F3E00
#7F3E00
Nearest named color: Hazelnut Chocolate
#7F3E00 (rgb(127 62 0), hsl(29 100% 25%), oklch(0.439 0.11 54.3)) is closest to the named color Hazelnut Chocolate. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#7F3E00
oklch(0.439 0.11 54.3)
Color conversions
- HEX
- #7f3e00
- RGB
- rgb(127 62 0)
- HSL
- hsl(29 100% 25%)
- HWB
- hwb(29 0% 50%)
- OKLCH
- oklch(0.439 0.11 54.3)
- OKLab
- oklab(0.439 0.064 0.089)
- CIE Lab
- lab(34.35 26.29 44.82)
- LCH
- lch(34.35 51.96 59.6)
- CMYK
- cmyk(0% 51% 100% 50%)
Tints · Shades · Tones
Tints
- 8C5125
- 9A633E
- A77656
- B4896D
- C19C84
- CDAF9C
- DAC3B4
- E6D7CD
- F3EBE6
Shades
- 6E3500
- 5D2B00
- 4C2300
- 3C1A00
- 2D1200
- 1F0A00
- 110400
- 060100
- 010000
Tones
- 804518
- 814C27
- 815334
- 825A3F
- 82604B
- 826755
- 826D60
- 82746B
- 817A75
Color harmonies
Complementary +180°
- 7F3E00
Hazelnut Chocolate
- 005A7D
≈ Commandes
Analogous -30° +30°
- 7F3E00
Hazelnut Chocolate
- 843533
≈ Tall Poppy
- 694D00
≈ Antique Bronze
Triadic +120° +240°
- 7F3E00
Hazelnut Chocolate
- 00614F
≈ Sci-Fi Takeout
- 574488
≈ Harvest Night
Split-complementary +150° +210°
- 7F3E00
Hazelnut Chocolate
- 005E65
≈ Enamelled Jewel
- 334F8E
≈ Nightly Activities
Tetradic +90° +180° +270°
- 7F3E00
Hazelnut Chocolate
- 246127
≈ Bright Nori
- 005A7D
≈ Commandes
- 6F3A74
≈ Eminence
Contrast & accessibility
Ag
AAAOn white
WCAG 8.10:1 · APCA Lc 88
Ag
FailOn black
WCAG 2.59:1 · APCA Lc 15
Best text color: #FFFFFF
WCAG 8.10:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--hazelnut-chocolate: #7f3e00;
--hazelnut-chocolate-rgb: 127 62 0;
--hazelnut-chocolate-oklch: oklch(0.439 0.11 54.3);
}
.element {
color: var(--hazelnut-chocolate);
background-color: hsl(29 100% 25%);
border-color: oklch(0.439 0.11 54.3);
}Tailwind CSS v4
@theme {
--color-hazelnut-chocolate: #7f3e00;
--color-hazelnut-chocolate-50: #ffeed8;
--color-hazelnut-chocolate-100: #ffdfc5;
--color-hazelnut-chocolate-200: #fac9a7;
--color-hazelnut-chocolate-300: #e3a980;
--color-hazelnut-chocolate-400: #d18c5e;
--color-hazelnut-chocolate-500: #bd7038;
--color-hazelnut-chocolate-600: #a05f31;
--color-hazelnut-chocolate-700: #804c27;
--color-hazelnut-chocolate-800: #60361b;
--color-hazelnut-chocolate-900: #432512;
--color-hazelnut-chocolate-950: #2b1404;
}SCSS
$hazelnut-chocolate: #7f3e00;
$hazelnut-chocolate-rgb: 127, 62, 0;
$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);
}