#55374A + #6A4D2D + #7D6525 + #8E8351 + #9CA086 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#55374A

Rose Purple · DarkSlateGray · Camellia

HEX

#55374A

RGB

rgb(85, 55, 74)

HSL

hsl(322, 21%, 27%)

HSB

hsb(322, 35%, 33%)

CMYK

cmyk(0%, 35%, 13%, 67%)

Oklch

oklch(37.9% 0.052 341.4)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#6A4D2D

Ochre · DarkOliveGreen · Amber Brown

HEX

#6A4D2D

RGB

rgb(106, 77, 45)

HSL

hsl(31, 40%, 30%)

HSB

hsb(31, 58%, 42%)

CMYK

cmyk(0%, 27%, 58%, 58%)

Oklch

oklch(44.4% 0.061 67.9)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#7D6525

Ochre · Sienna · Honey Gold

HEX

#7D6525

RGB

rgb(125, 101, 37)

HSL

hsl(44, 54%, 32%)

HSB

hsb(44, 70%, 49%)

CMYK

cmyk(0%, 19%, 70%, 51%)

Oklch

oklch(51.8% 0.087 88.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#8E8351

Ochre · Gray · Honey Gold

HEX

#8E8351

RGB

rgb(142, 131, 81)

HSL

hsl(49, 27%, 44%)

HSB

hsb(49, 43%, 56%)

CMYK

cmyk(0%, 8%, 43%, 44%)

Oklch

oklch(60.8% 0.070 97.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#9CA086

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#9CA086

RGB

rgb(156, 160, 134)

HSL

hsl(69, 12%, 58%)

HSB

hsb(69, 16%, 63%)

CMYK

cmyk(2%, 0%, 16%, 37%)

Oklch

oklch(69.5% 0.037 114.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

55374A

365341

Analogous

4F3653

55374A

53363A

Triadic

55374A

495336

364953

Split-Comp.

55374A

3A5336

36534F

Tetradic

55374A

534F36

365341

363A53

Contrast Matrix WCAG 2.1 Contrast

55374A	6A4D2D	7D6525	8E8351	9CA086
—	1.3 Fail	1.9 Fail	2.7 Fail	3.8 AA Large
1.3 Fail	—	1.4 Fail	2.0 Fail	2.9 Fail
1.9 Fail	1.4 Fail	—	1.5 Fail	2.1 Fail
2.7 Fail	2.0 Fail	1.5 Fail	—	1.4 Fail
3.8 AA Large	2.9 Fail	2.1 Fail	1.4 Fail	—

White BG

10.3AAA

7.7AAA

5.6AA

3.8AA Large

2.7Fail

Black BG

2.0Fail

2.7Fail

3.8AA Large

5.5AA

7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

484845

5D5D35

737234

89895D

9E9E8C

Deuteranopia

4A4C44

5F6137

747638

8A8B60

9E9D8E

Tritanopia

544241

693B3C

7C4143

8D6769

9C9192

Achromatopsia

424242

525252

656565

818181

9C9C9C

Shades & Tints Shades & Tints

#55374A

Dark

Light

#6A4D2D

Dark

Light

#7D6525

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #55374a;
  --color-2: #6a4d2d;
  --color-3: #7d6525;
  --color-4: #8e8351;
  --color-5: #9ca086;
}

SCSS

$color-1: #55374a;
$color-2: #6a4d2d;
$color-3: #7d6525;
$color-4: #8e8351;
$color-5: #9ca086;

TAILWIND

colors: {
  'brand-1': '#55374a',
  'brand-2': '#6a4d2d',
  'brand-3': '#7d6525',
  'brand-4': '#8e8351',
  'brand-5': '#9ca086',
}

RGB Array

[85, 55, 74], [106, 77, 45], [125, 101, 37], [142, 131, 81], [156, 160, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #55374A, #6A4D2D, #7D6525, #8E8351, #9CA086 is ideal for: tech websites, dark mode UIs, game UIs. 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: #55374a; --color-2: #6a4d2d; --color-3: #7d6525; --color-4: #8e8351; --color-5: #9ca086. 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. 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