← Back to Editor

#545849 · #747461 · #93917B · #B1AA92 · #D9CFB3

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 LibraryData Visualization

Color Details Color Details

#545849

Grass Green · DarkOliveGreen · Charcoal

HEX
#545849
RGB
rgb(84, 88, 73)
HSL
hsl(76, 9%, 32%)
HSB
hsb(76, 17%, 35%)
CMYK
cmyk(5%, 0%, 17%, 65%)
Oklch
oklch(45.2% 0.024 119.5)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#747461

Autumn Sage · DimGray · Warm Gray

HEX
#747461
RGB
rgb(116, 116, 97)
HSL
hsl(60, 9%, 42%)
HSB
hsb(60, 16%, 45%)
CMYK
cmyk(0%, 0%, 16%, 55%)
Oklch
oklch(55.3% 0.028 107.3)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#93917B

Autumn Sage · Gray · Sunflower

HEX
#93917B
RGB
rgb(147, 145, 123)
HSL
hsl(55, 10%, 53%)
HSB
hsb(55, 16%, 58%)
CMYK
cmyk(0%, 1%, 16%, 42%)
Oklch
oklch(65.2% 0.032 103.0)

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

#B1AA92

Ginger · DarkGray · Sunflower

HEX
#B1AA92
RGB
rgb(177, 170, 146)
HSL
hsl(46, 17%, 63%)
HSB
hsb(46, 18%, 69%)
CMYK
cmyk(0%, 4%, 18%, 31%)
Oklch
oklch(73.7% 0.034 93.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D9CFB3

Goose Yellow · Wheat · Lemon Cream

HEX
#D9CFB3
RGB
rgb(217, 207, 179)
HSL
hsl(44, 33%, 78%)
HSB
hsb(44, 18%, 85%)
CMYK
cmyk(0%, 5%, 18%, 15%)
Oklch
oklch(85.5% 0.039 90.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

545849
4E4A59

Analogous

59564A
545849
4E594A

Triadic

545849
4A5559
594A55

Split-Comp.

545849
4A4E59
564A59

Tetradic

545849
4A5956
4E4A59
594A4E

Contrast Matrix WCAG 2.1 Contrast

545849
747461
93917B
B1AA92
D9CFB3
—
1.5
Fail
2.3
Fail
3.1
AA Large
4.7
AA
1.5
Fail
—
1.5
Fail
2.0
Fail
3.1
AA Large
2.3
Fail
1.5
Fail
—
1.4
Fail
2.1
Fail
3.1
AA Large
2.0
Fail
1.4
Fail
—
1.5
Fail
4.7
AA
3.1
AA Large
2.1
Fail
1.5
Fail
—
White BG
7.3AAA
4.8AA
3.2AA Large
2.3Fail
1.6Fail
Black BG
2.9Fail
4.4AA Large
6.6AA
9.0AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

56564D
747466
929280
AEAE98
D5D5BA

Deuteranopia

56554E
747467
929282
AEAF99
D5D6BB

Tritanopia

544F50
74696A
938585
B19C9D
D8BFC0

Achromatopsia

555555
727272
8F8F8F
A9A9A9
CFCFCF

Shades & Tints Shades & Tints

#545849

Dark
Light

#747461

Dark
Light

#93917B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #545849;
  --color-2: #747461;
  --color-3: #93917b;
  --color-4: #b1aa92;
  --color-5: #d9cfb3;
}

SCSS

$color-1: #545849;
$color-2: #747461;
$color-3: #93917b;
$color-4: #b1aa92;
$color-5: #d9cfb3;

TAILWIND

colors: {
  'brand-1': '#545849',
  'brand-2': '#747461',
  'brand-3': '#93917b',
  'brand-4': '#b1aa92',
  'brand-5': '#d9cfb3',
}

RGB Array

[84, 88, 73], [116, 116, 97], [147, 145, 123], [177, 170, 146], [217, 207, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #545849, #747461, #93917B, #B1AA92, #D9CFB3 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #545849; --color-2: #747461; --color-3: #93917b; --color-4: #b1aa92; --color-5: #d9cfb3. 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 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