Named color · #E4B9A2
Warming Peach
Warming Peach is #E4B9A2: rgb(228 185 162), hsl(21 55% 76%), oklch(0.818 0.059 49.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Warming Peach color name →
#E4B9A2
oklch(0.818 0.059 49.6)
Color conversions
- HEX
- #e4b9a2
- RGB
- rgb(228 185 162)
- HSL
- hsl(21 55% 76%)
- HWB
- hwb(21 64% 11%)
- OKLCH
- oklch(0.818 0.059 49.6)
- OKLab
- oklab(0.818 0.038 0.045)
- CIE Lab
- lab(78.6 13.56 17.87)
- LCH
- lch(78.6 22.43 52.8)
- CMYK
- cmyk(0% 19% 29% 11%)
Tints · Shades · Tones
Tints
- E7C0AB
- EAC7B4
- EDCEBE
- EFD5C7
- F2DCD0
- F5E3D9
- F7EAE3
- FAF1EC
- FDF8F6
Shades
- C6A08C
- A98977
- 8D7163
- 725B4F
- 58463C
- 3F312A
- 281E19
- 120D0A
- 030201
Tones
- DAB39F
- CFAD9B
- C5A898
- BBA295
- B19C91
- A7978E
- 9D918A
- 948B87
- 8A8683
Color harmonies
Complementary +180°
- E4B9A2
Warming Peach
- 9CCBE3
≈ Legacy Blue
Analogous -30° +30°
- E4B9A2
Warming Peach
- E7B5B4
≈ Pink Dust
- D8C099
≈ Golden Gate
Triadic +120° +240°
- E4B9A2
Warming Peach
- 9ED0BD
≈ Thermal Aqua
- C2BEE8
≈ Violet Gems
Split-complementary +150° +210°
- E4B9A2
Warming Peach
- 96D0D2
≈ Big Surf
- ADC5EA
≈ Promise Keeping
Tetradic +90° +180° +270°
- E4B9A2
Warming Peach
- B0CDA9
≈ Spinach Dip
- 9CCBE3
≈ Legacy Blue
- D5B8DC
≈ Pretty Petunia
Contrast & accessibility
Ag
FailOn white
WCAG 1.78:1 · APCA Lc 33
Ag
AAAOn black
WCAG 11.76:1 · APCA Lc 70
Best text color: #000000
WCAG 11.76:1 (AAA) · APCA Lc 70
Contrast pairs
Code snippets
CSS
:root {
--warming-peach: #e4b9a2;
--warming-peach-rgb: 228 185 162;
--warming-peach-oklch: oklch(0.818 0.059 49.6);
}
.element {
color: var(--warming-peach);
background-color: hsl(21 55% 76%);
border-color: oklch(0.818 0.059 49.6);
}Tailwind CSS v4
@theme {
--color-warming-peach: #e4b9a2;
--color-warming-peach-50: #fff1e6;
--color-warming-peach-100: #f9e3d6;
--color-warming-peach-200: #eacebe;
--color-warming-peach-300: #d1b09c;
--color-warming-peach-400: #bc9580;
--color-warming-peach-500: #a77b63;
--color-warming-peach-600: #8d6854;
--color-warming-peach-700: #715343;
--color-warming-peach-800: #543c31;
--color-warming-peach-900: #3a2921;
--color-warming-peach-950: #241710;
}SCSS
$warming-peach: #e4b9a2;
$warming-peach-rgb: 228, 185, 162;
$warming-peach-light: mix(#fff, $warming-peach, 20%);
$warming-peach-dark: mix(#000, $warming-peach, 20%);
.element {
color: $warming-peach;
box-shadow: 0 0 0 2px rgba($warming-peach, 0.35);
}