Named color · #FAD0A1
Maple Beige
Maple Beige is #FAD0A1: rgb(250 208 161), hsl(32 90% 81%), oklch(0.883 0.077 69.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Maple Beige color name →
#FAD0A1
oklch(0.883 0.077 69.7)
Color conversions
- HEX
- #fad0a1
- RGB
- rgb(250 208 161)
- HSL
- hsl(32 90% 81%)
- HWB
- hwb(32 63% 2%)
- OKLCH
- oklch(0.883 0.077 69.7)
- OKLab
- oklab(0.883 0.027 0.072)
- CIE Lab
- lab(86.33 10.59 29.22)
- LCH
- lch(86.33 31.08 70.1)
- CMYK
- cmyk(0% 17% 36% 2%)
Tints · Shades · Tones
Tints
- FBD5AB
- FBDAB4
- FCDEBE
- FDE3C7
- FDE8D0
- FEECDA
- FEF1E3
- FEF6EC
- FFFAF6
Shades
- D9B58B
- BA9A76
- 9B8062
- 7D674E
- 614F3C
- 46392A
- 2D2319
- 151009
- 030201
Tones
- EDC89E
- E1C09B
- D4B898
- C8AF95
- BCA791
- AF9F8E
- A3988B
- 979087
- 8C8884
Color harmonies
Complementary +180°
- FAD0A1
Maple Beige
- BBDCFF
≈ Broad Daylight
Analogous -30° +30°
- FAD0A1
Maple Beige
- FFCBB9
≈ Piggy Bank
- E4DA9F
≈ Bamboo Mat
Triadic +120° +240°
- FAD0A1
Maple Beige
- 9BE9E3
≈ Sea Glass Teal
- E8CBFF
≈ Lens Flare Pink
Split-complementary +150° +210°
- FAD0A1
Maple Beige
- 9EE5FC
≈ Winter Wizard
- D0D5FF
≈ Pale Phthalo Blue
Tetradic +90° +180° +270°
- FAD0A1
Maple Beige
- ACE9C7
≈ Tropical
- BBDCFF
≈ Broad Daylight
- FCC5E9
≈ Sugarwinkle
Contrast & accessibility
Ag
FailOn white
WCAG 1.43:1 · APCA Lc 21
Ag
AAAOn black
WCAG 14.60:1 · APCA Lc 82
Best text color: #000000
WCAG 14.60:1 (AAA) · APCA Lc 82
Contrast pairs
Code snippets
CSS
:root {
--maple-beige: #fad0a1;
--maple-beige-rgb: 250 208 161;
--maple-beige-oklch: oklch(0.883 0.077 69.7);
}
.element {
color: var(--maple-beige);
background-color: hsl(32 90% 81%);
border-color: oklch(0.883 0.077 69.7);
}Tailwind CSS v4
@theme {
--color-maple-beige: #fad0a1;
--color-maple-beige-50: #fff2de;
--color-maple-beige-100: #f9e4cc;
--color-maple-beige-200: #ead0b1;
--color-maple-beige-300: #d1b28c;
--color-maple-beige-400: #bc976c;
--color-maple-beige-500: #a77d4b;
--color-maple-beige-600: #8d6a40;
--color-maple-beige-700: #715533;
--color-maple-beige-800: #543d24;
--color-maple-beige-900: #3b2a18;
--color-maple-beige-950: #251809;
}SCSS
$maple-beige: #fad0a1;
$maple-beige-rgb: 250, 208, 161;
$maple-beige-light: mix(#fff, $maple-beige, 20%);
$maple-beige-dark: mix(#000, $maple-beige, 20%);
.element {
color: $maple-beige;
box-shadow: 0 0 0 2px rgba($maple-beige, 0.35);
}