← Back to Editor

#F6F4C2 · #20145A · #1D12DE · #553218 · #79E1F2

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F6F4C2

Fresh Green · Bisque · Lemon Cream

HEX
#F6F4C2
RGB
rgb(246, 244, 194)
HSL
hsl(58, 74%, 86%)
HSB
hsb(58, 21%, 96%)
CMYK
cmyk(0%, 1%, 21%, 4%)
Oklch
oklch(95.6% 0.065 105.7)

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

#20145A

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#20145A
RGB
rgb(32, 20, 90)
HSL
hsl(250, 64%, 22%)
HSB
hsb(250, 78%, 35%)
CMYK
cmyk(64%, 78%, 0%, 65%)
Oklch
oklch(26.1% 0.118 282.4)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#1D12DE

Deep Indigo · MediumBlue · Navy Blue

HEX
#1D12DE
RGB
rgb(29, 18, 222)
HSL
hsl(243, 85%, 47%)
HSB
hsb(243, 92%, 87%)
CMYK
cmyk(87%, 92%, 0%, 13%)
Oklch
oklch(42.1% 0.272 267.5)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#553218

Tangerine · DarkOliveGreen · Cinnamon

HEX
#553218
RGB
rgb(85, 50, 24)
HSL
hsl(26, 56%, 21%)
HSB
hsb(26, 72%, 33%)
CMYK
cmyk(0%, 41%, 72%, 67%)
Oklch
oklch(35.5% 0.064 55.5)

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

#79E1F2

Sky Blue · SkyBlue · Lake Green

HEX
#79E1F2
RGB
rgb(121, 225, 242)
HSL
hsl(188, 82%, 71%)
HSB
hsb(188, 50%, 95%)
CMYK
cmyk(50%, 7%, 0%, 5%)
Oklch
oklch(85.3% 0.099 209.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6F4C2
C1C3F6

Analogous

F6DAC1
F6F4C2
DDF6C1

Triadic

F6F4C2
C1F6F4
F4C1F6

Split-Comp.

F6F4C2
C1DDF6
DAC1F6

Tetradic

F6F4C2
C1F6DA
C1C3F6
F6C1DD

Contrast Matrix WCAG 2.1 Contrast

F6F4C2
20145A
1D12DE
553218
79E1F2
—
14.2
AAA
8.5
AAA
10.0
AAA
1.3
Fail
14.2
AAA
—
1.7
Fail
1.4
Fail
10.6
AAA
8.5
AAA
1.7
Fail
—
1.2
Fail
6.3
AA
10.0
AAA
1.4
Fail
1.2
Fail
—
7.5
AAA
1.3
Fail
10.6
AAA
6.3
AA
7.5
AAA
—
White BG
1.1Fail
16.0AAA
9.6AAA
11.3AAA
1.5Fail
Black BG
18.6AAA
1.3Fail
2.2Fail
1.9Fail
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5CE
1B1B49
1818AD
46461E
A6A7EE

Deuteranopia

F5F5D1
1C1C45
191AA1
484B20
A098ED

Tritanopia

F6D8DA
1F3C39
1C867D
532324
7EEBEA

Achromatopsia

EFEFEF
202020
2D2D2D
3A3A3A
C4C4C4

Shades & Tints Shades & Tints

#F6F4C2

Dark
Light

#20145A

Dark
Light

#1D12DE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6f4c2;
  --color-2: #20145a;
  --color-3: #1d12de;
  --color-4: #553218;
  --color-5: #79e1f2;
}

SCSS

$color-1: #f6f4c2;
$color-2: #20145a;
$color-3: #1d12de;
$color-4: #553218;
$color-5: #79e1f2;

TAILWIND

colors: {
  'brand-1': '#f6f4c2',
  'brand-2': '#20145a',
  'brand-3': '#1d12de',
  'brand-4': '#553218',
  'brand-5': '#79e1f2',
}

RGB Array

[246, 244, 194], [32, 20, 90], [29, 18, 222], [85, 50, 24], [121, 225, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #F6F4C2, #20145A, #1D12DE, #553218, #79E1F2 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: #f6f4c2; --color-2: #20145a; --color-3: #1d12de; --color-4: #553218; --color-5: #79e1f2. 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