Named color · #E3C8B1
Mesquite Powder
Mesquite Powder is #E3C8B1: rgb(227 200 177), hsl(28 47% 79%), oklch(0.849 0.044 62.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Mesquite Powder color name →
#E3C8B1
oklch(0.849 0.044 62.6)
Color conversions
- HEX
- #e3c8b1
- RGB
- rgb(227 200 177)
- HSL
- hsl(28 47% 79%)
- HWB
- hwb(28 69% 11%)
- OKLCH
- oklch(0.849 0.044 62.6)
- OKLab
- oklab(0.849 0.02 0.039)
- CIE Lab
- lab(82.47 7.2 15.22)
- LCH
- lch(82.47 16.84 64.7)
- CMYK
- cmyk(0% 12% 22% 11%)
Tints · Shades · Tones
Tints
- E6CDB9
- E9D3C0
- ECD8C8
- EEDED0
- F1E3D8
- F4E9DF
- F7EEE7
- FAF4EF
- FCF9F7
Shades
- C5AE99
- A89483
- 8C7B6C
- 716357
- 574C42
- 3F362F
- 27211C
- 120F0C
- 030201
Tones
- D9C1AC
- CFB9A7
- C4B2A2
- BAAB9D
- B0A398
- A79C94
- 9D958F
- 938E8A
- 898785
Color harmonies
Complementary +180°
- E3C8B1
Mesquite Powder
- B6D2E8
≈ Modern Blue
Analogous -30° +30°
- E3C8B1
Mesquite Powder
- E9C4BC
≈ Congo
- D7CDAE
≈ Soft Suede
Triadic +120° +240°
- E3C8B1
Mesquite Powder
- AFD7D0
≈ Scandal
- D3C7E6
≈ Foggy Love
Split-complementary +150° +210°
- E3C8B1
Mesquite Powder
- AED6DF
≈ Needed Escape
- C4CCEB
≈ Ace
Tetradic +90° +180° +270°
- E3C8B1
Mesquite Powder
- B9D6C0
≈ Reclining Green
- B6D2E8
≈ Modern Blue
- E0C4DA
≈ Favourite Lady
Contrast & accessibility
Ag
FailOn white
WCAG 1.59:1 · APCA Lc 27
Ag
AAAOn black
WCAG 13.16:1 · APCA Lc 76
Best text color: #000000
WCAG 13.16:1 (AAA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--mesquite-powder: #e3c8b1;
--mesquite-powder-rgb: 227 200 177;
--mesquite-powder-oklch: oklch(0.849 0.044 62.6);
}
.element {
color: var(--mesquite-powder);
background-color: hsl(28 47% 79%);
border-color: oklch(0.849 0.044 62.6);
}Tailwind CSS v4
@theme {
--color-mesquite-powder: #e3c8b1;
--color-mesquite-powder-50: #fef3e9;
--color-mesquite-powder-100: #f3e5d9;
--color-mesquite-powder-200: #e2d1c1;
--color-mesquite-powder-300: #c8b3a1;
--color-mesquite-powder-400: #b29984;
--color-mesquite-powder-500: #9c8069;
--color-mesquite-powder-600: #846d59;
--color-mesquite-powder-700: #695747;
--color-mesquite-powder-800: #4e3f33;
--color-mesquite-powder-900: #362b23;
--color-mesquite-powder-950: #211912;
}SCSS
$mesquite-powder: #e3c8b1;
$mesquite-powder-rgb: 227, 200, 177;
$mesquite-powder-light: mix(#fff, $mesquite-powder, 20%);
$mesquite-powder-dark: mix(#000, $mesquite-powder, 20%);
.element {
color: $mesquite-powder;
box-shadow: 0 0 0 2px rgba($mesquite-powder, 0.35);
}