Nearest named color · #854100
#854100
Nearest named color: Hazelnut Chocolate
#854100 (rgb(133 65 0), hsl(29 100% 26%), oklch(0.454 0.114 54.1)) is closest to the named color Hazelnut Chocolate. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#854100
oklch(0.454 0.114 54.1)
Color conversions
- HEX
- #854100
- RGB
- rgb(133 65 0)
- HSL
- hsl(29 100% 26%)
- HWB
- hwb(29 0% 48%)
- OKLCH
- oklch(0.454 0.114 54.1)
- OKLab
- oklab(0.454 0.067 0.092)
- CIE Lab
- lab(36 27.31 46.31)
- LCH
- lch(36 53.76 59.5)
- CMYK
- cmyk(0% 51% 100% 48%)
Tints · Shades · Tones
Tints
- 925426
- 9F663F
- AB7857
- B88B6E
- C49E85
- D0B19D
- DCC4B5
- E8D7CD
- F3EBE6
Shades
- 733700
- 612E00
- 502500
- 401C00
- 301300
- 210B00
- 130500
- 060100
- 010000
Tones
- 854819
- 864F28
- 865535
- 865C40
- 85624B
- 856856
- 846E61
- 83746B
- 827A76
Color harmonies
Complementary +180°
- 854100
Hazelnut Chocolate
- 005E83
≈ Royal Blood
Analogous -30° +30°
- 854100
Hazelnut Chocolate
- 8B3836
≈ Red Bay
- 6F5100
≈ Field Drab
Triadic +120° +240°
- 854100
Hazelnut Chocolate
- 006653
≈ Piney Lake
- 5B478E
≈ Gigas
Split-complementary +150° +210°
- 854100
Hazelnut Chocolate
- 00626A
≈ Turkish Aqua
- 355395
≈ Chinese Blue
Tetradic +90° +180° +270°
- 854100
Hazelnut Chocolate
- 276629
≈ Swampland
- 005E83
≈ Royal Blood
- 743D79
≈ Eminence
Contrast & accessibility
Ag
AAAOn white
WCAG 7.62:1 · APCA Lc 86
Ag
FailOn black
WCAG 2.75:1 · APCA Lc 16
Best text color: #FFFFFF
WCAG 7.62:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--hazelnut-chocolate: #854100;
--hazelnut-chocolate-rgb: 133 65 0;
--hazelnut-chocolate-oklch: oklch(0.454 0.114 54.1);
}
.element {
color: var(--hazelnut-chocolate);
background-color: hsl(29 100% 26%);
border-color: oklch(0.454 0.114 54.1);
}Tailwind CSS v4
@theme {
--color-hazelnut-chocolate: #854100;
--color-hazelnut-chocolate-50: #ffeed7;
--color-hazelnut-chocolate-100: #ffdfc4;
--color-hazelnut-chocolate-200: #fbc8a6;
--color-hazelnut-chocolate-300: #e5a87e;
--color-hazelnut-chocolate-400: #d38b5b;
--color-hazelnut-chocolate-500: #bf6f34;
--color-hazelnut-chocolate-600: #a15e2e;
--color-hazelnut-chocolate-700: #824b24;
--color-hazelnut-chocolate-800: #61361a;
--color-hazelnut-chocolate-900: #442511;
--color-hazelnut-chocolate-950: #2c1304;
}SCSS
$hazelnut-chocolate: #854100;
$hazelnut-chocolate-rgb: 133, 65, 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);
}