← Back to Editor

#F5F1E6 · #D9C68B · #C9B383 · #807F7A · #D96557

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F5F1E6

Goose Yellow · Linen · Lemon Cream

HEX
#F5F1E6
RGB
rgb(245, 241, 230)
HSL
hsl(44, 43%, 93%)
HSB
hsb(44, 6%, 96%)
CMYK
cmyk(0%, 2%, 6%, 4%)
Oklch
oklch(95.8% 0.015 90.2)

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

#D9C68B

Ginger · BurlyWood · Sunflower

HEX
#D9C68B
RGB
rgb(217, 198, 139)
HSL
hsl(45, 51%, 70%)
HSB
hsb(45, 36%, 85%)
CMYK
cmyk(0%, 9%, 36%, 15%)
Oklch
oklch(82.9% 0.080 92.3)

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

#C9B383

Ginger · Tan · Sunflower

HEX
#C9B383
RGB
rgb(201, 179, 131)
HSL
hsl(41, 39%, 65%)
HSB
hsb(41, 35%, 79%)
CMYK
cmyk(0%, 11%, 35%, 21%)
Oklch
oklch(77.4% 0.069 86.1)

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

#807F7A

Ink Gray · Gray · Warm Gray

HEX
#807F7A
RGB
rgb(128, 127, 122)
HSL
hsl(50, 2%, 49%)
HSB
hsb(50, 5%, 50%)
CMYK
cmyk(0%, 1%, 5%, 50%)
Oklch
oklch(59.6% 0.008 97.4)

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

#D96557

Vermilion · Tomato · Passion Red

HEX
#D96557
RGB
rgb(217, 101, 87)
HSL
hsl(6, 63%, 60%)
HSB
hsb(6, 60%, 85%)
CMYK
cmyk(0%, 53%, 60%, 15%)
Oklch
oklch(64.5% 0.149 28.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F1E6
E5EAF5

Analogous

F5E9E5
F5F1E6
F1F5E5

Triadic

F5F1E6
E5F5F1
F1E5F5

Split-Comp.

F5F1E6
E5F1F5
E9E5F5

Tetradic

F5F1E6
E5F5E9
E5EAF5
F5E5F1

Contrast Matrix WCAG 2.1 Contrast

F5F1E6
D9C68B
C9B383
807F7A
D96557
—
1.5
Fail
1.8
Fail
3.6
AA Large
3.1
AA Large
1.5
Fail
—
1.2
Fail
2.4
Fail
2.1
Fail
1.8
Fail
1.2
Fail
—
2.0
Fail
1.7
Fail
3.6
AA Large
2.4
Fail
2.0
Fail
—
1.1
Fail
3.1
AA Large
2.1
Fail
1.7
Fail
1.1
Fail
—
White BG
1.1Fail
1.7Fail
2.0Fail
4.0AA Large
3.5AA Large
Black BG
18.6AAA
12.4AAA
10.3AAA
5.2AA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3E9
D1D199
BFBF8F
80807B
A7A65A

Deuteranopia

F4F4E9
D2D39D
C1C291
80807C
AEB65B

Tritanopia

F5EBEB
D8A5A7
C8989A
807C7C
D35D5E

Achromatopsia

F1F1F1
C5C5C5
B4B4B4
7F7F7F
868686

Shades & Tints Shades & Tints

#F5F1E6

Dark
Light

#D9C68B

Dark
Light

#C9B383

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f1e6;
  --color-2: #d9c68b;
  --color-3: #c9b383;
  --color-4: #807f7a;
  --color-5: #d96557;
}

SCSS

$color-1: #f5f1e6;
$color-2: #d9c68b;
$color-3: #c9b383;
$color-4: #807f7a;
$color-5: #d96557;

TAILWIND

colors: {
  'brand-1': '#f5f1e6',
  'brand-2': '#d9c68b',
  'brand-3': '#c9b383',
  'brand-4': '#807f7a',
  'brand-5': '#d96557',
}

RGB Array

[245, 241, 230], [217, 198, 139], [201, 179, 131], [128, 127, 122], [217, 101, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #F5F1E6, #D9C68B, #C9B383, #807F7A, #D96557 is ideal for: health products, baby brands, fresh-style blogs, 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: #f5f1e6; --color-2: #d9c68b; --color-3: #c9b383; --color-4: #807f7a; --color-5: #d96557. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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