#857667 + #54D1C0 + #7A6350 + #36AD9D + #5C4A3C · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#857667

Ochre · Gray · Amber Brown

HEX

#857667

RGB

rgb(133, 118, 103)

HSL

hsl(30, 13%, 46%)

HSB

hsb(30, 23%, 52%)

CMYK

cmyk(0%, 11%, 23%, 48%)

Oklch

oklch(57.5% 0.029 67.2)

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

#54D1C0

Mineral Blue · MediumTurquoise · Lake Green

HEX

#54D1C0

RGB

rgb(84, 209, 192)

HSL

hsl(172, 58%, 57%)

HSB

hsb(172, 60%, 82%)

CMYK

cmyk(60%, 0%, 8%, 18%)

Oklch

oklch(78.6% 0.113 182.9)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#7A6350

Tangerine · DimGray · Amber Brown

HEX

#7A6350

RGB

rgb(122, 99, 80)

HSL

hsl(27, 21%, 40%)

HSB

hsb(27, 34%, 48%)

CMYK

cmyk(0%, 19%, 34%, 52%)

Oklch

oklch(51.7% 0.041 61.3)

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

#36AD9D

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#36AD9D

RGB

rgb(54, 173, 157)

HSL

hsl(172, 52%, 45%)

HSB

hsb(172, 69%, 68%)

CMYK

cmyk(69%, 0%, 9%, 32%)

Oklch

oklch(67.9% 0.106 182.3)

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

#5C4A3C

Tangerine · DarkOliveGreen · Amber Brown

HEX

#5C4A3C

RGB

rgb(92, 74, 60)

HSL

hsl(26, 21%, 30%)

HSB

hsb(26, 35%, 36%)

CMYK

cmyk(0%, 20%, 35%, 64%)

Oklch

oklch(42.4% 0.033 59.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

857667

667585

Analogous

856666

857667

858566

Triadic

857667

668575

756685

Split-Comp.

857667

668585

666685

Tetradic

857667

668566

667585

856685

Contrast Matrix WCAG 2.1 Contrast

857667	54D1C0	7A6350	36AD9D	5C4A3C
—	2.4 Fail	1.3 Fail	1.6 Fail	1.9 Fail
2.4 Fail	—	3.0 AA Large	1.5 Fail	4.5 AA
1.3 Fail	3.0 AA Large	—	2.0 Fail	1.5 Fail
1.6 Fail	1.5 Fail	2.0 Fail	—	3.0 AA Large
1.9 Fail	4.5 AA	1.5 Fail	3.0 AA Large	—

White BG

4.4AA Large

1.9Fail

5.6AA

2.8Fail

8.4AAA

Black BG

4.8AA

11.3AAA

3.7AA Large

7.6AAA

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7E6B

8A8BC4

707055

6A6BA1

54543F

Deuteranopia

7F816C

837AC5

717356

635AA2

555740

Tritanopia

846D6E

5AC7C8

795859

3CA4A5

5B4243

Achromatopsia

797979

AAAAAA

686868

888888

4E4E4E

Shades & Tints Shades & Tints

#857667

Dark

Light

#54D1C0

Dark

Light

#7A6350

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #857667;
  --color-2: #54d1c0;
  --color-3: #7a6350;
  --color-4: #36ad9d;
  --color-5: #5c4a3c;
}

SCSS

$color-1: #857667;
$color-2: #54d1c0;
$color-3: #7a6350;
$color-4: #36ad9d;
$color-5: #5c4a3c;

TAILWIND

colors: {
  'brand-1': '#857667',
  'brand-2': '#54d1c0',
  'brand-3': '#7a6350',
  'brand-4': '#36ad9d',
  'brand-5': '#5c4a3c',
}

RGB Array

[133, 118, 103], [84, 209, 192], [122, 99, 80], [54, 173, 157], [92, 74, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #857667, #54D1C0, #7A6350, #36AD9D, #5C4A3C 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: #857667; --color-2: #54d1c0; --color-3: #7a6350; --color-4: #36ad9d; --color-5: #5c4a3c. 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