← Back to Editor

#CFAC61 · #E2C68B · #C09D77 · #D4C2AE · #8A847E

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

#CFAC61

Ginger · SandyBrown · Sunflower

HEX
#CFAC61
RGB
rgb(207, 172, 97)
HSL
hsl(41, 53%, 60%)
HSB
hsb(41, 53%, 81%)
CMYK
cmyk(0%, 17%, 53%, 19%)
Oklch
oklch(76.0% 0.103 84.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E2C68B

Goose Yellow · BurlyWood · Sunflower

HEX
#E2C68B
RGB
rgb(226, 198, 139)
HSL
hsl(41, 60%, 72%)
HSB
hsb(41, 38%, 89%)
CMYK
cmyk(0%, 12%, 38%, 11%)
Oklch
oklch(83.7% 0.082 85.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#C09D77

Ginger · Tan · Warm Sun

HEX
#C09D77
RGB
rgb(192, 157, 119)
HSL
hsl(31, 37%, 61%)
HSB
hsb(31, 38%, 75%)
CMYK
cmyk(0%, 18%, 38%, 25%)
Oklch
oklch(71.9% 0.066 68.8)

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

#D4C2AE

Goose Yellow · Silver · Peach Orange

HEX
#D4C2AE
RGB
rgb(212, 194, 174)
HSL
hsl(32, 31%, 76%)
HSB
hsb(32, 18%, 83%)
CMYK
cmyk(0%, 8%, 18%, 17%)
Oklch
oklch(82.4% 0.034 70.3)

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

#8A847E

Ash · Gray · Warm Gray

HEX
#8A847E
RGB
rgb(138, 132, 126)
HSL
hsl(30, 5%, 52%)
HSB
hsb(30, 9%, 54%)
CMYK
cmyk(0%, 4%, 9%, 46%)
Oklch
oklch(61.7% 0.011 67.6)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFAC61
6385CF

Analogous

CF7763
CFAC61
BBCF63

Triadic

CFAC61
63CFAD
AD63CF

Split-Comp.

CFAC61
63BBCF
7763CF

Tetradic

CFAC61
63CF77
6385CF
CF63BB

Contrast Matrix WCAG 2.1 Contrast

CFAC61
E2C68B
C09D77
D4C2AE
8A847E
—
1.3
Fail
1.2
Fail
1.2
Fail
1.7
Fail
1.3
Fail
—
1.5
Fail
1.0
Fail
2.2
Fail
1.2
Fail
1.5
Fail
—
1.5
Fail
1.5
Fail
1.2
Fail
1.0
Fail
1.5
Fail
—
2.1
Fail
1.7
Fail
2.2
Fail
1.5
Fail
2.1
Fail
—
White BG
2.2Fail
1.7Fail
2.5Fail
1.7Fail
3.7AA Large
Black BG
9.7AAA
12.7AAA
8.3AAA
12.1AAA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C073
D6D699
B1B180
CCCCB3
87877F

Deuteranopia

C2C478
D8DA9D
B3B582
CDCFB4
888880

Tritanopia

CD8185
E1A5A7
BE8789
D3B7B8
8A8181

Achromatopsia

AEAEAE
C8C8C8
A3A3A3
C5C5C5
858585

Shades & Tints Shades & Tints

#CFAC61

Dark
Light

#E2C68B

Dark
Light

#C09D77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfac61;
  --color-2: #e2c68b;
  --color-3: #c09d77;
  --color-4: #d4c2ae;
  --color-5: #8a847e;
}

SCSS

$color-1: #cfac61;
$color-2: #e2c68b;
$color-3: #c09d77;
$color-4: #d4c2ae;
$color-5: #8a847e;

TAILWIND

colors: {
  'brand-1': '#cfac61',
  'brand-2': '#e2c68b',
  'brand-3': '#c09d77',
  'brand-4': '#d4c2ae',
  'brand-5': '#8a847e',
}

RGB Array

[207, 172, 97], [226, 198, 139], [192, 157, 119], [212, 194, 174], [138, 132, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #CFAC61, #E2C68B, #C09D77, #D4C2AE, #8A847E 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: #cfac61; --color-2: #e2c68b; --color-3: #c09d77; --color-4: #d4c2ae; --color-5: #8a847e. 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