← Back to Editor

#575045 · #8C5353 · #BA5454 · #BA7B54 · #BAB554

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#575045

Ochre · DarkOliveGreen · Amber Brown

HEX
#575045
RGB
rgb(87, 80, 69)
HSL
hsl(37, 12%, 31%)
HSB
hsb(37, 21%, 34%)
CMYK
cmyk(0%, 8%, 21%, 66%)
Oklch
oklch(43.5% 0.020 79.2)

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

#8C5353

Crimson · Sienna · Passion Red

HEX
#8C5353
RGB
rgb(140, 83, 83)
HSL
hsl(0, 26%, 44%)
HSB
hsb(0, 41%, 55%)
CMYK
cmyk(0%, 41%, 41%, 45%)
Oklch
oklch(50.8% 0.076 20.1)

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

#BA5454

Crimson · Sienna · Passion Red

HEX
#BA5454
RGB
rgb(186, 84, 84)
HSL
hsl(0, 43%, 53%)
HSB
hsb(0, 55%, 73%)
CMYK
cmyk(0%, 55%, 55%, 27%)
Oklch
oklch(57.4% 0.132 22.1)

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

#BA7B54

Tangerine · Chocolate · Warm Sun

HEX
#BA7B54
RGB
rgb(186, 123, 84)
HSL
hsl(23, 43%, 53%)
HSB
hsb(23, 55%, 73%)
CMYK
cmyk(0%, 34%, 55%, 27%)
Oklch
oklch(64.0% 0.095 52.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#BAB554

Autumn Sage · Tan · Sunflower

HEX
#BAB554
RGB
rgb(186, 181, 84)
HSL
hsl(57, 43%, 53%)
HSB
hsb(57, 55%, 73%)
CMYK
cmyk(0%, 3%, 55%, 27%)
Oklch
oklch(75.7% 0.120 106.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

575045
464D59

Analogous

594846
575045
565946

Triadic

575045
465951
514659

Split-Comp.

575045
465659
484659

Tetradic

575045
465948
464D59
594656

Contrast Matrix WCAG 2.1 Contrast

575045
8C5353
BA5454
BA7B54
BAB554
—
1.3
Fail
1.7
Fail
2.3
Fail
3.7
AA Large
1.3
Fail
—
1.3
Fail
1.7
Fail
2.8
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
2.2
Fail
2.3
Fail
1.7
Fail
1.3
Fail
—
1.6
Fail
3.7
AA Large
2.8
Fail
2.2
Fail
1.6
Fail
—
White BG
8.0AAA
6.0AA
4.7AA
3.5AA Large
2.1Fail
Black BG
2.6Fail
3.5AA Large
4.5AA Large
6.0AA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

545448
737353
8E8D54
9F9E5D
B8B86B

Deuteranopia

545548
777B53
949B54
A2A760
B8B971

Tritanopia

574A4A
895353
B55454
B76567
BA7E82

Achromatopsia

515151
646464
727272
898989
ABABAB

Shades & Tints Shades & Tints

#575045

Dark
Light

#8C5353

Dark
Light

#BA5454

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #575045;
  --color-2: #8c5353;
  --color-3: #ba5454;
  --color-4: #ba7b54;
  --color-5: #bab554;
}

SCSS

$color-1: #575045;
$color-2: #8c5353;
$color-3: #ba5454;
$color-4: #ba7b54;
$color-5: #bab554;

TAILWIND

colors: {
  'brand-1': '#575045',
  'brand-2': '#8c5353',
  'brand-3': '#ba5454',
  'brand-4': '#ba7b54',
  'brand-5': '#bab554',
}

RGB Array

[87, 80, 69], [140, 83, 83], [186, 84, 84], [186, 123, 84], [186, 181, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #575045, #8C5353, #BA5454, #BA7B54, #BAB554 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: #575045; --color-2: #8c5353; --color-3: #ba5454; --color-4: #ba7b54; --color-5: #bab554. 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 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