#8F7C56 + #BD7C0B + #F52242 + #154A49 + #2B2D33 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8F7C56

Ochre · Gray · Honey Gold

HEX

#8F7C56

RGB

rgb(143, 124, 86)

HSL

hsl(40, 25%, 45%)

HSB

hsb(40, 40%, 56%)

CMYK

cmyk(0%, 13%, 40%, 44%)

Oklch

oklch(59.4% 0.058 84.2)

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

#BD7C0B

Ochre · DarkGoldenRod · Amber Brown

HEX

#BD7C0B

RGB

rgb(189, 124, 11)

HSL

hsl(38, 89%, 39%)

HSB

hsb(38, 94%, 74%)

CMYK

cmyk(0%, 34%, 94%, 26%)

Oklch

oklch(63.9% 0.134 72.0)

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

#F52242

Vermilion · Crimson · Passion Red

HEX

#F52242

RGB

rgb(245, 34, 66)

HSL

hsl(351, 91%, 55%)

HSB

hsb(351, 86%, 96%)

CMYK

cmyk(0%, 86%, 73%, 4%)

Oklch

oklch(62.3% 0.236 21.3)

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

#154A49

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#154A49

RGB

rgb(21, 74, 73)

HSL

hsl(179, 56%, 19%)

HSB

hsb(179, 72%, 29%)

CMYK

cmyk(72%, 0%, 1%, 71%)

Oklch

oklch(37.5% 0.054 193.3)

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

#2B2D33

Indigo · DarkSlateGray · Dark Stone

HEX

#2B2D33

RGB

rgb(43, 45, 51)

HSL

hsl(225, 9%, 18%)

HSB

hsb(225, 16%, 20%)

CMYK

cmyk(16%, 12%, 0%, 80%)

Oklch

oklch(29.8% 0.011 271.0)

Traditional「Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F7C56

56698F

Analogous

8F6056

8F7C56

868F56

Triadic

8F7C56

568F7C

7C568F

Split-Comp.

8F7C56

56868F

60568F

Tetradic

8F7C56

568F60

56698F

8F5686

Contrast Matrix WCAG 2.1 Contrast

8F7C56	BD7C0B	F52242	154A49	2B2D33
—	1.2 Fail	1.0 Fail	2.5 Fail	3.4 AA Large
1.2 Fail	—	1.2 Fail	2.9 Fail	4.0 AA Large
1.0 Fail	1.2 Fail	—	2.5 Fail	3.4 AA Large
2.5 Fail	2.9 Fail	2.5 Fail	—	1.4 Fail
3.4 AA Large	4.0 AA Large	3.4 AA Large	1.4 Fail	—

White BG

4.0AA Large

3.5AA Large

4.0AA Large

10.0AAA

13.8AAA

Black BG

5.2AA

6.1AA

5.2AA

2.1Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

87875F

A1A026

9A983A

2C2C49

2C2C32

Deuteranopia

888961

A5A92D

A6B638

292549

2C2C31

Tritanopia

8E6668

BA3C41

EA3433

184949

2B3030

Achromatopsia

7D7D7D

838383

656565

3A3A3A

2D2D2D

Shades & Tints Shades & Tints

#8F7C56

Dark

Light

#BD7C0B

Dark

Light

#F52242

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f7c56;
  --color-2: #bd7c0b;
  --color-3: #f52242;
  --color-4: #154a49;
  --color-5: #2b2d33;
}

SCSS

$color-1: #8f7c56;
$color-2: #bd7c0b;
$color-3: #f52242;
$color-4: #154a49;
$color-5: #2b2d33;

TAILWIND

colors: {
  'brand-1': '#8f7c56',
  'brand-2': '#bd7c0b',
  'brand-3': '#f52242',
  'brand-4': '#154a49',
  'brand-5': '#2b2d33',
}

RGB Array

[143, 124, 86], [189, 124, 11], [245, 34, 66], [21, 74, 73], [43, 45, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F7C56, #BD7C0B, #F52242, #154A49, #2B2D33 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: #8f7c56; --color-2: #bd7c0b; --color-3: #f52242; --color-4: #154a49; --color-5: #2b2d33. 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