← Back to Editor

#88979C · #5A7078 · #785A5A · #473535 · #2E1A1A

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#88979C

Slate Blue · LightSlateGray · Silver Sand

HEX
#88979C
RGB
rgb(136, 151, 156)
HSL
hsl(195, 9%, 57%)
HSB
hsb(195, 13%, 61%)
CMYK
cmyk(13%, 3%, 0%, 39%)
Oklch
oklch(66.6% 0.019 219.8)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

#5A7078

Slate Blue · DimGray · Mint Ice

HEX
#5A7078
RGB
rgb(90, 112, 120)
HSL
hsl(196, 14%, 41%)
HSB
hsb(196, 25%, 47%)
CMYK
cmyk(25%, 7%, 0%, 53%)
Oklch
oklch(53.0% 0.029 222.0)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#785A5A

Crimson · DimGray · Passion Red

HEX
#785A5A
RGB
rgb(120, 90, 90)
HSL
hsl(0, 14%, 41%)
HSB
hsb(0, 25%, 47%)
CMYK
cmyk(0%, 25%, 25%, 53%)
Oklch
oklch(49.9% 0.040 18.6)

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

#473535

Crimson · DarkSlateGray · Wine Red

HEX
#473535
RGB
rgb(71, 53, 53)
HSL
hsl(0, 15%, 24%)
HSB
hsb(0, 25%, 28%)
CMYK
cmyk(0%, 25%, 25%, 72%)
Oklch
oklch(34.9% 0.026 18.5)

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

#2E1A1A

Crimson · Black · Deep Berry

HEX
#2E1A1A
RGB
rgb(46, 26, 26)
HSL
hsl(0, 28%, 14%)
HSB
hsb(0, 43%, 18%)
CMYK
cmyk(0%, 43%, 43%, 82%)
Oklch
oklch(24.4% 0.032 19.6)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

88979C
9B8C87

Analogous

879B96
88979C
878C9B

Triadic

88979C
9B8796
969B87

Split-Comp.

88979C
9B878C
9B9687

Tetradic

88979C
96879B
9B8C87
8C9B87

Contrast Matrix WCAG 2.1 Contrast

88979C
5A7078
785A5A
473535
2E1A1A
—
1.7
Fail
2.0
Fail
3.8
AA Large
5.4
AA
1.7
Fail
—
1.2
Fail
2.2
Fail
3.1
AA Large
2.0
Fail
1.2
Fail
—
1.9
Fail
2.7
Fail
3.8
AA Large
2.2
Fail
1.9
Fail
—
1.4
Fail
5.4
AA
3.1
AA Large
2.7
Fail
1.4
Fail
—
White BG
3.0AA Large
5.2AA
6.2AA
11.5AAA
16.4AAA
Black BG
7.0AA
4.0AA Large
3.4AA Large
1.8Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8F9B
646476
6B6B5A
3F3F35
25251A

Deuteranopia

8E8D9B
626176
6D6F5A
404235
27281A

Tritanopia

899A9A
5B7574
775A5A
463535
2D1A1A

Achromatopsia

939393
6A6A6A
636363
3A3A3A
202020

Shades & Tints Shades & Tints

#88979C

Dark
Light

#5A7078

Dark
Light

#785A5A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #88979c;
  --color-2: #5a7078;
  --color-3: #785a5a;
  --color-4: #473535;
  --color-5: #2e1a1a;
}

SCSS

$color-1: #88979c;
$color-2: #5a7078;
$color-3: #785a5a;
$color-4: #473535;
$color-5: #2e1a1a;

TAILWIND

colors: {
  'brand-1': '#88979c',
  'brand-2': '#5a7078',
  'brand-3': '#785a5a',
  'brand-4': '#473535',
  'brand-5': '#2e1a1a',
}

RGB Array

[136, 151, 156], [90, 112, 120], [120, 90, 90], [71, 53, 53], [46, 26, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #88979C, #5A7078, #785A5A, #473535, #2E1A1A is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #88979c; --color-2: #5a7078; --color-3: #785a5a; --color-4: #473535; --color-5: #2e1a1a. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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