← Back to Editor

#888C6B · #A4CA88 · #E8EFC7 · #C1D263 · #AEB48C

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#888C6B

Autumn Sage · Gray · Honey Gold

HEX
#888C6B
RGB
rgb(136, 140, 107)
HSL
hsl(67, 13%, 48%)
HSB
hsb(67, 24%, 55%)
CMYK
cmyk(3%, 0%, 24%, 45%)
Oklch
oklch(62.8% 0.048 113.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#A4CA88

Celadon · DarkSeaGreen · Apple Green

HEX
#A4CA88
RGB
rgb(164, 202, 136)
HSL
hsl(95, 38%, 66%)
HSB
hsb(95, 33%, 79%)
CMYK
cmyk(19%, 0%, 33%, 21%)
Oklch
oklch(79.5% 0.098 132.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#E8EFC7

Willow Green · Beige · Mint Green

HEX
#E8EFC7
RGB
rgb(232, 239, 199)
HSL
hsl(71, 56%, 86%)
HSB
hsb(71, 17%, 94%)
CMYK
cmyk(3%, 0%, 17%, 6%)
Oklch
oklch(93.7% 0.053 115.5)

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

#C1D263

Fresh Green · BurlyWood · Sunflower

HEX
#C1D263
RGB
rgb(193, 210, 99)
HSL
hsl(69, 55%, 61%)
HSB
hsb(69, 53%, 82%)
CMYK
cmyk(8%, 0%, 53%, 18%)
Oklch
oklch(82.8% 0.138 116.7)

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

#AEB48C

Fresh Green · DarkGray · Sunflower

HEX
#AEB48C
RGB
rgb(174, 180, 140)
HSL
hsl(69, 21%, 63%)
HSB
hsb(69, 22%, 71%)
CMYK
cmyk(3%, 0%, 22%, 29%)
Oklch
oklch(75.5% 0.055 114.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

888C6B
6E6A8A

Analogous

8A7E6A
888C6B
778A6A

Triadic

888C6B
6A878A
8A6A87

Split-Comp.

888C6B
6A778A
7E6A8A

Tetradic

888C6B
6A8A7E
6E6A8A
8A6A77

Contrast Matrix WCAG 2.1 Contrast

888C6B
A4CA88
E8EFC7
C1D263
AEB48C
—
1.9
Fail
2.9
Fail
2.1
Fail
1.6
Fail
1.9
Fail
—
1.5
Fail
1.1
Fail
1.2
Fail
2.9
Fail
1.5
Fail
—
1.4
Fail
1.8
Fail
2.1
Fail
1.1
Fail
1.4
Fail
—
1.3
Fail
1.6
Fail
1.2
Fail
1.8
Fail
1.3
Fail
—
White BG
3.5AA Large
1.8Fail
1.2Fail
1.7Fail
2.2Fail
Black BG
6.0AA
11.4AAA
17.6AAA
12.7AAA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A73
B4B598
EBEBD1
C8C97E
B1B196

Deuteranopia

8A8975
B2AF9C
EBEAD3
C7C684
B0B098

Tritanopia

88797B
A6A5A7
E8D8DA
C29398
AE9D9F

Achromatopsia

878787
B7B7B7
E8E8E8
C0C0C0
AEAEAE

Shades & Tints Shades & Tints

#888C6B

Dark
Light

#A4CA88

Dark
Light

#E8EFC7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #888c6b;
  --color-2: #a4ca88;
  --color-3: #e8efc7;
  --color-4: #c1d263;
  --color-5: #aeb48c;
}

SCSS

$color-1: #888c6b;
$color-2: #a4ca88;
$color-3: #e8efc7;
$color-4: #c1d263;
$color-5: #aeb48c;

TAILWIND

colors: {
  'brand-1': '#888c6b',
  'brand-2': '#a4ca88',
  'brand-3': '#e8efc7',
  'brand-4': '#c1d263',
  'brand-5': '#aeb48c',
}

RGB Array

[136, 140, 107], [164, 202, 136], [232, 239, 199], [193, 210, 99], [174, 180, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #888C6B, #A4CA88, #E8EFC7, #C1D263, #AEB48C 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: #888c6b; --color-2: #a4ca88; --color-3: #e8efc7; --color-4: #c1d263; --color-5: #aeb48c. 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