← Back to Editor

#84AA83 · #684C72 · #561E5B · #000029 · #E5F8C1

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#84AA83

Celadon · DarkSeaGreen · Olive Green

HEX
#84AA83
RGB
rgb(132, 170, 131)
HSL
hsl(118, 19%, 59%)
HSB
hsb(118, 23%, 67%)
CMYK
cmyk(22%, 0%, 23%, 33%)
Oklch
oklch(69.9% 0.070 144.1)

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

#684C72

Dark Plum · DimGray · Eggplant

HEX
#684C72
RGB
rgb(104, 76, 114)
HSL
hsl(284, 20%, 37%)
HSB
hsb(284, 33%, 45%)
CMYK
cmyk(9%, 33%, 0%, 55%)
Oklch
oklch(46.1% 0.069 317.0)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#561E5B

Dark Plum · DarkSlateBlue · Eggplant

HEX
#561E5B
RGB
rgb(86, 30, 91)
HSL
hsl(295, 50%, 24%)
HSB
hsb(295, 67%, 36%)
CMYK
cmyk(5%, 67%, 0%, 64%)
Oklch
oklch(34.7% 0.117 324.4)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#000029

Deep Indigo · Black · Deep Sea Blue

HEX
#000029
RGB
rgb(0, 0, 41)
HSL
hsl(240, 100%, 8%)
HSB
hsb(240, 100%, 16%)
CMYK
cmyk(100%, 100%, 0%, 84%)
Oklch
oklch(12.7% 0.088 264.1)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#E5F8C1

Willow Green · Beige · Mint Green

HEX
#E5F8C1
RGB
rgb(229, 248, 193)
HSL
hsl(81, 80%, 86%)
HSB
hsb(81, 22%, 97%)
CMYK
cmyk(8%, 0%, 22%, 3%)
Oklch
oklch(95.1% 0.074 123.3)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

84AA83
A983AA

Analogous

98AA83
84AA83
83AA95

Triadic

84AA83
8384AA
AA8384

Split-Comp.

84AA83
9583AA
AA8398

Tetradic

84AA83
8398AA
A983AA
AA9583

Contrast Matrix WCAG 2.1 Contrast

84AA83
684C72
561E5B
000029
E5F8C1
—
2.8
Fail
4.7
AA
7.8
AAA
2.3
Fail
2.8
Fail
—
1.7
Fail
2.8
Fail
6.5
AA
4.7
AA
1.7
Fail
—
1.7
Fail
10.7
AAA
7.8
AAA
2.8
Fail
1.7
Fail
—
18.0
AAA
2.3
Fail
6.5
AA
10.7
AAA
18.0
AAA
—
White BG
2.6Fail
7.3AAA
12.1AAA
20.3AAA
1.1Fail
Black BG
8.1AAA
2.9Fail
1.7Fail
1.0Fail
18.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

94958C
5C5C69
3E3D4C
00001F
EDEDCE

Deuteranopia

928F8F
5E6067
414549
00001D
ECEBD2

Tritanopia

869496
676260
53413E
001716
E6D9DB

Achromatopsia

9A9A9A
595959
363636
050505
ECECEC

Shades & Tints Shades & Tints

#84AA83

Dark
Light

#684C72

Dark
Light

#561E5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #84aa83;
  --color-2: #684c72;
  --color-3: #561e5b;
  --color-4: #000029;
  --color-5: #e5f8c1;
}

SCSS

$color-1: #84aa83;
$color-2: #684c72;
$color-3: #561e5b;
$color-4: #000029;
$color-5: #e5f8c1;

TAILWIND

colors: {
  'brand-1': '#84aa83',
  'brand-2': '#684c72',
  'brand-3': '#561e5b',
  'brand-4': '#000029',
  'brand-5': '#e5f8c1',
}

RGB Array

[132, 170, 131], [104, 76, 114], [86, 30, 91], [0, 0, 41], [229, 248, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #84AA83, #684C72, #561E5B, #000029, #E5F8C1 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: #84aa83; --color-2: #684c72; --color-3: #561e5b; --color-4: #000029; --color-5: #e5f8c1. 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