#877169 + #33414B + #412226 + #8D3021 + #A50E4E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#877169

Tangerine · Gray · Amber Brown

HEX

#877169

RGB

rgb(135, 113, 105)

HSL

hsl(16, 13%, 47%)

HSB

hsb(16, 22%, 53%)

CMYK

cmyk(0%, 16%, 22%, 47%)

Oklch

oklch(56.7% 0.030 41.0)

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

#33414B

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#33414B

RGB

rgb(51, 65, 75)

HSL

hsl(205, 19%, 25%)

HSB

hsb(205, 32%, 29%)

CMYK

cmyk(32%, 13%, 0%, 71%)

Oklch

oklch(36.7% 0.025 239.4)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#412226

Crimson · DarkSlateGray · Deep Berry

HEX

#412226

RGB

rgb(65, 34, 38)

HSL

hsl(352, 31%, 19%)

HSB

hsb(352, 48%, 25%)

CMYK

cmyk(0%, 48%, 42%, 75%)

Oklch

oklch(29.5% 0.048 12.1)

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

#8D3021

Vermilion · Brown · Wine Red

HEX

#8D3021

RGB

rgb(141, 48, 33)

HSL

hsl(8, 62%, 34%)

HSB

hsb(8, 77%, 55%)

CMYK

cmyk(0%, 66%, 77%, 45%)

Oklch

oklch(44.4% 0.129 31.7)

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

#A50E4E

Dark Violet · Brown · Camellia

HEX

#A50E4E

RGB

rgb(165, 14, 78)

HSL

hsl(335, 84%, 35%)

HSB

hsb(335, 92%, 65%)

CMYK

cmyk(0%, 92%, 53%, 35%)

Oklch

oklch(47.0% 0.182 4.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

877169

687F87

Analogous

876870

877169

878068

Triadic

877169

688771

716887

Split-Comp.

877169

688780

687087

Tetradic

877169

708768

687F87

806887

Contrast Matrix WCAG 2.1 Contrast

877169	33414B	412226	8D3021	A50E4E
—	2.3 Fail	3.1 AA Large	1.8 Fail	1.7 Fail
2.3 Fail	—	1.3 Fail	1.3 Fail	1.4 Fail
3.1 AA Large	1.3 Fail	—	1.7 Fail	1.9 Fail
1.8 Fail	1.3 Fail	1.7 Fail	—	1.1 Fail
1.7 Fail	1.4 Fail	1.9 Fail	1.1 Fail	—

White BG

4.6AA

10.5AAA

14.2AAA

8.1AAA

7.6AAA

Black BG

4.6AA

2.0Fail

1.5Fail

2.6Fail

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D6B

393949

343325

656425

64623F

Deuteranopia

7F806B

383748

353825

6A7126

6C783B

Tritanopia

866C6D

344746

3F2424

882728

9D3230

Achromatopsia

777777

3E3E3E

2C2C2C

4A4A4A

424242

Shades & Tints Shades & Tints

#877169

Dark

Light

#33414B

Dark

Light

#412226

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #877169;
  --color-2: #33414b;
  --color-3: #412226;
  --color-4: #8d3021;
  --color-5: #a50e4e;
}

SCSS

$color-1: #877169;
$color-2: #33414b;
$color-3: #412226;
$color-4: #8d3021;
$color-5: #a50e4e;

TAILWIND

colors: {
  'brand-1': '#877169',
  'brand-2': '#33414b',
  'brand-3': '#412226',
  'brand-4': '#8d3021',
  'brand-5': '#a50e4e',
}

RGB Array

[135, 113, 105], [51, 65, 75], [65, 34, 38], [141, 48, 33], [165, 14, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #877169, #33414B, #412226, #8D3021, #A50E4E 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: #877169; --color-2: #33414b; --color-3: #412226; --color-4: #8d3021; --color-5: #a50e4e. 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