← Back to Editor

#221C2A · #685575 · #BF7A96 · #DF758B · #F08D87

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#221C2A

Deep Indigo · Black · Dark Purple

HEX
#221C2A
RGB
rgb(34, 28, 42)
HSL
hsl(266, 20%, 14%)
HSB
hsb(266, 33%, 16%)
CMYK
cmyk(19%, 33%, 0%, 84%)
Oklch
oklch(24.0% 0.028 304.0)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#685575

Dark Plum · DimGray · Eggplant

HEX
#685575
RGB
rgb(104, 85, 117)
HSL
hsl(276, 16%, 40%)
HSB
hsb(276, 27%, 46%)
CMYK
cmyk(11%, 27%, 0%, 54%)
Oklch
oklch(48.1% 0.055 311.2)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#BF7A96

Rouge · LightCoral · Rose Pink

HEX
#BF7A96
RGB
rgb(191, 122, 150)
HSL
hsl(336, 35%, 61%)
HSB
hsb(336, 36%, 75%)
CMYK
cmyk(0%, 36%, 21%, 25%)
Oklch
oklch(66.0% 0.093 354.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#DF758B

Peach Pink · LightCoral · Coral Red

HEX
#DF758B
RGB
rgb(223, 117, 139)
HSL
hsl(348, 62%, 67%)
HSB
hsb(348, 48%, 87%)
CMYK
cmyk(0%, 48%, 38%, 13%)
Oklch
oklch(68.8% 0.133 8.0)

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

#F08D87

Peach Pink · LightCoral · Coral Red

HEX
#F08D87
RGB
rgb(240, 141, 135)
HSL
hsl(3, 78%, 74%)
HSB
hsb(3, 44%, 94%)
CMYK
cmyk(0%, 41%, 44%, 6%)
Oklch
oklch(74.7% 0.121 24.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

221C2A
252B1D

Analogous

1D1E2B
221C2A
2A1D2B

Triadic

221C2A
2B231D
1D2B23

Split-Comp.

221C2A
2B2A1D
1E2B1D

Tetradic

221C2A
2B1D1E
252B1D
1D2B2A

Contrast Matrix WCAG 2.1 Contrast

221C2A
685575
BF7A96
DF758B
F08D87
—
2.5
Fail
5.1
AA
5.6
AA
7.0
AA
2.5
Fail
—
2.0
Fail
2.2
Fail
2.8
Fail
5.1
AA
2.0
Fail
—
1.1
Fail
1.4
Fail
5.6
AA
2.2
Fail
1.1
Fail
—
1.3
Fail
7.0
AA
2.8
Fail
1.4
Fail
1.3
Fail
—
White BG
16.6AAA
6.7AA
3.3AA Large
3.0Fail
2.4Fail
Black BG
1.3Fail
3.1AA Large
6.4AA
7.1AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F27
60606D
A1A18F
B1B086
C5C488

Deuteranopia

202026
61626B
A5AA8E
B7BF84
CBD289

Tritanopia

222423
676766
BC8A89
DA8181
EB8A8A

Achromatopsia

1F1F1F
5E5E5E
929292
979797
AAAAAA

Shades & Tints Shades & Tints

#221C2A

Dark
Light

#685575

Dark
Light

#BF7A96

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #221c2a;
  --color-2: #685575;
  --color-3: #bf7a96;
  --color-4: #df758b;
  --color-5: #f08d87;
}

SCSS

$color-1: #221c2a;
$color-2: #685575;
$color-3: #bf7a96;
$color-4: #df758b;
$color-5: #f08d87;

TAILWIND

colors: {
  'brand-1': '#221c2a',
  'brand-2': '#685575',
  'brand-3': '#bf7a96',
  'brand-4': '#df758b',
  'brand-5': '#f08d87',
}

RGB Array

[34, 28, 42], [104, 85, 117], [191, 122, 150], [223, 117, 139], [240, 141, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #221C2A, #685575, #BF7A96, #DF758B, #F08D87 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #221c2a; --color-2: #685575; --color-3: #bf7a96; --color-4: #df758b; --color-5: #f08d87. 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 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