← Back to Editor

#F1A744 · #C8611E · #A4926C · #79816A · #D8C092

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

#F1A744

Ginger · SandyBrown · Warm Sun

HEX
#F1A744
RGB
rgb(241, 167, 68)
HSL
hsl(34, 86%, 61%)
HSB
hsb(34, 72%, 95%)
CMYK
cmyk(0%, 31%, 72%, 5%)
Oklch
oklch(78.3% 0.142 70.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#C8611E

Tangerine · Chocolate · Amber Brown

HEX
#C8611E
RGB
rgb(200, 97, 30)
HSL
hsl(24, 74%, 45%)
HSB
hsb(24, 85%, 78%)
CMYK
cmyk(0%, 52%, 85%, 22%)
Oklch
oklch(60.8% 0.151 48.4)

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

#A4926C

Ginger · Gray · Sunflower

HEX
#A4926C
RGB
rgb(164, 146, 108)
HSL
hsl(41, 24%, 53%)
HSB
hsb(41, 34%, 64%)
CMYK
cmyk(0%, 11%, 34%, 36%)
Oklch
oklch(66.6% 0.057 85.5)

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

#79816A

Grass Green · Gray · Olive Green

HEX
#79816A
RGB
rgb(121, 129, 106)
HSL
hsl(81, 10%, 46%)
HSB
hsb(81, 18%, 51%)
CMYK
cmyk(6%, 0%, 18%, 49%)
Oklch
oklch(59.0% 0.035 123.1)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#D8C092

Goose Yellow · Tan · Warm Sun

HEX
#D8C092
RGB
rgb(216, 192, 146)
HSL
hsl(39, 47%, 71%)
HSB
hsb(39, 32%, 85%)
CMYK
cmyk(0%, 11%, 32%, 15%)
Oklch
oklch(81.7% 0.067 83.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1A744
4690F1

Analogous

F15146
F1A744
E6F146

Triadic

F1A744
46F1A7
A746F1

Split-Comp.

F1A744
46E6F1
5146F1

Tetradic

F1A744
46F151
4690F1
F146E6

Contrast Matrix WCAG 2.1 Contrast

F1A744
C8611E
A4926C
79816A
D8C092
—
2.0
Fail
1.5
Fail
2.0
Fail
1.1
Fail
2.0
Fail
—
1.3
Fail
1.0
Fail
2.3
Fail
1.5
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.0
Fail
1.0
Fail
1.3
Fail
—
2.3
Fail
1.1
Fail
2.3
Fail
1.7
Fail
2.3
Fail
—
White BG
2.0Fail
4.1AA Large
3.0AA Large
4.1AA Large
1.8Fail
Black BG
10.4AAA
5.2AA
6.9AA
5.2AA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D05C
9B9A2E
9C9C75
7C7D70
CECD9D

Deuteranopia

D5DB62
A1A932
9D9F77
7C7B71
CFD1A0

Tritanopia

ED6F73
C33B3E
A37C7E
797475
D7A6A8

Achromatopsia

B2B2B2
787878
939393
7C7C7C
C2C2C2

Shades & Tints Shades & Tints

#F1A744

Dark
Light

#C8611E

Dark
Light

#A4926C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1a744;
  --color-2: #c8611e;
  --color-3: #a4926c;
  --color-4: #79816a;
  --color-5: #d8c092;
}

SCSS

$color-1: #f1a744;
$color-2: #c8611e;
$color-3: #a4926c;
$color-4: #79816a;
$color-5: #d8c092;

TAILWIND

colors: {
  'brand-1': '#f1a744',
  'brand-2': '#c8611e',
  'brand-3': '#a4926c',
  'brand-4': '#79816a',
  'brand-5': '#d8c092',
}

RGB Array

[241, 167, 68], [200, 97, 30], [164, 146, 108], [121, 129, 106], [216, 192, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #F1A744, #C8611E, #A4926C, #79816A, #D8C092 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: #f1a744; --color-2: #c8611e; --color-3: #a4926c; --color-4: #79816a; --color-5: #d8c092. 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