Named color · #D28A47
Hazelnut Coffee
Hazelnut Coffee is #D28A47: rgb(210 138 71), hsl(29 61% 55%), oklch(0.694 0.121 61.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Hazelnut Coffee color name →
#D28A47
oklch(0.694 0.121 61.5)
Color conversions
- HEX
- #d28a47
- RGB
- rgb(210 138 71)
- HSL
- hsl(29 61% 55%)
- HWB
- hwb(29 28% 18%)
- OKLCH
- oklch(0.694 0.121 61.5)
- OKLab
- oklab(0.694 0.058 0.106)
- CIE Lab
- lab(64.11 23.79 46.77)
- LCH
- lch(64.11 52.47 63)
- CMYK
- cmyk(0% 34% 66% 18%)
Tints · Shades · Tones
Tints
- D7965C
- DCA26F
- E1AD81
- E6B993
- EBC5A5
- EFD0B7
- F3DCC9
- F7E8DB
- FBF3ED
Shades
- B6773D
- 9B6532
- 815328
- 68421F
- 503216
- 39220D
- 241406
- 100702
- 020100
Tones
- CA894F
- C28956
- BA885D
- B28763
- AA8669
- A1856E
- 998473
- 918377
- 89817C
Color harmonies
Complementary +180°
- D28A47
Hazelnut Coffee
- 4FA5E1
≈ High Blue
Analogous -30° +30°
- D28A47
Hazelnut Coffee
- DD7F6D
≈ Wet Pottery Clay
- B89936
≈ Gold Taffeta
Triadic +120° +240°
- D28A47
Hazelnut Coffee
- 1AB5A2
≈ Aare River
- AA8ADB
≈ Middy’s Purple
Split-complementary +150° +210°
- D28A47
Hazelnut Coffee
- 00B0C7
≈ Havasupai Falls
- 8297E8
≈ Portage
Tetradic +90° +180° +270°
- D28A47
Hazelnut Coffee
- 5EB276
≈ Pale Green
- 4FA5E1
≈ High Blue
- C880BE
≈ Peruvian Lily
Contrast & accessibility
Ag
FailOn white
WCAG 2.81:1 · APCA Lc 54
Ag
AAAOn black
WCAG 7.46:1 · APCA Lc 48
Best text color: #000000
WCAG 7.46:1 (AAA) · APCA Lc 48
Contrast pairs
Code snippets
CSS
:root {
--hazelnut-coffee: #d28a47;
--hazelnut-coffee-rgb: 210 138 71;
--hazelnut-coffee-oklch: oklch(0.694 0.121 61.5);
}
.element {
color: var(--hazelnut-coffee);
background-color: hsl(29 61% 55%);
border-color: oklch(0.694 0.121 61.5);
}Tailwind CSS v4
@theme {
--color-hazelnut-coffee: #d28a47;
--color-hazelnut-coffee-50: #ffefd2;
--color-hazelnut-coffee-100: #ffe0bf;
--color-hazelnut-coffee-200: #faca9f;
--color-hazelnut-coffee-300: #e3aa75;
--color-hazelnut-coffee-400: #d18d4f;
--color-hazelnut-coffee-500: #be711d;
--color-hazelnut-coffee-600: #a1601c;
--color-hazelnut-coffee-700: #814c17;
--color-hazelnut-coffee-800: #60370f;
--color-hazelnut-coffee-900: #442509;
--color-hazelnut-coffee-950: #2b1400;
}SCSS
$hazelnut-coffee: #d28a47;
$hazelnut-coffee-rgb: 210, 138, 71;
$hazelnut-coffee-light: mix(#fff, $hazelnut-coffee, 20%);
$hazelnut-coffee-dark: mix(#000, $hazelnut-coffee, 20%);
.element {
color: $hazelnut-coffee;
box-shadow: 0 0 0 2px rgba($hazelnut-coffee, 0.35);
}