← Back to Editor

#212227 · #FD7C90 · #F8A088 · #E5C8A6 · #ECD5AC

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#212227

Indigo · Black · Dark Stone

HEX
#212227
RGB
rgb(33, 34, 39)
HSL
hsl(230, 8%, 14%)
HSB
hsb(230, 15%, 15%)
CMYK
cmyk(15%, 13%, 0%, 85%)
Oklch
oklch(25.3% 0.010 276.7)

Traditional「Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

#FD7C90

Peach Pink · LightCoral · Coral Red

HEX
#FD7C90
RGB
rgb(253, 124, 144)
HSL
hsl(351, 97%, 74%)
HSB
hsb(351, 51%, 99%)
CMYK
cmyk(0%, 51%, 43%, 1%)
Oklch
oklch(74.0% 0.158 12.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F8A088

Peach Pink · LightSalmon · Coral Red

HEX
#F8A088
RGB
rgb(248, 160, 136)
HSL
hsl(13, 89%, 75%)
HSB
hsb(13, 45%, 97%)
CMYK
cmyk(0%, 35%, 45%, 3%)
Oklch
oklch(78.8% 0.111 36.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E5C8A6

Goose Yellow · Wheat · Peach Orange

HEX
#E5C8A6
RGB
rgb(229, 200, 166)
HSL
hsl(32, 55%, 77%)
HSB
hsb(32, 28%, 90%)
CMYK
cmyk(0%, 13%, 28%, 10%)
Oklch
oklch(84.9% 0.056 71.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#ECD5AC

Goose Yellow · Wheat · Peach Orange

HEX
#ECD5AC
RGB
rgb(236, 213, 172)
HSL
hsl(38, 63%, 80%)
HSB
hsb(38, 27%, 93%)
CMYK
cmyk(0%, 10%, 27%, 7%)
Oklch
oklch(88.2% 0.060 82.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

212227
272621

Analogous

212527
212227
232127

Triadic

212227
272122
222721

Split-Comp.

212227
272321
252721

Tetradic

212227
272125
272621
212723

Contrast Matrix WCAG 2.1 Contrast

212227
FD7C90
F8A088
E5C8A6
ECD5AC
—
6.4
AA
7.8
AAA
9.9
AAA
11.1
AAA
6.4
AA
—
1.2
Fail
1.6
Fail
1.7
Fail
7.8
AAA
1.2
Fail
—
1.3
Fail
1.4
Fail
9.9
AAA
1.6
Fail
1.3
Fail
—
1.1
Fail
11.1
AAA
1.7
Fail
1.4
Fail
1.1
Fail
—
White BG
15.9AAA
2.5Fail
2.0Fail
1.6Fail
1.4Fail
Black BG
1.3Fail
8.5AAA
10.4AAA
13.1AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

212126
C5C48B
D2D18E
D8D8AE
E2E2B6

Deuteranopia

212126
CDD68A
D7DE8F
DADCB0
E3E5B8

Tritanopia

212525
F78787
F49293
E4B5B6
EBBEBF

Achromatopsia

222222
A5A5A5
B8B8B8
CDCDCD
D7D7D7

Shades & Tints Shades & Tints

#212227

Dark
Light

#FD7C90

Dark
Light

#F8A088

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #212227;
  --color-2: #fd7c90;
  --color-3: #f8a088;
  --color-4: #e5c8a6;
  --color-5: #ecd5ac;
}

SCSS

$color-1: #212227;
$color-2: #fd7c90;
$color-3: #f8a088;
$color-4: #e5c8a6;
$color-5: #ecd5ac;

TAILWIND

colors: {
  'brand-1': '#212227',
  'brand-2': '#fd7c90',
  'brand-3': '#f8a088',
  'brand-4': '#e5c8a6',
  'brand-5': '#ecd5ac',
}

RGB Array

[33, 34, 39], [253, 124, 144], [248, 160, 136], [229, 200, 166], [236, 213, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #212227, #FD7C90, #F8A088, #E5C8A6, #ECD5AC is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #212227; --color-2: #fd7c90; --color-3: #f8a088; --color-4: #e5c8a6; --color-5: #ecd5ac. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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