Named color · #A38E6F
Maple Brown Sugar
Maple Brown Sugar is #A38E6F: rgb(163 142 111), hsl(36 22% 54%), oklch(0.658 0.05 77.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Maple Brown Sugar color name →
#A38E6F
oklch(0.658 0.05 77.3)
Color conversions
- HEX
- #a38e6f
- RGB
- rgb(163 142 111)
- HSL
- hsl(36 22% 54%)
- HWB
- hwb(36 44% 36%)
- OKLCH
- oklch(0.658 0.05 77.3)
- OKLab
- oklab(0.658 0.011 0.049)
- CIE Lab
- lab(60.34 4.63 19.63)
- LCH
- lch(60.34 20.17 76.7)
- CMYK
- cmyk(0% 13% 32% 36%)
Tints · Shades · Tones
Tints
- AC997D
- B5A48B
- BEAF99
- C7BAA7
- D0C5B5
- DAD1C4
- E3DCD2
- ECE8E1
- F6F3F0
Shades
- 8D7B60
- 786851
- 635642
- 4F4434
- 3C3427
- 2A241A
- 19150E
- 0A0704
- 010101
Tones
- 9F8D71
- 9C8B73
- 988A75
- 958976
- 918778
- 8E867A
- 8A847B
- 87837D
- 83817F
Color harmonies
Complementary +180°
- A38E6F
Maple Brown Sugar
- 7E93B1
≈ Accolade
Analogous -30° +30°
- A38E6F
Maple Brown Sugar
- AC8977
≈ Vagabond
- 949470
≈ Inness Sage
Triadic +120° +240°
- A38E6F
Maple Brown Sugar
- 6D9B9C
≈ Palmetto
- 9E88A6
≈ Amethyst Paint
Split-complementary +150° +210°
- A38E6F
Maple Brown Sugar
- 7198AA
≈ Smoky Blue
- 8F8DAF
≈ Persian Violet
Tetradic +90° +180° +270°
- A38E6F
Maple Brown Sugar
- 749C8B
≈ Regal View
- 7E93B1
≈ Accolade
- A98597
≈ Mohair Pink
Contrast & accessibility
Ag
FailOn white
WCAG 3.15:1 · APCA Lc 59
Ag
AAOn black
WCAG 6.65:1 · APCA Lc 43
Best text color: #000000
WCAG 6.65:1 (AA) · APCA Lc 43
Contrast pairs
Code snippets
CSS
:root {
--maple-brown-sugar: #a38e6f;
--maple-brown-sugar-rgb: 163 142 111;
--maple-brown-sugar-oklch: oklch(0.658 0.05 77.3);
}
.element {
color: var(--maple-brown-sugar);
background-color: hsl(36 22% 54%);
border-color: oklch(0.658 0.05 77.3);
}Tailwind CSS v4
@theme {
--color-maple-brown-sugar: #a38e6f;
--color-maple-brown-sugar-50: #fdf4e5;
--color-maple-brown-sugar-100: #f1e6d6;
--color-maple-brown-sugar-200: #e0d2bd;
--color-maple-brown-sugar-300: #c5b59b;
--color-maple-brown-sugar-400: #af9b7d;
--color-maple-brown-sugar-500: #998260;
--color-maple-brown-sugar-600: #816e52;
--color-maple-brown-sugar-700: #685841;
--color-maple-brown-sugar-800: #4d402f;
--color-maple-brown-sugar-900: #352c20;
--color-maple-brown-sugar-950: #20190f;
}SCSS
$maple-brown-sugar: #a38e6f;
$maple-brown-sugar-rgb: 163, 142, 111;
$maple-brown-sugar-light: mix(#fff, $maple-brown-sugar, 20%);
$maple-brown-sugar-dark: mix(#000, $maple-brown-sugar, 20%);
.element {
color: $maple-brown-sugar;
box-shadow: 0 0 0 2px rgba($maple-brown-sugar, 0.35);
}