← Back to Editor

#EB3F3F · #B8876E · #AB9B80 · #8C9485 · #54948C

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 Library

Color Details Color Details

#EB3F3F

Vermilion · Tomato · Passion Red

HEX
#EB3F3F
RGB
rgb(235, 63, 63)
HSL
hsl(0, 81%, 58%)
HSB
hsb(0, 73%, 92%)
CMYK
cmyk(0%, 73%, 73%, 8%)
Oklch
oklch(62.5% 0.209 25.6)

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

#B8876E

Tangerine · DarkSalmon · Warm Sun

HEX
#B8876E
RGB
rgb(184, 135, 110)
HSL
hsl(20, 34%, 58%)
HSB
hsb(20, 40%, 72%)
CMYK
cmyk(0%, 27%, 40%, 28%)
Oklch
oklch(66.5% 0.070 48.1)

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

#AB9B80

Ginger · DarkGray · Warm Sun

HEX
#AB9B80
RGB
rgb(171, 155, 128)
HSL
hsl(38, 20%, 59%)
HSB
hsb(38, 25%, 67%)
CMYK
cmyk(0%, 9%, 25%, 33%)
Oklch
oklch(69.6% 0.042 80.8)

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

#8C9485

Ash · Gray · Warm Gray

HEX
#8C9485
RGB
rgb(140, 148, 133)
HSL
hsl(92, 7%, 55%)
HSB
hsb(92, 10%, 58%)
CMYK
cmyk(5%, 0%, 10%, 42%)
Oklch
oklch(65.6% 0.024 130.2)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#54948C

Mineral Blue · CadetBlue · Mint Ice

HEX
#54948C
RGB
rgb(84, 148, 140)
HSL
hsl(173, 28%, 45%)
HSB
hsb(173, 43%, 58%)
CMYK
cmyk(43%, 0%, 5%, 42%)
Oklch
oklch(62.1% 0.067 185.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EB3F3F
3DEBEB

Analogous

EB3D94
EB3F3F
EB943D

Triadic

EB3F3F
3DEB3D
3D3DEB

Split-Comp.

EB3F3F
3DEB94
3D94EB

Tetradic

EB3F3F
94EB3D
3DEBEB
943DEB

Contrast Matrix WCAG 2.1 Contrast

EB3F3F
B8876E
AB9B80
8C9485
54948C
—
1.3
Fail
1.5
Fail
1.3
Fail
1.1
Fail
1.3
Fail
—
1.1
Fail
1.0
Fail
1.1
Fail
1.5
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.3
Fail
1.0
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.3
Fail
1.1
Fail
—
White BG
4.0AA Large
3.1AA Large
2.7Fail
3.1AA Large
3.5AA Large
Black BG
5.3AA
6.7AA
7.7AAA
6.7AA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A19F3F
A3A274
A4A487
8F9089
70708E

Deuteranopia

ABB73F
A6A976
A5A688
8F8E8A
6C678E

Tritanopia

E23F3F
B6797A
AA8C8D
8C8B8C
578F90

Achromatopsia

727272
939393
9D9D9D
909090
808080

Shades & Tints Shades & Tints

#EB3F3F

Dark
Light

#B8876E

Dark
Light

#AB9B80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eb3f3f;
  --color-2: #b8876e;
  --color-3: #ab9b80;
  --color-4: #8c9485;
  --color-5: #54948c;
}

SCSS

$color-1: #eb3f3f;
$color-2: #b8876e;
$color-3: #ab9b80;
$color-4: #8c9485;
$color-5: #54948c;

TAILWIND

colors: {
  'brand-1': '#eb3f3f',
  'brand-2': '#b8876e',
  'brand-3': '#ab9b80',
  'brand-4': '#8c9485',
  'brand-5': '#54948c',
}

RGB Array

[235, 63, 63], [184, 135, 110], [171, 155, 128], [140, 148, 133], [84, 148, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EB3F3F, #B8876E, #AB9B80, #8C9485, #54948C 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: #eb3f3f; --color-2: #b8876e; --color-3: #ab9b80; --color-4: #8c9485; --color-5: #54948c. 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