← Back to Editor

#D1BF6D · #D19A6D · #D17A6D · #E68070 · #E67074

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

#D1BF6D

Ginger · BurlyWood · Sunflower

HEX
#D1BF6D
RGB
rgb(209, 191, 109)
HSL
hsl(49, 52%, 62%)
HSB
hsb(49, 48%, 82%)
CMYK
cmyk(0%, 9%, 48%, 18%)
Oklch
oklch(80.2% 0.105 97.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D19A6D

Apricot · DarkSalmon · Warm Sun

HEX
#D19A6D
RGB
rgb(209, 154, 109)
HSL
hsl(27, 52%, 62%)
HSB
hsb(27, 48%, 82%)
CMYK
cmyk(0%, 26%, 48%, 18%)
Oklch
oklch(72.9% 0.089 60.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D17A6D

Peach Pink · LightCoral · Coral Red

HEX
#D17A6D
RGB
rgb(209, 122, 109)
HSL
hsl(8, 52%, 62%)
HSB
hsb(8, 48%, 82%)
CMYK
cmyk(0%, 42%, 48%, 18%)
Oklch
oklch(67.1% 0.111 29.4)

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

#E68070

Peach Pink · LightCoral · Coral Red

HEX
#E68070
RGB
rgb(230, 128, 112)
HSL
hsl(8, 70%, 67%)
HSB
hsb(8, 51%, 90%)
CMYK
cmyk(0%, 44%, 51%, 10%)
Oklch
oklch(70.8% 0.129 30.0)

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

#E67074

Peach Pink · LightCoral · Coral Red

HEX
#E67074
RGB
rgb(230, 112, 116)
HSL
hsl(358, 70%, 67%)
HSB
hsb(358, 51%, 90%)
CMYK
cmyk(0%, 51%, 50%, 10%)
Oklch
oklch(68.5% 0.147 19.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1BF6D
6C7ED0

Analogous

D08C6C
D1BF6D
B1D06C

Triadic

D1BF6D
6CD0BE
BE6CD0

Split-Comp.

D1BF6D
6CB1D0
8C6CD0

Tetradic

D1BF6D
6CD08C
6C7ED0
D06CB1

Contrast Matrix WCAG 2.1 Contrast

D1BF6D
D19A6D
D17A6D
E68070
E67074
—
1.3
Fail
1.7
Fail
1.5
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.1
Fail
1.2
Fail
1.7
Fail
1.3
Fail
—
1.1
Fail
1.0
Fail
1.5
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.6
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
White BG
1.8Fail
2.5Fail
3.1AA Large
2.7Fail
3.0AA Large
Black BG
11.4AAA
8.6AAA
6.7AA
7.7AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C981
B9B978
ABAB70
BAB974
B3B273

Deuteranopia

CACC86
BCC07B
B0B771
C0C775
BAC373

Tritanopia

D09194
CE8082
CD7373
E17778
E07272

Achromatopsia

BBBBBB
A5A5A5
939393
9D9D9D
949494

Shades & Tints Shades & Tints

#D1BF6D

Dark
Light

#D19A6D

Dark
Light

#D17A6D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1bf6d;
  --color-2: #d19a6d;
  --color-3: #d17a6d;
  --color-4: #e68070;
  --color-5: #e67074;
}

SCSS

$color-1: #d1bf6d;
$color-2: #d19a6d;
$color-3: #d17a6d;
$color-4: #e68070;
$color-5: #e67074;

TAILWIND

colors: {
  'brand-1': '#d1bf6d',
  'brand-2': '#d19a6d',
  'brand-3': '#d17a6d',
  'brand-4': '#e68070',
  'brand-5': '#e67074',
}

RGB Array

[209, 191, 109], [209, 154, 109], [209, 122, 109], [230, 128, 112], [230, 112, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #D1BF6D, #D19A6D, #D17A6D, #E68070, #E67074 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: #d1bf6d; --color-2: #d19a6d; --color-3: #d17a6d; --color-4: #e68070; --color-5: #e67074. 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