← Back to Editor

#EB3E3B · #B0474C · #9F7B76 · #97AC97 · #BAC196

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

#EB3E3B

Vermilion · Tomato · Passion Red

HEX
#EB3E3B
RGB
rgb(235, 62, 59)
HSL
hsl(1, 81%, 58%)
HSB
hsb(1, 75%, 92%)
CMYK
cmyk(0%, 74%, 75%, 8%)
Oklch
oklch(62.4% 0.210 26.5)

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

#B0474C

Crimson · Sienna · Passion Red

HEX
#B0474C
RGB
rgb(176, 71, 76)
HSL
hsl(357, 43%, 48%)
HSB
hsb(357, 60%, 69%)
CMYK
cmyk(0%, 60%, 57%, 31%)
Oklch
oklch(53.9% 0.137 20.1)

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

#9F7B76

Crimson · Gray · Passion Red

HEX
#9F7B76
RGB
rgb(159, 123, 118)
HSL
hsl(7, 18%, 54%)
HSB
hsb(7, 26%, 62%)
CMYK
cmyk(0%, 23%, 26%, 38%)
Oklch
oklch(61.6% 0.046 27.5)

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

#97AC97

Celadon · DarkSeaGreen · Apple Green

HEX
#97AC97
RGB
rgb(151, 172, 151)
HSL
hsl(120, 11%, 63%)
HSB
hsb(120, 12%, 67%)
CMYK
cmyk(12%, 0%, 12%, 33%)
Oklch
oklch(72.2% 0.038 145.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#BAC196

Willow Green · Tan · Apple Green

HEX
#BAC196
RGB
rgb(186, 193, 150)
HSL
hsl(70, 26%, 67%)
HSB
hsb(70, 22%, 76%)
CMYK
cmyk(4%, 0%, 22%, 24%)
Oklch
oklch(79.4% 0.059 115.3)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EB3E3B
3DE8EB

Analogous

EB3D91
EB3E3B
EB973D

Triadic

EB3E3B
3DEB40
403DEB

Split-Comp.

EB3E3B
3DEB97
3D91EB

Tetradic

EB3E3B
91EB3D
3DE8EB
973DEB

Contrast Matrix WCAG 2.1 Contrast

EB3E3B
B0474C
9F7B76
97AC97
BAC196
—
1.4
Fail
1.1
Fail
1.6
Fail
2.1
Fail
1.4
Fail
—
1.4
Fail
2.2
Fail
2.9
Fail
1.1
Fail
1.4
Fail
—
1.6
Fail
2.0
Fail
1.6
Fail
2.2
Fail
1.6
Fail
—
1.3
Fail
2.1
Fail
2.9
Fail
2.0
Fail
1.3
Fail
—
White BG
4.0AA Large
5.5AA
3.8AA Large
2.4Fail
1.9Fail
Black BG
5.3AA
3.9AA Large
5.6AA
8.7AAA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09F3C
83824B
8F8F77
A0A09C
BDBDA0

Deuteranopia

AAB73C
89914B
929478
9F9D9D
BDBCA3

Tritanopia

E23C3C
AB4A4A
9D7878
98A0A1
BAA9AA

Achromatopsia

717171
676767
858585
A3A3A3
BABABA

Shades & Tints Shades & Tints

#EB3E3B

Dark
Light

#B0474C

Dark
Light

#9F7B76

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eb3e3b;
  --color-2: #b0474c;
  --color-3: #9f7b76;
  --color-4: #97ac97;
  --color-5: #bac196;
}

SCSS

$color-1: #eb3e3b;
$color-2: #b0474c;
$color-3: #9f7b76;
$color-4: #97ac97;
$color-5: #bac196;

TAILWIND

colors: {
  'brand-1': '#eb3e3b',
  'brand-2': '#b0474c',
  'brand-3': '#9f7b76',
  'brand-4': '#97ac97',
  'brand-5': '#bac196',
}

RGB Array

[235, 62, 59], [176, 71, 76], [159, 123, 118], [151, 172, 151], [186, 193, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EB3E3B, #B0474C, #9F7B76, #97AC97, #BAC196 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: #eb3e3b; --color-2: #b0474c; --color-3: #9f7b76; --color-4: #97ac97; --color-5: #bac196. 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