← Back to Editor

#FCDE88 · #EFAD3F · #CB874A · #B2551A · #371300

earth

A 5-color earth palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FCDE88

Goose Yellow · Khaki · Lemon Cream

HEX
#FCDE88
RGB
rgb(252, 222, 136)
HSL
hsl(44, 95%, 76%)
HSB
hsb(44, 46%, 99%)
CMYK
cmyk(0%, 12%, 46%, 1%)
Oklch
oklch(90.7% 0.111 90.8)

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

#EFAD3F

Ginger · SandyBrown · Warm Sun

HEX
#EFAD3F
RGB
rgb(239, 173, 63)
HSL
hsl(38, 85%, 59%)
HSB
hsb(38, 74%, 94%)
CMYK
cmyk(0%, 28%, 74%, 6%)
Oklch
oklch(79.1% 0.144 76.2)

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

#CB874A

Tangerine · Coral · Warm Sun

HEX
#CB874A
RGB
rgb(203, 135, 74)
HSL
hsl(28, 55%, 54%)
HSB
hsb(28, 64%, 80%)
CMYK
cmyk(0%, 33%, 64%, 20%)
Oklch
oklch(68.1% 0.114 60.9)

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

#B2551A

Tangerine · Sienna · Amber Brown

HEX
#B2551A
RGB
rgb(178, 85, 26)
HSL
hsl(23, 75%, 40%)
HSB
hsb(23, 85%, 70%)
CMYK
cmyk(0%, 52%, 85%, 30%)
Oklch
oklch(55.6% 0.139 48.0)

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

#371300

Tangerine · Black · Cinnamon

HEX
#371300
RGB
rgb(55, 19, 0)
HSL
hsl(21, 100%, 11%)
HSB
hsb(21, 100%, 22%)
CMYK
cmyk(0%, 65%, 100%, 78%)
Oklch
oklch(24.0% 0.066 47.8)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCDE88
88A7FC

Analogous

FCA388
FCDE88
E1FC88

Triadic

FCDE88
88FCDD
DD88FC

Split-Comp.

FCDE88
88E1FC
A388FC

Tetradic

FCDE88
88FCA3
88A7FC
FC88E1

Contrast Matrix WCAG 2.1 Contrast

FCDE88
EFAD3F
CB874A
B2551A
371300
—
1.5
Fail
2.2
Fail
3.8
AA Large
12.7
AAA
1.5
Fail
—
1.5
Fail
2.5
Fail
8.5
AAA
2.2
Fail
1.5
Fail
—
1.7
Fail
5.7
AA
3.8
AA Large
2.5
Fail
1.7
Fail
—
3.4
AA Large
12.7
AAA
8.5
AAA
5.7
AA
3.4
AA Large
—
White BG
1.3Fail
2.0Fail
3.0Fail
5.0AA
16.7AAA
Black BG
15.9AAA
10.7AAA
7.1AAA
4.2AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEF9D
D2D25A
AEAD59
8A8928
272705

Deuteranopia

F1F3A2
D6DB60
B2B75C
8F962C
2A2C06

Tritanopia

FAADB1
EC6F73
C86467
AD3436
350809

Achromatopsia

DDDDDD
B4B4B4
949494
6A6A6A
1C1C1C

Shades & Tints Shades & Tints

#FCDE88

Dark
Light

#EFAD3F

Dark
Light

#CB874A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcde88;
  --color-2: #efad3f;
  --color-3: #cb874a;
  --color-4: #b2551a;
  --color-5: #371300;
}

SCSS

$color-1: #fcde88;
$color-2: #efad3f;
$color-3: #cb874a;
$color-4: #b2551a;
$color-5: #371300;

TAILWIND

colors: {
  'brand-1': '#fcde88',
  'brand-2': '#efad3f',
  'brand-3': '#cb874a',
  'brand-4': '#b2551a',
  'brand-5': '#371300',
}

RGB Array

[252, 222, 136], [239, 173, 63], [203, 135, 74], [178, 85, 26], [55, 19, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #FCDE88, #EFAD3F, #CB874A, #B2551A, #371300 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fcde88; --color-2: #efad3f; --color-3: #cb874a; --color-4: #b2551a; --color-5: #371300. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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