← Back to Editor

#BF2A2C · #8D395A · #87616C · #93BCB8 · #2B2030

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

#BF2A2C

Vermilion · FireBrick · Passion Red

HEX
#BF2A2C
RGB
rgb(191, 42, 44)
HSL
hsl(359, 64%, 46%)
HSB
hsb(359, 78%, 75%)
CMYK
cmyk(0%, 78%, 77%, 25%)
Oklch
oklch(52.8% 0.185 25.8)

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

#8D395A

Dark Violet · Sienna · Camellia

HEX
#8D395A
RGB
rgb(141, 57, 90)
HSL
hsl(336, 42%, 39%)
HSB
hsb(336, 60%, 55%)
CMYK
cmyk(0%, 60%, 36%, 45%)
Oklch
oklch(46.9% 0.119 358.2)

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

#87616C

Dark Violet · DimGray · Camellia

HEX
#87616C
RGB
rgb(135, 97, 108)
HSL
hsl(343, 16%, 45%)
HSB
hsb(343, 28%, 53%)
CMYK
cmyk(0%, 28%, 20%, 47%)
Oklch
oklch(53.5% 0.052 360.0)

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

#93BCB8

Jade · DarkGray · Lake Green

HEX
#93BCB8
RGB
rgb(147, 188, 184)
HSL
hsl(174, 23%, 66%)
HSB
hsb(174, 22%, 74%)
CMYK
cmyk(22%, 0%, 2%, 26%)
Oklch
oklch(76.4% 0.044 188.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#2B2030

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2B2030
RGB
rgb(43, 32, 48)
HSL
hsl(281, 20%, 16%)
HSB
hsb(281, 33%, 19%)
CMYK
cmyk(10%, 33%, 0%, 81%)
Oklch
oklch(26.4% 0.033 315.1)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF2A2C
2AC0BE

Analogous

C02A78
BF2A2C
C0732A

Triadic

BF2A2C
2DC02A
2A2DC0

Split-Comp.

BF2A2C
2AC073
2A78C0

Tetradic

BF2A2C
78C02A
2AC0BE
732AC0

Contrast Matrix WCAG 2.1 Contrast

BF2A2C
8D395A
87616C
93BCB8
2B2030
—
1.3
Fail
1.1
Fail
2.8
Fail
2.7
Fail
1.3
Fail
—
1.4
Fail
3.5
AA Large
2.1
Fail
1.1
Fail
1.4
Fail
—
2.6
Fail
2.9
Fail
2.8
Fail
3.5
AA Large
2.6
Fail
—
7.5
AAA
2.7
Fail
2.1
Fail
2.9
Fail
7.5
AAA
—
White BG
5.9AA
7.3AAA
5.3AA
2.1Fail
15.5AAA
Black BG
3.6AA Large
2.9Fail
4.0AA Large
10.1AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7D2C
696852
777669
A5A5B9
26262C

Deuteranopia

87922B
6E7450
797C69
A29FB9
27282B

Tritanopia

B82B2B
894C4A
856767
95BABA
2A2928

Achromatopsia

575757
565656
6E6E6E
AFAFAF
252525

Shades & Tints Shades & Tints

#BF2A2C

Dark
Light

#8D395A

Dark
Light

#87616C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf2a2c;
  --color-2: #8d395a;
  --color-3: #87616c;
  --color-4: #93bcb8;
  --color-5: #2b2030;
}

SCSS

$color-1: #bf2a2c;
$color-2: #8d395a;
$color-3: #87616c;
$color-4: #93bcb8;
$color-5: #2b2030;

TAILWIND

colors: {
  'brand-1': '#bf2a2c',
  'brand-2': '#8d395a',
  'brand-3': '#87616c',
  'brand-4': '#93bcb8',
  'brand-5': '#2b2030',
}

RGB Array

[191, 42, 44], [141, 57, 90], [135, 97, 108], [147, 188, 184], [43, 32, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BF2A2C, #8D395A, #87616C, #93BCB8, #2B2030 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: #bf2a2c; --color-2: #8d395a; --color-3: #87616c; --color-4: #93bcb8; --color-5: #2b2030. 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