← Back to Editor

#A8C0A8 · #180000 · #303000 · #A89000 · #D8C030

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#A8C0A8

Celadon · DarkGray · Apple Green

HEX
#A8C0A8
RGB
rgb(168, 192, 168)
HSL
hsl(120, 16%, 71%)
HSB
hsb(120, 13%, 75%)
CMYK
cmyk(13%, 0%, 13%, 25%)
Oklch
oklch(78.3% 0.043 145.2)

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

#180000

Vermilion · Black · Deep Berry

HEX
#180000
RGB
rgb(24, 0, 0)
HSL
hsl(0, 100%, 5%)
HSB
hsb(0, 100%, 9%)
CMYK
cmyk(0%, 100%, 100%, 91%)
Oklch
oklch(13.1% 0.054 29.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#303000

Autumn Sage · Black · Amber Gold

HEX
#303000
RGB
rgb(48, 48, 0)
HSL
hsl(60, 100%, 9%)
HSB
hsb(60, 100%, 19%)
CMYK
cmyk(0%, 0%, 100%, 81%)
Oklch
oklch(29.9% 0.065 109.8)

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

#A89000

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A89000
RGB
rgb(168, 144, 0)
HSL
hsl(51, 100%, 33%)
HSB
hsb(51, 100%, 66%)
CMYK
cmyk(0%, 14%, 100%, 34%)
Oklch
oklch(65.5% 0.135 97.2)

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

#D8C030

Autumn Sage · GoldenRod · Sunflower

HEX
#D8C030
RGB
rgb(216, 192, 48)
HSL
hsl(51, 68%, 52%)
HSB
hsb(51, 78%, 85%)
CMYK
cmyk(0%, 11%, 78%, 15%)
Oklch
oklch(80.5% 0.154 99.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8C0A8
C1A9C1

Analogous

B5C1A9
A8C0A8
A9C1B5

Triadic

A8C0A8
A9A9C1
C1A9A9

Split-Comp.

A8C0A8
B5A9C1
C1A9B5

Tetradic

A8C0A8
A9B5C1
C1A9C1
C1B5A9

Contrast Matrix WCAG 2.1 Contrast

A8C0A8
180000
303000
A89000
D8C030
—
10.4
AAA
7.0
AA
1.6
Fail
1.1
Fail
10.4
AAA
—
1.5
Fail
6.4
AA
11.1
AAA
7.0
AA
1.5
Fail
—
4.3
AA Large
7.4
AAA
1.6
Fail
6.4
AA
4.3
AA Large
—
1.7
Fail
1.1
Fail
11.1
AAA
7.4
AAA
1.7
Fail
—
White BG
1.9Fail
20.2AAA
13.6AAA
3.2AA Large
1.8Fail
Black BG
10.8AAA
1.0Fail
1.5Fail
6.7AA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B3AE
0E0D00
30300C
9E9D23
CECD53

Deuteranopia

B1AFAF
0F1100
30300E
9FA12B
CFD15B

Tritanopia

A9B2B3
170000
301517
A73E44
D76E74

Achromatopsia

B6B6B6
070707
2B2B2B
878787
B7B7B7

Shades & Tints Shades & Tints

#A8C0A8

Dark
Light

#180000

Dark
Light

#303000

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8c0a8;
  --color-2: #180000;
  --color-3: #303000;
  --color-4: #a89000;
  --color-5: #d8c030;
}

SCSS

$color-1: #a8c0a8;
$color-2: #180000;
$color-3: #303000;
$color-4: #a89000;
$color-5: #d8c030;

TAILWIND

colors: {
  'brand-1': '#a8c0a8',
  'brand-2': '#180000',
  'brand-3': '#303000',
  'brand-4': '#a89000',
  'brand-5': '#d8c030',
}

RGB Array

[168, 192, 168], [24, 0, 0], [48, 48, 0], [168, 144, 0], [216, 192, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #A8C0A8, #180000, #303000, #A89000, #D8C030 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a8c0a8; --color-2: #180000; --color-3: #303000; --color-4: #a89000; --color-5: #d8c030. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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