← Back to Editor

#45424D · #8C3A4B · #FA1B4C · #F59562 · #D1D487

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#45424D

Deep Indigo · DarkSlateGray · Charcoal

HEX
#45424D
RGB
rgb(69, 66, 77)
HSL
hsl(256, 8%, 28%)
HSB
hsb(256, 14%, 30%)
CMYK
cmyk(10%, 14%, 0%, 70%)
Oklch
oklch(38.6% 0.019 298.0)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#8C3A4B

Crimson · Sienna · Wine Red

HEX
#8C3A4B
RGB
rgb(140, 58, 75)
HSL
hsl(348, 41%, 39%)
HSB
hsb(348, 59%, 55%)
CMYK
cmyk(0%, 59%, 46%, 45%)
Oklch
oklch(46.4% 0.112 9.7)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#FA1B4C

Vermilion · Crimson · Passion Red

HEX
#FA1B4C
RGB
rgb(250, 27, 76)
HSL
hsl(347, 96%, 54%)
HSB
hsb(347, 89%, 98%)
CMYK
cmyk(0%, 89%, 70%, 2%)
Oklch
oklch(63.1% 0.243 18.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#F59562

Apricot · SandyBrown · Warm Sun

HEX
#F59562
RGB
rgb(245, 149, 98)
HSL
hsl(21, 88%, 67%)
HSB
hsb(21, 60%, 96%)
CMYK
cmyk(0%, 39%, 60%, 4%)
Oklch
oklch(75.9% 0.134 47.9)

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

#D1D487

Fresh Green · BurlyWood · Sunflower

HEX
#D1D487
RGB
rgb(209, 212, 135)
HSL
hsl(62, 47%, 68%)
HSB
hsb(62, 36%, 83%)
CMYK
cmyk(1%, 0%, 36%, 17%)
Oklch
oklch(85.0% 0.099 110.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45424D
4A4D42

Analogous

42444D
45424D
4A424D

Triadic

45424D
4D4542
424D45

Split-Comp.

45424D
4D4A42
444D42

Tetradic

45424D
4D4244
4A4D42
424D4A

Contrast Matrix WCAG 2.1 Contrast

45424D
8C3A4B
FA1B4C
F59562
D1D487
—
1.3
Fail
2.5
Fail
4.4
AA Large
6.3
AA
1.3
Fail
—
1.9
Fail
3.3
AA Large
4.8
AA
2.5
Fail
1.9
Fail
—
1.8
Fail
2.5
Fail
4.4
AA Large
3.3
AA Large
1.8
Fail
—
1.4
Fail
6.3
AA
4.8
AA
2.5
Fail
1.4
Fail
—
White BG
9.8AAA
7.4AAA
3.9AA Large
2.2Fail
1.6Fail
Black BG
2.1Fail
2.8Fail
5.3AA
9.4AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

44444A
686847
999740
CBCB6E
D2D29A

Deuteranopia

44444A
6D7346
A6B73D
D1D871
D2D29E

Tritanopia

454848
884443
EF3735
F0787A
D1A8AC

Achromatopsia

444444
545454
636363
ACACAC
CACACA

Shades & Tints Shades & Tints

#45424D

Dark
Light

#8C3A4B

Dark
Light

#FA1B4C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45424d;
  --color-2: #8c3a4b;
  --color-3: #fa1b4c;
  --color-4: #f59562;
  --color-5: #d1d487;
}

SCSS

$color-1: #45424d;
$color-2: #8c3a4b;
$color-3: #fa1b4c;
$color-4: #f59562;
$color-5: #d1d487;

TAILWIND

colors: {
  'brand-1': '#45424d',
  'brand-2': '#8c3a4b',
  'brand-3': '#fa1b4c',
  'brand-4': '#f59562',
  'brand-5': '#d1d487',
}

RGB Array

[69, 66, 77], [140, 58, 75], [250, 27, 76], [245, 149, 98], [209, 212, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #45424D, #8C3A4B, #FA1B4C, #F59562, #D1D487 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: #45424d; --color-2: #8c3a4b; --color-3: #fa1b4c; --color-4: #f59562; --color-5: #d1d487. 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