← Back to Editor

#302C21 · #634F1D · #875F17 · #9E7E19 · #BBB593

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

#302C21

Ochre · DarkSlateGray · Amber Gold

HEX
#302C21
RGB
rgb(48, 44, 33)
HSL
hsl(44, 19%, 16%)
HSB
hsb(44, 31%, 19%)
CMYK
cmyk(0%, 8%, 31%, 81%)
Oklch
oklch(29.4% 0.020 90.4)

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

#634F1D

Ochre · DarkOliveGreen · Amber Gold

HEX
#634F1D
RGB
rgb(99, 79, 29)
HSL
hsl(43, 55%, 25%)
HSB
hsb(43, 71%, 39%)
CMYK
cmyk(0%, 20%, 71%, 61%)
Oklch
oklch(43.8% 0.072 87.0)

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

#875F17

Ochre · Sienna · Amber Brown

HEX
#875F17
RGB
rgb(135, 95, 23)
HSL
hsl(39, 71%, 31%)
HSB
hsb(39, 83%, 53%)
CMYK
cmyk(0%, 30%, 83%, 47%)
Oklch
oklch(51.5% 0.098 76.9)

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

#9E7E19

Ochre · DarkGoldenRod · Honey Gold

HEX
#9E7E19
RGB
rgb(158, 126, 25)
HSL
hsl(46, 73%, 36%)
HSB
hsb(46, 84%, 62%)
CMYK
cmyk(0%, 20%, 84%, 38%)
Oklch
oklch(60.7% 0.117 89.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#BBB593

Fresh Green · Tan · Sunflower

HEX
#BBB593
RGB
rgb(187, 181, 147)
HSL
hsl(51, 23%, 65%)
HSB
hsb(51, 21%, 73%)
CMYK
cmyk(0%, 3%, 21%, 27%)
Oklch
oklch(76.9% 0.047 99.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302C21
212531

Analogous

312521
302C21
2D3121

Triadic

302C21
21312C
2C2131

Split-Comp.

302C21
212D31
252131

Tetradic

302C21
213125
212531
31212D

Contrast Matrix WCAG 2.1 Contrast

302C21
634F1D
875F17
9E7E19
BBB593
—
1.8
Fail
2.4
Fail
3.6
AA Large
6.7
AA
1.8
Fail
—
1.4
Fail
2.0
Fail
3.8
AA Large
2.4
Fail
1.4
Fail
—
1.5
Fail
2.8
Fail
3.6
AA Large
2.0
Fail
1.5
Fail
—
1.9
Fail
6.7
AA
3.8
AA Large
2.8
Fail
1.9
Fail
—
White BG
13.9AAA
7.9AAA
5.7AA
3.9AA Large
2.1Fail
Black BG
1.5Fail
2.7Fail
3.7AA Large
5.5AA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E24
5A5A29
767528
909031
B8B89B

Deuteranopia

2F2F24
5C5D2C
787B2D
929437
B9B99D

Tritanopia

302626
623335
853639
9C4549
BBA2A3

Achromatopsia

2C2C2C
4F4F4F
636363
7C7C7C
B3B3B3

Shades & Tints Shades & Tints

#302C21

Dark
Light

#634F1D

Dark
Light

#875F17

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302c21;
  --color-2: #634f1d;
  --color-3: #875f17;
  --color-4: #9e7e19;
  --color-5: #bbb593;
}

SCSS

$color-1: #302c21;
$color-2: #634f1d;
$color-3: #875f17;
$color-4: #9e7e19;
$color-5: #bbb593;

TAILWIND

colors: {
  'brand-1': '#302c21',
  'brand-2': '#634f1d',
  'brand-3': '#875f17',
  'brand-4': '#9e7e19',
  'brand-5': '#bbb593',
}

RGB Array

[48, 44, 33], [99, 79, 29], [135, 95, 23], [158, 126, 25], [187, 181, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #302C21, #634F1D, #875F17, #9E7E19, #BBB593 is ideal for: tech websites, dark mode UIs, game UIs, 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: #302c21; --color-2: #634f1d; --color-3: #875f17; --color-4: #9e7e19; --color-5: #bbb593. 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 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