← Back to Editor

#BF8971 · #9E887A · #5C7E80 · #291B1A · #DE3C2F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#BF8971

Tangerine · DarkSalmon · Warm Sun

HEX
#BF8971
RGB
rgb(191, 137, 113)
HSL
hsl(18, 38%, 60%)
HSB
hsb(18, 41%, 75%)
CMYK
cmyk(0%, 28%, 41%, 25%)
Oklch
oklch(67.7% 0.075 44.9)

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

#9E887A

Tangerine · Gray · Warm Sun

HEX
#9E887A
RGB
rgb(158, 136, 122)
HSL
hsl(23, 16%, 55%)
HSB
hsb(23, 23%, 62%)
CMYK
cmyk(0%, 14%, 23%, 38%)
Oklch
oklch(64.3% 0.034 54.4)

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

#5C7E80

Slate Blue · SlateGray · Mint Ice

HEX
#5C7E80
RGB
rgb(92, 126, 128)
HSL
hsl(183, 16%, 43%)
HSB
hsb(183, 28%, 50%)
CMYK
cmyk(28%, 2%, 0%, 50%)
Oklch
oklch(56.8% 0.039 200.7)

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

#291B1A

Crimson · Black · Deep Berry

HEX
#291B1A
RGB
rgb(41, 27, 26)
HSL
hsl(4, 22%, 13%)
HSB
hsb(4, 37%, 16%)
CMYK
cmyk(0%, 34%, 37%, 84%)
Oklch
oklch(23.9% 0.022 23.5)

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

#DE3C2F

Vermilion · Crimson · Passion Red

HEX
#DE3C2F
RGB
rgb(222, 60, 47)
HSL
hsl(4, 73%, 53%)
HSB
hsb(4, 79%, 87%)
CMYK
cmyk(0%, 73%, 79%, 13%)
Oklch
oklch(59.8% 0.201 29.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF8971
72A9C0

Analogous

C07282
BF8971
C0B072

Triadic

BF8971
72C089
8972C0

Split-Comp.

BF8971
72C0B0
7282C0

Tetradic

BF8971
82C072
72A9C0
B072C0

Contrast Matrix WCAG 2.1 Contrast

BF8971
9E887A
5C7E80
291B1A
DE3C2F
—
1.1
Fail
1.5
Fail
5.6
AA
1.5
Fail
1.1
Fail
—
1.3
Fail
4.9
AA
1.3
Fail
1.5
Fail
1.3
Fail
—
3.8
AA Large
1.0
Fail
5.6
AA
4.9
AA
3.8
AA Large
—
3.8
AA Large
1.5
Fail
1.3
Fail
1.0
Fail
3.8
AA Large
—
White BG
3.0Fail
3.4AA Large
4.4AA Large
16.6AAA
4.4AA Large
Black BG
7.0AAA
6.3AA
4.8AA
1.3Fail
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A777
94947D
6B6B80
23231A
989632

Deuteranopia

ABAF78
96977E
69667F
24251A
A1AD33

Tritanopia

BC7B7C
9D8081
5E7F7F
281A1A
D63535

Achromatopsia

969696
8D8D8D
747474
1F1F1F
6B6B6B

Shades & Tints Shades & Tints

#BF8971

Dark
Light

#9E887A

Dark
Light

#5C7E80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf8971;
  --color-2: #9e887a;
  --color-3: #5c7e80;
  --color-4: #291b1a;
  --color-5: #de3c2f;
}

SCSS

$color-1: #bf8971;
$color-2: #9e887a;
$color-3: #5c7e80;
$color-4: #291b1a;
$color-5: #de3c2f;

TAILWIND

colors: {
  'brand-1': '#bf8971',
  'brand-2': '#9e887a',
  'brand-3': '#5c7e80',
  'brand-4': '#291b1a',
  'brand-5': '#de3c2f',
}

RGB Array

[191, 137, 113], [158, 136, 122], [92, 126, 128], [41, 27, 26], [222, 60, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BF8971, #9E887A, #5C7E80, #291B1A, #DE3C2F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #bf8971; --color-2: #9e887a; --color-3: #5c7e80; --color-4: #291b1a; --color-5: #de3c2f. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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