← Back to Editor

#302B03 · #785424 · #876630 · #B69852 · #CFBF9E

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

#302B03

Autumn Sage · Black · Amber Gold

HEX
#302B03
RGB
rgb(48, 43, 3)
HSL
hsl(53, 88%, 10%)
HSB
hsb(53, 94%, 19%)
CMYK
cmyk(0%, 10%, 94%, 81%)
Oklch
oklch(28.6% 0.057 102.1)

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

#785424

Ochre · Sienna · Amber Brown

HEX
#785424
RGB
rgb(120, 84, 36)
HSL
hsl(34, 54%, 31%)
HSB
hsb(34, 70%, 47%)
CMYK
cmyk(0%, 30%, 70%, 53%)
Oklch
oklch(47.5% 0.080 71.5)

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

#876630

Ochre · Sienna · Amber Brown

HEX
#876630
RGB
rgb(135, 102, 48)
HSL
hsl(37, 48%, 36%)
HSB
hsb(37, 64%, 53%)
CMYK
cmyk(0%, 24%, 64%, 47%)
Oklch
oklch(53.2% 0.083 77.6)

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

#B69852

Ginger · GoldenRod · Sunflower

HEX
#B69852
RGB
rgb(182, 152, 82)
HSL
hsl(42, 41%, 52%)
HSB
hsb(42, 55%, 71%)
CMYK
cmyk(0%, 16%, 55%, 29%)
Oklch
oklch(69.2% 0.096 86.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#CFBF9E

Goose Yellow · Tan · Sunflower

HEX
#CFBF9E
RGB
rgb(207, 191, 158)
HSL
hsl(40, 34%, 72%)
HSB
hsb(40, 24%, 81%)
CMYK
cmyk(0%, 8%, 24%, 19%)
Oklch
oklch(80.9% 0.048 85.2)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302B03
030830

Analogous

301403
302B03
1F3003

Triadic

302B03
03302B
2B0330

Split-Comp.

302B03
031F30
140330

Tetradic

302B03
033014
030830
30031F

Contrast Matrix WCAG 2.1 Contrast

302B03
785424
876630
B69852
CFBF9E
—
2.1
Fail
2.7
Fail
5.2
AA
7.9
AAA
2.1
Fail
—
1.3
Fail
2.5
Fail
3.8
AA Large
2.7
Fail
1.3
Fail
—
1.9
Fail
2.9
Fail
5.2
AA
2.5
Fail
1.9
Fail
—
1.5
Fail
7.9
AAA
3.8
AA Large
2.9
Fail
1.5
Fail
—
White BG
14.3AAA
6.8AA
5.3AA
2.8Fail
1.8Fail
Black BG
1.5Fail
3.1AA Large
4.0AA Large
7.6AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E0D
686830
79783D
A9A963
C8C8A6

Deuteranopia

2E2E0F
6B6D32
7B7D40
ABAD67
C9CAA8

Tritanopia

301416
76393B
85474A
B57073
CEACAE

Achromatopsia

282828
595959
6A6A6A
999999
C0C0C0

Shades & Tints Shades & Tints

#302B03

Dark
Light

#785424

Dark
Light

#876630

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302b03;
  --color-2: #785424;
  --color-3: #876630;
  --color-4: #b69852;
  --color-5: #cfbf9e;
}

SCSS

$color-1: #302b03;
$color-2: #785424;
$color-3: #876630;
$color-4: #b69852;
$color-5: #cfbf9e;

TAILWIND

colors: {
  'brand-1': '#302b03',
  'brand-2': '#785424',
  'brand-3': '#876630',
  'brand-4': '#b69852',
  'brand-5': '#cfbf9e',
}

RGB Array

[48, 43, 3], [120, 84, 36], [135, 102, 48], [182, 152, 82], [207, 191, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #302B03, #785424, #876630, #B69852, #CFBF9E 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: #302b03; --color-2: #785424; --color-3: #876630; --color-4: #b69852; --color-5: #cfbf9e. 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