#573737 + #705341 + #876E49 + #B89F44 + #86874E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#573737

Crimson · DarkSlateGray · Wine Red

HEX

#573737

RGB

rgb(87, 55, 55)

HSL

hsl(0, 23%, 28%)

HSB

hsb(0, 37%, 34%)

CMYK

cmyk(0%, 37%, 37%, 66%)

Oklch

oklch(37.5% 0.046 19.5)

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

#705341

Tangerine · DarkOliveGreen · Amber Brown

HEX

#705341

RGB

rgb(112, 83, 65)

HSL

hsl(23, 27%, 35%)

HSB

hsb(23, 42%, 44%)

CMYK

cmyk(0%, 26%, 42%, 56%)

Oklch

oklch(46.8% 0.048 53.0)

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

#876E49

Ochre · DimGray · Amber Brown

HEX

#876E49

RGB

rgb(135, 110, 73)

HSL

hsl(36, 30%, 41%)

HSB

hsb(36, 46%, 53%)

CMYK

cmyk(0%, 19%, 46%, 47%)

Oklch

oklch(55.3% 0.061 76.7)

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

#B89F44

Ochre · GoldenRod · Honey Gold

HEX

#B89F44

RGB

rgb(184, 159, 68)

HSL

hsl(47, 46%, 49%)

HSB

hsb(47, 63%, 72%)

CMYK

cmyk(0%, 14%, 63%, 28%)

Oklch

oklch(70.7% 0.114 93.9)

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

#86874E

Autumn Sage · DimGray · Honey Gold

HEX

#86874E

RGB

rgb(134, 135, 78)

HSL

hsl(61, 27%, 42%)

HSB

hsb(61, 42%, 53%)

CMYK

cmyk(1%, 0%, 42%, 47%)

Oklch

oklch(60.9% 0.078 109.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

573737

375858

Analogous

583747

573737

584737

Triadic

573737

375837

373758

Split-Comp.

573737

375847

374758

Tetradic

573737

475837

375858

473758

Contrast Matrix WCAG 2.1 Contrast

573737	705341	876E49	B89F44	86874E
—	1.5 Fail	2.2 Fail	4.0 AA Large	2.8 Fail
1.5 Fail	—	1.5 Fail	2.7 Fail	1.9 Fail
2.2 Fail	1.5 Fail	—	1.9 Fail	1.3 Fail
4.0 AA Large	2.7 Fail	1.9 Fail	—	1.4 Fail
2.8 Fail	1.9 Fail	1.3 Fail	1.4 Fail	—

White BG

10.5AAA

7.0AA

4.8AA

2.6Fail

3.8AA Large

Black BG

2.0Fail

3.0AA Large

4.4AA Large

8.1AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

494937

636345

7C7C52

ADAD5A

86865C

Deuteranopia

4B4D37

656746

7E8054

AFB05F

86865F

Tritanopia

553737

6F494A

86595B

B76B6F

866769

Achromatopsia

414141

5A5A5A

717171

9C9C9C

808080

Shades & Tints Shades & Tints

#573737

Dark

Light

#705341

Dark

Light

#876E49

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #573737;
  --color-2: #705341;
  --color-3: #876e49;
  --color-4: #b89f44;
  --color-5: #86874e;
}

SCSS

$color-1: #573737;
$color-2: #705341;
$color-3: #876e49;
$color-4: #b89f44;
$color-5: #86874e;

TAILWIND

colors: {
  'brand-1': '#573737',
  'brand-2': '#705341',
  'brand-3': '#876e49',
  'brand-4': '#b89f44',
  'brand-5': '#86874e',
}

RGB Array

[87, 55, 55], [112, 83, 65], [135, 110, 73], [184, 159, 68], [134, 135, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #573737, #705341, #876E49, #B89F44, #86874E 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: #573737; --color-2: #705341; --color-3: #876e49; --color-4: #b89f44; --color-5: #86874e. 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 general-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