Named color · #C08768
Toasted Nut
Toasted Nut is #C08768: rgb(192 135 104), hsl(21 41% 58%), oklch(0.673 0.083 49.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Toasted Nut color name →
#C08768
oklch(0.673 0.083 49.4)
Color conversions
- HEX
- #c08768
- RGB
- rgb(192 135 104)
- HSL
- hsl(21 41% 58%)
- HWB
- hwb(21 41% 25%)
- OKLCH
- oklch(0.673 0.083 49.4)
- OKLab
- oklab(0.673 0.054 0.063)
- CIE Lab
- lab(61.6 19.78 25.85)
- LCH
- lch(61.6 32.55 52.6)
- CMYK
- cmyk(0% 30% 46% 25%)
Tints · Shades · Tones
Tints
- C79377
- CD9E85
- D4AA94
- DAB6A3
- E1C2B2
- E7CEC1
- EDDAD0
- F3E6E0
- F9F3EF
Shades
- A77559
- 8E634B
- 76513E
- 5F4130
- 493124
- 342118
- 20130C
- 0E0604
- 020100
Tones
- BA876B
- B4866E
- AD8570
- A78573
- A18475
- 9A8377
- 94837A
- 8D827C
- 87817E
Color harmonies
Complementary +180°
- C08768
Toasted Nut
- 5CA0BF
≈ Dupain
Analogous -30° +30°
- C08768
Toasted Nut
- C48181
≈ Prancer
- B19059
≈ Brazilian Citrine
Triadic +120° +240°
- C08768
Toasted Nut
- 5EA78E
≈ Artemesia Green
- 948EC6
≈ Hermosa
Split-complementary +150° +210°
- C08768
Toasted Nut
- 50A6AA
≈ Blue Racer
- 7897C9
≈ Pannikin
Tetradic +90° +180° +270°
- C08768
Toasted Nut
- 7BA372
≈ Frog Hollow
- 5CA0BF
≈ Dupain
- AD86B6
≈ African Violet
Contrast & accessibility
Ag
FailOn white
WCAG 3.04:1 · APCA Lc 57
Ag
AAOn black
WCAG 6.90:1 · APCA Lc 45
Best text color: #000000
WCAG 6.90:1 (AA) · APCA Lc 45
Contrast pairs
Code snippets
CSS
:root {
--toasted-nut: #c08768;
--toasted-nut-rgb: 192 135 104;
--toasted-nut-oklch: oklch(0.673 0.083 49.4);
}
.element {
color: var(--toasted-nut);
background-color: hsl(21 41% 58%);
border-color: oklch(0.673 0.083 49.4);
}Tailwind CSS v4
@theme {
--color-toasted-nut: #c08768;
--color-toasted-nut-50: #ffefe0;
--color-toasted-nut-100: #ffe1cf;
--color-toasted-nut-200: #f2cbb5;
--color-toasted-nut-300: #dbac91;
--color-toasted-nut-400: #c79073;
--color-toasted-nut-500: #b37553;
--color-toasted-nut-600: #976447;
--color-toasted-nut-700: #794f39;
--color-toasted-nut-800: #5a3929;
--color-toasted-nut-900: #3f271b;
--color-toasted-nut-950: #28150c;
}SCSS
$toasted-nut: #c08768;
$toasted-nut-rgb: 192, 135, 104;
$toasted-nut-light: mix(#fff, $toasted-nut, 20%);
$toasted-nut-dark: mix(#000, $toasted-nut, 20%);
.element {
color: $toasted-nut;
box-shadow: 0 0 0 2px rgba($toasted-nut, 0.35);
}