← Back to Editor

#8F9178 · #EF5B2B · #3A2722 · #D48237 · #754438

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 Library

Color Details Color Details

#8F9178

Autumn Sage · Gray · Sunflower

HEX
#8F9178
RGB
rgb(143, 145, 120)
HSL
hsl(65, 10%, 52%)
HSB
hsb(65, 17%, 57%)
CMYK
cmyk(1%, 0%, 17%, 43%)
Oklch
oklch(64.8% 0.036 111.1)

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

#EF5B2B

Tangerine · Tomato · Warm Sun

HEX
#EF5B2B
RGB
rgb(239, 91, 43)
HSL
hsl(15, 86%, 55%)
HSB
hsb(15, 82%, 94%)
CMYK
cmyk(0%, 62%, 82%, 6%)
Oklch
oklch(65.9% 0.192 37.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#3A2722

Crimson · DarkSlateGray · Deep Berry

HEX
#3A2722
RGB
rgb(58, 39, 34)
HSL
hsl(13, 26%, 18%)
HSB
hsb(13, 41%, 23%)
CMYK
cmyk(0%, 33%, 41%, 77%)
Oklch
oklch(29.4% 0.030 35.3)

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

#D48237

Tangerine · Chocolate · Warm Sun

HEX
#D48237
RGB
rgb(212, 130, 55)
HSL
hsl(29, 65%, 52%)
HSB
hsb(29, 74%, 83%)
CMYK
cmyk(0%, 39%, 74%, 17%)
Oklch
oklch(68.1% 0.134 59.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#754438

Crimson · Sienna · Wine Red

HEX
#754438
RGB
rgb(117, 68, 56)
HSL
hsl(12, 35%, 34%)
HSB
hsb(12, 52%, 46%)
CMYK
cmyk(0%, 42%, 52%, 54%)
Oklch
oklch(44.2% 0.071 34.6)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F9178
7A7891

Analogous

918778
8F9178
839178

Triadic

8F9178
788F91
91788F

Split-Comp.

8F9178
788391
877891

Tetradic

8F9178
789187
7A7891
917883

Contrast Matrix WCAG 2.1 Contrast

8F9178
EF5B2B
3A2722
D48237
754438
—
1.0
Fail
4.3
AA Large
1.1
Fail
2.5
Fail
1.0
Fail
—
4.2
AA Large
1.1
Fail
2.3
Fail
4.3
AA Large
4.2
AA Large
—
4.7
AA
1.8
Fail
1.1
Fail
1.1
Fail
4.7
AA
—
2.7
Fail
2.5
Fail
2.3
Fail
1.8
Fail
2.7
Fail
—
White BG
3.2AA Large
3.4AA Large
14.1AAA
3.0Fail
8.0AAA
Black BG
6.5AA
6.2AA
1.5Fail
7.0AAA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

90907E
AFAE37
323223
B0B049
605F3B

Deuteranopia

909080
B8C339
333424
B5BB4E
63663C

Tritanopia

8F8384
E84042
392424
D0575B
733D3E

Achromatopsia

8E8E8E
828282
2C2C2C
929292
515151

Shades & Tints Shades & Tints

#8F9178

Dark
Light

#EF5B2B

Dark
Light

#3A2722

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f9178;
  --color-2: #ef5b2b;
  --color-3: #3a2722;
  --color-4: #d48237;
  --color-5: #754438;
}

SCSS

$color-1: #8f9178;
$color-2: #ef5b2b;
$color-3: #3a2722;
$color-4: #d48237;
$color-5: #754438;

TAILWIND

colors: {
  'brand-1': '#8f9178',
  'brand-2': '#ef5b2b',
  'brand-3': '#3a2722',
  'brand-4': '#d48237',
  'brand-5': '#754438',
}

RGB Array

[143, 145, 120], [239, 91, 43], [58, 39, 34], [212, 130, 55], [117, 68, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #8F9178, #EF5B2B, #3A2722, #D48237, #754438 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: #8f9178; --color-2: #ef5b2b; --color-3: #3a2722; --color-4: #d48237; --color-5: #754438. 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