← Back to Editor

#875A51 · #CC2F3C · #E8000E · #EB3B3C · #B09089

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

#875A51

Crimson · DimGray · Passion Red

HEX
#875A51
RGB
rgb(135, 90, 81)
HSL
hsl(10, 25%, 42%)
HSB
hsb(10, 40%, 53%)
CMYK
cmyk(0%, 33%, 40%, 47%)
Oklch
oklch(51.4% 0.062 31.8)

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

#CC2F3C

Vermilion · Crimson · Passion Red

HEX
#CC2F3C
RGB
rgb(204, 47, 60)
HSL
hsl(355, 63%, 49%)
HSB
hsb(355, 77%, 80%)
CMYK
cmyk(0%, 77%, 71%, 20%)
Oklch
oklch(55.7% 0.192 22.1)

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

#E8000E

Vermilion · Red · Passion Red

HEX
#E8000E
RGB
rgb(232, 0, 14)
HSL
hsl(356, 100%, 45%)
HSB
hsb(356, 100%, 91%)
CMYK
cmyk(0%, 100%, 94%, 9%)
Oklch
oklch(58.5% 0.239 28.3)

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

#EB3B3C

Vermilion · Crimson · Passion Red

HEX
#EB3B3C
RGB
rgb(235, 59, 60)
HSL
hsl(360, 81%, 58%)
HSB
hsb(360, 75%, 92%)
CMYK
cmyk(0%, 75%, 74%, 8%)
Oklch
oklch(62.1% 0.212 25.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Soft Aurora

#B09089

Peach Pink · DarkGray · Coral Red

HEX
#B09089
RGB
rgb(176, 144, 137)
HSL
hsl(11, 20%, 61%)
HSB
hsb(11, 22%, 69%)
CMYK
cmyk(0%, 18%, 22%, 31%)
Oklch
oklch(68.1% 0.040 32.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

875A51
507D86

Analogous

865062
875A51
867450

Triadic

875A51
508659
595086

Split-Comp.

875A51
508674
506286

Tetradic

875A51
628650
507D86
745086

Contrast Matrix WCAG 2.1 Contrast

875A51
CC2F3C
E8000E
EB3B3C
B09089
—
1.1
Fail
1.2
Fail
1.4
Fail
2.0
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.8
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
2.0
Fail
1.8
Fail
1.6
Fail
1.4
Fail
—
White BG
5.8AA
5.2AA
4.7AA
4.0AA Large
2.9Fail
Black BG
3.6AA Large
4.0AA Large
4.4AA Large
5.2AA
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

747353
888739
84810B
9F9D3C
A2A28B

Deuteranopia

767A54
919D38
91A20A
A9B63C
A4A68B

Tritanopia

855555
C43636
DC0807
E23C3C
AE8C8C

Achromatopsia

666666
5F5F5F
474747
707070
999999

Shades & Tints Shades & Tints

#875A51

Dark
Light

#CC2F3C

Dark
Light

#E8000E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #875a51;
  --color-2: #cc2f3c;
  --color-3: #e8000e;
  --color-4: #eb3b3c;
  --color-5: #b09089;
}

SCSS

$color-1: #875a51;
$color-2: #cc2f3c;
$color-3: #e8000e;
$color-4: #eb3b3c;
$color-5: #b09089;

TAILWIND

colors: {
  'brand-1': '#875a51',
  'brand-2': '#cc2f3c',
  'brand-3': '#e8000e',
  'brand-4': '#eb3b3c',
  'brand-5': '#b09089',
}

RGB Array

[135, 90, 81], [204, 47, 60], [232, 0, 14], [235, 59, 60], [176, 144, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #875A51, #CC2F3C, #E8000E, #EB3B3C, #B09089 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: #875a51; --color-2: #cc2f3c; --color-3: #e8000e; --color-4: #eb3b3c; --color-5: #b09089. 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