Named color · #A48B74
Natural
Natural is #A48B74: rgb(164 139 116), hsl(29 21% 55%), oklch(0.653 0.045 64.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Natural color name →
#A48B74
oklch(0.653 0.045 64.5)
Color conversions
- HEX
- #a48b74
- RGB
- rgb(164 139 116)
- HSL
- hsl(29 21% 55%)
- HWB
- hwb(29 45% 36%)
- OKLCH
- oklch(0.653 0.045 64.5)
- OKLab
- oklab(0.653 0.019 0.04)
- CIE Lab
- lab(59.73 7.13 16.04)
- LCH
- lch(59.73 17.56 66)
- CMYK
- cmyk(0% 15% 29% 36%)
Tints · Shades · Tones
Tints
- AD9681
- B6A18F
- BFAD9C
- C8B8AA
- D1C4B8
- DACFC6
- E3DBD4
- ECE7E2
- F6F3F0
Shades
- 8E7864
- 796654
- 645445
- 504337
- 3D3229
- 2B231B
- 1A140F
- 0A0705
- 010101
Tones
- A08A75
- 9D8977
- 998878
- 968779
- 92867A
- 8E857C
- 8B837D
- 87827E
- 84817F
Color harmonies
Complementary +180°
- A48B74
Natural
- 7A94AA
≈ Nordland Blue
Analogous -30° +30°
- A48B74
Natural
- AA877E
≈ Bedford Brown
- 999071
≈ Gurkha
Triadic +120° +240°
- A48B74
Natural
- 729A93
≈ Pale Verdigris
- 968AA7
≈ Smoky Mauve
Split-complementary +150° +210°
- A48B74
Natural
- 7198A1
≈ Cameo Blue
- 888FAC
≈ Papilio Argeotus
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.21:1 · APCA Lc 59
Ag
AAOn black
WCAG 6.52:1 · APCA Lc 42
Best text color: #000000
WCAG 6.52:1 (AA) · APCA Lc 42
Contrast pairs
Code snippets
CSS
:root {
--natural: #a48b74;
--natural-rgb: 164 139 116;
--natural-oklch: oklch(0.653 0.045 64.5);
}
.element {
color: var(--natural);
background-color: hsl(29 21% 55%);
border-color: oklch(0.653 0.045 64.5);
}Tailwind CSS v4
@theme {
--color-natural: #a48b74;
--color-natural-50: #fef3e8;
--color-natural-100: #f3e5d9;
--color-natural-200: #e2d1c1;
--color-natural-300: #c8b3a0;
--color-natural-400: #b29983;
--color-natural-500: #9c8067;
--color-natural-600: #836d58;
--color-natural-700: #695746;
--color-natural-800: #4e3f32;
--color-natural-900: #362b22;
--color-natural-950: #211911;
}SCSS
$natural: #a48b74;
$natural-rgb: 164, 139, 116;
$natural-light: mix(#fff, $natural, 20%);
$natural-dark: mix(#000, $natural, 20%);
.element {
color: $natural;
box-shadow: 0 0 0 2px rgba($natural, 0.35);
}