← Back to Editor

#453A3E · #B2604A · #C18056 · #BC9166 · #8A9A90

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

#453A3E

Dark Violet · DarkSlateGray · Dark Stone

HEX
#453A3E
RGB
rgb(69, 58, 62)
HSL
hsl(338, 9%, 25%)
HSB
hsb(338, 16%, 27%)
CMYK
cmyk(0%, 16%, 10%, 73%)
Oklch
oklch(36.1% 0.017 354.0)

Traditional「Dark Violet」· Paint「Dark Stone」· Creative Midnight Shadow

#B2604A

Crimson · Sienna · Passion Red

HEX
#B2604A
RGB
rgb(178, 96, 74)
HSL
hsl(13, 41%, 49%)
HSB
hsb(13, 58%, 70%)
CMYK
cmyk(0%, 46%, 58%, 30%)
Oklch
oklch(58.0% 0.112 36.0)

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

#C18056

Tangerine · DarkSalmon · Warm Sun

HEX
#C18056
RGB
rgb(193, 128, 86)
HSL
hsl(24, 46%, 55%)
HSB
hsb(24, 55%, 76%)
CMYK
cmyk(0%, 34%, 55%, 24%)
Oklch
oklch(65.8% 0.099 53.1)

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

#BC9166

Ginger · DarkSalmon · Warm Sun

HEX
#BC9166
RGB
rgb(188, 145, 102)
HSL
hsl(30, 39%, 57%)
HSB
hsb(30, 46%, 74%)
CMYK
cmyk(0%, 23%, 46%, 26%)
Oklch
oklch(68.7% 0.078 65.9)

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

#8A9A90

Ash · LightSlateGray · Silver Sand

HEX
#8A9A90
RGB
rgb(138, 154, 144)
HSL
hsl(143, 7%, 57%)
HSB
hsb(143, 10%, 60%)
CMYK
cmyk(10%, 0%, 6%, 40%)
Oklch
oklch(67.0% 0.023 158.3)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

453A3E
3A4541

Analogous

453A44
453A3E
453C3A

Triadic

453A3E
3E453A
3A3E45

Split-Comp.

453A3E
3A453C
3A4445

Tetradic

453A3E
44453A
3A4541
3C3A45

Contrast Matrix WCAG 2.1 Contrast

453A3E
B2604A
C18056
BC9166
8A9A90
—
2.4
Fail
3.4
AA Large
3.8
AA Large
3.7
AA Large
2.4
Fail
—
1.4
Fail
1.6
Fail
1.5
Fail
3.4
AA Large
1.4
Fail
—
1.1
Fail
1.1
Fail
3.8
AA Large
1.6
Fail
1.1
Fail
—
1.0
Fail
3.7
AA Large
1.5
Fail
1.1
Fail
1.0
Fail
—
White BG
10.9AAA
4.5AA
3.2AA Large
2.8Fail
3.0Fail
Black BG
1.9Fail
4.7AA
6.5AA
7.4AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

40403D
8E8E4F
A5A460
A9A970
919192

Deuteranopia

41423D
939951
A9AE63
ACAF73
908F93

Tritanopia

443C3C
AE5454
BE686A
BA797A
8B9495

Achromatopsia

3E3E3E
767676
8F8F8F
999999
949494

Shades & Tints Shades & Tints

#453A3E

Dark
Light

#B2604A

Dark
Light

#C18056

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #453a3e;
  --color-2: #b2604a;
  --color-3: #c18056;
  --color-4: #bc9166;
  --color-5: #8a9a90;
}

SCSS

$color-1: #453a3e;
$color-2: #b2604a;
$color-3: #c18056;
$color-4: #bc9166;
$color-5: #8a9a90;

TAILWIND

colors: {
  'brand-1': '#453a3e',
  'brand-2': '#b2604a',
  'brand-3': '#c18056',
  'brand-4': '#bc9166',
  'brand-5': '#8a9a90',
}

RGB Array

[69, 58, 62], [178, 96, 74], [193, 128, 86], [188, 145, 102], [138, 154, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #453A3E, #B2604A, #C18056, #BC9166, #8A9A90 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #453a3e; --color-2: #b2604a; --color-3: #c18056; --color-4: #bc9166; --color-5: #8a9a90. 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. Restrained colors convey professionalism and trust. 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