← Back to Editor

#E1CCAF · #EC9AA3 · #BC6576 · #F76896 · #805F52

earth

A 5-color earth palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E1CCAF

Goose Yellow · Wheat · Peach Orange

HEX
#E1CCAF
RGB
rgb(225, 204, 175)
HSL
hsl(35, 45%, 78%)
HSB
hsb(35, 22%, 88%)
CMYK
cmyk(0%, 9%, 22%, 12%)
Oklch
oklch(85.5% 0.045 75.9)

TraditionalGoose Yellow」· PaintPeach Orange」· Creative Honey Glow

#EC9AA3

Peach Pink · DarkSalmon · Coral Red

HEX
#EC9AA3
RGB
rgb(236, 154, 163)
HSL
hsl(353, 68%, 76%)
HSB
hsb(353, 35%, 93%)
CMYK
cmyk(0%, 35%, 31%, 7%)
Oklch
oklch(77.0% 0.099 12.5)

TraditionalPeach Pink」· PaintCoral Red」· Creative Rose Petal

#BC6576

Crimson · LightCoral · Passion Red

HEX
#BC6576
RGB
rgb(188, 101, 118)
HSL
hsl(348, 39%, 57%)
HSB
hsb(348, 46%, 74%)
CMYK
cmyk(0%, 46%, 37%, 26%)
Oklch
oklch(61.2% 0.112 8.5)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

#F76896

Rouge · LightCoral · Rose Pink

HEX
#F76896
RGB
rgb(247, 104, 150)
HSL
hsl(341, 90%, 69%)
HSB
hsb(341, 58%, 97%)
CMYK
cmyk(0%, 58%, 39%, 3%)
Oklch
oklch(70.6% 0.180 2.8)

TraditionalRouge」· PaintRose Pink」· Creative Rose Petal

#805F52

Tangerine · DimGray · Amber Brown

HEX
#805F52
RGB
rgb(128, 95, 82)
HSL
hsl(17, 22%, 41%)
HSB
hsb(17, 36%, 50%)
CMYK
cmyk(0%, 26%, 36%, 50%)
Oklch
oklch(51.6% 0.048 42.5)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1CCAF
AEC3E0

Analogous

E0B2AE
E1CCAF
DCE0AE

Triadic

E1CCAF
AEE0CB
CBAEE0

Split-Comp.

E1CCAF
AEDCE0
B2AEE0

Tetradic

E1CCAF
AEE0B2
AEC3E0
E0AEDC

Contrast Matrix WCAG 2.1 Contrast

E1CCAF
EC9AA3
BC6576
F76896
805F52
1.4
Fail
2.6
Fail
1.8
Fail
3.7
AA Large
1.4
Fail
1.8
Fail
1.3
Fail
2.6
Fail
2.6
Fail
1.8
Fail
1.4
Fail
1.4
Fail
1.8
Fail
1.3
Fail
1.4
Fail
2.0
Fail
3.7
AA Large
2.6
Fail
1.4
Fail
2.0
Fail
White BG
1.6Fail
2.2Fail
4.0AA Large
2.8Fail
5.7AA
Black BG
13.5AAA
9.7AAA
5.3AA
7.4AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D8B6
C8C8A1
969672
B9B88B
727155

Deuteranopia

D9DBB8
CDD3A0
9BA271
C1CC88
747656

Tritanopia

E0BCBD
E89F9F
B86F6E
F08280
7E5858

Achromatopsia

CFCFCF
B4B4B4
818181
989898
676767

Shades & Tints Shades & Tints

#E1CCAF

Dark
Light

#EC9AA3

Dark
Light

#BC6576

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1ccaf;
  --color-2: #ec9aa3;
  --color-3: #bc6576;
  --color-4: #f76896;
  --color-5: #805f52;
}

SCSS

$color-1: #e1ccaf;
$color-2: #ec9aa3;
$color-3: #bc6576;
$color-4: #f76896;
$color-5: #805f52;

TAILWIND

colors: {
  'brand-1': '#e1ccaf',
  'brand-2': '#ec9aa3',
  'brand-3': '#bc6576',
  'brand-4': '#f76896',
  'brand-5': '#805f52',
}

RGB Array

[225, 204, 175], [236, 154, 163], [188, 101, 118], [247, 104, 150], [128, 95, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #E1CCAF, #EC9AA3, #BC6576, #F76896, #805F52 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e1ccaf; --color-2: #ec9aa3; --color-3: #bc6576; --color-4: #f76896; --color-5: #805f52. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This earth-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color