← Back to Editor

#F2DD41 · #C6820B · #F4CA0A · #504C48 · #EE710C

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 App

Color Details Color Details

#F2DD41

Autumn Sage · SandyBrown · Sunflower

HEX
#F2DD41
RGB
rgb(242, 221, 65)
HSL
hsl(53, 87%, 60%)
HSB
hsb(53, 73%, 95%)
CMYK
cmyk(0%, 9%, 73%, 5%)
Oklch
oklch(88.9% 0.167 101.4)

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

#C6820B

Ochre · DarkGoldenRod · Amber Brown

HEX
#C6820B
RGB
rgb(198, 130, 11)
HSL
hsl(38, 89%, 41%)
HSB
hsb(38, 94%, 78%)
CMYK
cmyk(0%, 34%, 94%, 22%)
Oklch
oklch(66.1% 0.139 72.0)

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

#F4CA0A

Ochre · Gold · Honey Gold

HEX
#F4CA0A
RGB
rgb(244, 202, 10)
HSL
hsl(49, 92%, 50%)
HSB
hsb(49, 96%, 96%)
CMYK
cmyk(0%, 17%, 96%, 4%)
Oklch
oklch(85.1% 0.173 93.5)

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

#504C48

Dark Cyan · DarkSlateGray · Charcoal

HEX
#504C48
RGB
rgb(80, 76, 72)
HSL
hsl(30, 5%, 30%)
HSB
hsb(30, 10%, 31%)
CMYK
cmyk(0%, 5%, 10%, 69%)
Oklch
oklch(41.9% 0.008 67.6)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#EE710C

Tangerine · Chocolate · Amber Brown

HEX
#EE710C
RGB
rgb(238, 113, 12)
HSL
hsl(27, 90%, 49%)
HSB
hsb(27, 95%, 93%)
CMYK
cmyk(0%, 53%, 95%, 7%)
Oklch
oklch(68.6% 0.179 49.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2DD41
4055F2

Analogous

F28440
F2DD41
AEF240

Triadic

F2DD41
40F2DD
DD40F2

Split-Comp.

F2DD41
40AEF2
8440F2

Tetradic

F2DD41
40F284
4055F2
F240AE

Contrast Matrix WCAG 2.1 Contrast

F2DD41
C6820B
F4CA0A
504C48
EE710C
—
2.3
Fail
1.1
Fail
6.2
AA
2.2
Fail
2.3
Fail
—
2.0
Fail
2.7
Fail
1.1
Fail
1.1
Fail
2.0
Fail
—
5.4
AA
1.9
Fail
6.2
AA
2.7
Fail
5.4
AA
—
2.8
Fail
2.2
Fail
1.1
Fail
1.9
Fail
2.8
Fail
—
White BG
1.4Fail
3.2AA Large
1.6Fail
8.5AAA
3.0Fail
Black BG
15.2AAA
6.6AA
13.3AAA
2.5Fail
7.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E967
A9A828
E2E138
4E4E49
B8B724

Deuteranopia

EAEC70
ADB22F
E4E744
4F4F49
BFC92A

Tritanopia

F1858B
C33F44
F25D65
504A4A
E8383C

Achromatopsia

D1D1D1
898989
C1C1C1
4D4D4D
8B8B8B

Shades & Tints Shades & Tints

#F2DD41

Dark
Light

#C6820B

Dark
Light

#F4CA0A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2dd41;
  --color-2: #c6820b;
  --color-3: #f4ca0a;
  --color-4: #504c48;
  --color-5: #ee710c;
}

SCSS

$color-1: #f2dd41;
$color-2: #c6820b;
$color-3: #f4ca0a;
$color-4: #504c48;
$color-5: #ee710c;

TAILWIND

colors: {
  'brand-1': '#f2dd41',
  'brand-2': '#c6820b',
  'brand-3': '#f4ca0a',
  'brand-4': '#504c48',
  'brand-5': '#ee710c',
}

RGB Array

[242, 221, 65], [198, 130, 11], [244, 202, 10], [80, 76, 72], [238, 113, 12]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #F2DD41, #C6820B, #F4CA0A, #504C48, #EE710C is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #f2dd41; --color-2: #c6820b; --color-3: #f4ca0a; --color-4: #504c48; --color-5: #ee710c. 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 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