← Back to Editor

#9FB269 · #F2ECAC · #E4C369 · #CB984C · #A76949

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

#9FB269

Grass Green · DarkSeaGreen · Olive Green

HEX
#9FB269
RGB
rgb(159, 178, 105)
HSL
hsl(76, 32%, 55%)
HSB
hsb(76, 41%, 70%)
CMYK
cmyk(11%, 0%, 41%, 30%)
Oklch
oklch(73.2% 0.100 120.8)

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

#F2ECAC

Fresh Green · Wheat · Lemon Cream

HEX
#F2ECAC
RGB
rgb(242, 236, 172)
HSL
hsl(55, 73%, 81%)
HSB
hsb(55, 29%, 95%)
CMYK
cmyk(0%, 2%, 29%, 5%)
Oklch
oklch(93.3% 0.082 103.3)

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

#E4C369

Ginger · BurlyWood · Sunflower

HEX
#E4C369
RGB
rgb(228, 195, 105)
HSL
hsl(44, 69%, 65%)
HSB
hsb(44, 54%, 89%)
CMYK
cmyk(0%, 14%, 54%, 11%)
Oklch
oklch(82.7% 0.116 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#CB984C

Ginger · SandyBrown · Warm Sun

HEX
#CB984C
RGB
rgb(203, 152, 76)
HSL
hsl(36, 55%, 55%)
HSB
hsb(36, 63%, 80%)
CMYK
cmyk(0%, 25%, 63%, 20%)
Oklch
oklch(71.3% 0.111 75.2)

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

#A76949

Tangerine · Sienna · Amber Brown

HEX
#A76949
RGB
rgb(167, 105, 73)
HSL
hsl(20, 39%, 47%)
HSB
hsb(20, 56%, 65%)
CMYK
cmyk(0%, 37%, 56%, 35%)
Oklch
oklch(58.1% 0.092 47.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FB269
7B68B1

Analogous

B1A068
9FB269
79B168

Triadic

9FB269
689DB1
B1689D

Split-Comp.

9FB269
6879B1
A068B1

Tetradic

9FB269
68B1A0
7B68B1
B16879

Contrast Matrix WCAG 2.1 Contrast

9FB269
F2ECAC
E4C369
CB984C
A76949
—
1.9
Fail
1.4
Fail
1.1
Fail
1.9
Fail
1.9
Fail
—
1.4
Fail
2.1
Fail
3.6
AA Large
1.4
Fail
1.4
Fail
—
1.5
Fail
2.6
Fail
1.1
Fail
2.1
Fail
1.5
Fail
—
1.7
Fail
1.9
Fail
3.6
AA Large
2.6
Fail
1.7
Fail
—
White BG
2.3Fail
1.2Fail
1.7Fail
2.6Fail
4.4AA Large
Black BG
9.0AAA
17.4AAA
12.3AAA
8.1AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A77B
EFEFBB
D6D57F
B5B45E
8C8C51

Deuteranopia

A6A57F
F0F0BF
D8DA84
B8BC63
909453

Tritanopia

A0898C
F2C8CA
E29094
C86D70
A45758

Achromatopsia

A4A4A4
E6E6E6
C3C3C3
9F9F9F
787878

Shades & Tints Shades & Tints

#9FB269

Dark
Light

#F2ECAC

Dark
Light

#E4C369

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fb269;
  --color-2: #f2ecac;
  --color-3: #e4c369;
  --color-4: #cb984c;
  --color-5: #a76949;
}

SCSS

$color-1: #9fb269;
$color-2: #f2ecac;
$color-3: #e4c369;
$color-4: #cb984c;
$color-5: #a76949;

TAILWIND

colors: {
  'brand-1': '#9fb269',
  'brand-2': '#f2ecac',
  'brand-3': '#e4c369',
  'brand-4': '#cb984c',
  'brand-5': '#a76949',
}

RGB Array

[159, 178, 105], [242, 236, 172], [228, 195, 105], [203, 152, 76], [167, 105, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #9FB269, #F2ECAC, #E4C369, #CB984C, #A76949 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: #9fb269; --color-2: #f2ecac; --color-3: #e4c369; --color-4: #cb984c; --color-5: #a76949. 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