← Back to Editor

#F0E4A8 · #DEAE66 · #E6683E · #876240 · #77996E

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 LibraryData Visualization

Color Details Color Details

#F0E4A8

Fresh Green · Wheat · Lemon Cream

HEX
#F0E4A8
RGB
rgb(240, 228, 168)
HSL
hsl(50, 71%, 80%)
HSB
hsb(50, 30%, 94%)
CMYK
cmyk(0%, 5%, 30%, 6%)
Oklch
oklch(91.4% 0.078 98.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#DEAE66

Ginger · SandyBrown · Warm Sun

HEX
#DEAE66
RGB
rgb(222, 174, 102)
HSL
hsl(36, 65%, 64%)
HSB
hsb(36, 54%, 87%)
CMYK
cmyk(0%, 22%, 54%, 13%)
Oklch
oklch(78.0% 0.106 76.3)

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

#E6683E

Tangerine · Tomato · Warm Sun

HEX
#E6683E
RGB
rgb(230, 104, 62)
HSL
hsl(15, 77%, 57%)
HSB
hsb(15, 73%, 90%)
CMYK
cmyk(0%, 55%, 73%, 10%)
Oklch
oklch(66.4% 0.167 38.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#876240

Tangerine · Sienna · Amber Brown

HEX
#876240
RGB
rgb(135, 98, 64)
HSL
hsl(29, 36%, 39%)
HSB
hsb(29, 53%, 53%)
CMYK
cmyk(0%, 27%, 53%, 47%)
Oklch
oklch(52.6% 0.068 63.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#77996E

Celadon · Gray · Olive Green

HEX
#77996E
RGB
rgb(119, 153, 110)
HSL
hsl(107, 17%, 52%)
HSB
hsb(107, 28%, 60%)
CMYK
cmyk(22%, 0%, 28%, 40%)
Oklch
oklch(64.6% 0.073 139.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E4A8
A8B4F0

Analogous

F0C0A8
F0E4A8
D8F0A8

Triadic

F0E4A8
A8F0E4
E4A8F0

Split-Comp.

F0E4A8
A8D8F0
C0A8F0

Tetradic

F0E4A8
A8F0C0
A8B4F0
F0A8D8

Contrast Matrix WCAG 2.1 Contrast

F0E4A8
DEAE66
E6683E
876240
77996E
—
1.6
Fail
2.6
Fail
4.2
AA Large
2.5
Fail
1.6
Fail
—
1.6
Fail
2.7
Fail
1.6
Fail
2.6
Fail
1.6
Fail
—
1.7
Fail
1.0
Fail
4.2
AA Large
2.7
Fail
1.7
Fail
—
1.7
Fail
2.5
Fail
1.6
Fail
1.0
Fail
1.7
Fail
—
White BG
1.3Fail
2.0Fail
3.3AA Large
5.5AA
3.2AA Large
Black BG
16.4AAA
10.4AAA
6.4AA
3.9AA Large
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBB7
C9C977
AFAE48
777748
868678

Deuteranopia

ECECBA
CCD07C
B7C04B
797C4A
84817B

Tritanopia

EFC2C5
DC8588
E05052
854F50
798182

Achromatopsia

E1E1E1
B4B4B4
898989
696969
8A8A8A

Shades & Tints Shades & Tints

#F0E4A8

Dark
Light

#DEAE66

Dark
Light

#E6683E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e4a8;
  --color-2: #deae66;
  --color-3: #e6683e;
  --color-4: #876240;
  --color-5: #77996e;
}

SCSS

$color-1: #f0e4a8;
$color-2: #deae66;
$color-3: #e6683e;
$color-4: #876240;
$color-5: #77996e;

TAILWIND

colors: {
  'brand-1': '#f0e4a8',
  'brand-2': '#deae66',
  'brand-3': '#e6683e',
  'brand-4': '#876240',
  'brand-5': '#77996e',
}

RGB Array

[240, 228, 168], [222, 174, 102], [230, 104, 62], [135, 98, 64], [119, 153, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #F0E4A8, #DEAE66, #E6683E, #876240, #77996E 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: #f0e4a8; --color-2: #deae66; --color-3: #e6683e; --color-4: #876240; --color-5: #77996e. 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