← Back to Editor

#818296 · #F4D0AC · #B5A595 · #D0A680 · #5D5E73

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

#818296

Azure · LightSlateGray · Warm Gray

HEX
#818296
RGB
rgb(129, 130, 150)
HSL
hsl(237, 9%, 55%)
HSB
hsb(237, 14%, 59%)
CMYK
cmyk(14%, 13%, 0%, 41%)
Oklch
oklch(61.3% 0.030 283.2)

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

#F4D0AC

Goose Yellow · Wheat · Peach Orange

HEX
#F4D0AC
RGB
rgb(244, 208, 172)
HSL
hsl(30, 77%, 82%)
HSB
hsb(30, 30%, 96%)
CMYK
cmyk(0%, 15%, 30%, 4%)
Oklch
oklch(87.9% 0.063 66.9)

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

#B5A595

Ginger · DarkGray · Warm Sun

HEX
#B5A595
RGB
rgb(181, 165, 149)
HSL
hsl(30, 18%, 65%)
HSB
hsb(30, 18%, 71%)
CMYK
cmyk(0%, 9%, 18%, 29%)
Oklch
oklch(73.1% 0.029 67.3)

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

#D0A680

Apricot · Tan · Warm Sun

HEX
#D0A680
RGB
rgb(208, 166, 128)
HSL
hsl(29, 46%, 66%)
HSB
hsb(29, 38%, 82%)
CMYK
cmyk(0%, 20%, 38%, 18%)
Oklch
oklch(75.4% 0.071 63.5)

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

#5D5E73

Indigo · DimGray · Navy Blue

HEX
#5D5E73
RGB
rgb(93, 94, 115)
HSL
hsl(237, 11%, 41%)
HSB
hsb(237, 19%, 45%)
CMYK
cmyk(19%, 18%, 0%, 55%)
Oklch
oklch(48.9% 0.033 282.9)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

818296
979682

Analogous

828D97
818296
8B8297

Triadic

818296
978283
839782

Split-Comp.

818296
978B82
8D9782

Tetradic

818296
97828D
979682
82978B

Contrast Matrix WCAG 2.1 Contrast

818296
F4D0AC
B5A595
D0A680
5D5E73
—
2.6
Fail
1.6
Fail
1.7
Fail
1.7
Fail
2.6
Fail
—
1.6
Fail
1.5
Fail
4.4
AA Large
1.6
Fail
1.6
Fail
—
1.1
Fail
2.6
Fail
1.7
Fail
1.5
Fail
1.1
Fail
—
2.9
Fail
1.7
Fail
4.4
AA Large
2.6
Fail
2.9
Fail
—
White BG
3.8AA Large
1.5Fail
2.4Fail
2.2Fail
6.3AA
Black BG
5.6AA
14.5AAA
8.8AAA
9.4AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

818191
E4E4B5
AEAE99
BEBD89
5D5D6E

Deuteranopia

818190
E7E9B7
AFB09A
C0C38B
5D5D6D

Tritanopia

818D8D
F2BCBD
B49C9D
CE9092
5D6A69

Achromatopsia

848484
D7D7D7
A8A8A8
AEAEAE
606060

Shades & Tints Shades & Tints

#818296

Dark
Light

#F4D0AC

Dark
Light

#B5A595

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #818296;
  --color-2: #f4d0ac;
  --color-3: #b5a595;
  --color-4: #d0a680;
  --color-5: #5d5e73;
}

SCSS

$color-1: #818296;
$color-2: #f4d0ac;
$color-3: #b5a595;
$color-4: #d0a680;
$color-5: #5d5e73;

TAILWIND

colors: {
  'brand-1': '#818296',
  'brand-2': '#f4d0ac',
  'brand-3': '#b5a595',
  'brand-4': '#d0a680',
  'brand-5': '#5d5e73',
}

RGB Array

[129, 130, 150], [244, 208, 172], [181, 165, 149], [208, 166, 128], [93, 94, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #818296, #F4D0AC, #B5A595, #D0A680, #5D5E73 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: #818296; --color-2: #f4d0ac; --color-3: #b5a595; --color-4: #d0a680; --color-5: #5d5e73. 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