← Back to Editor

#B42C30 · #952322 · #BBA667 · #C5BD7C · #7EA892

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

#B42C30

Vermilion · Brown · Passion Red

HEX
#B42C30
RGB
rgb(180, 44, 48)
HSL
hsl(358, 61%, 44%)
HSB
hsb(358, 76%, 71%)
CMYK
cmyk(0%, 76%, 73%, 29%)
Oklch
oklch(51.0% 0.172 24.4)

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

#952322

Vermilion · Brown · Wine Red

HEX
#952322
RGB
rgb(149, 35, 34)
HSL
hsl(1, 63%, 36%)
HSB
hsb(1, 77%, 58%)
CMYK
cmyk(0%, 77%, 77%, 42%)
Oklch
oklch(44.4% 0.150 26.2)

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

#BBA667

Ginger · Tan · Sunflower

HEX
#BBA667
RGB
rgb(187, 166, 103)
HSL
hsl(45, 38%, 57%)
HSB
hsb(45, 45%, 73%)
CMYK
cmyk(0%, 11%, 45%, 27%)
Oklch
oklch(72.9% 0.086 91.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C5BD7C

Fresh Green · Tan · Sunflower

HEX
#C5BD7C
RGB
rgb(197, 189, 124)
HSL
hsl(53, 39%, 63%)
HSB
hsb(53, 37%, 77%)
CMYK
cmyk(0%, 4%, 37%, 23%)
Oklch
oklch(79.0% 0.085 102.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#7EA892

Celadon · DarkSeaGreen · Olive Green

HEX
#7EA892
RGB
rgb(126, 168, 146)
HSL
hsl(149, 19%, 58%)
HSB
hsb(149, 25%, 66%)
CMYK
cmyk(25%, 0%, 13%, 34%)
Oklch
oklch(69.5% 0.056 161.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B42C30
2CB5B0

Analogous

B52C75
B42C30
B56C2C

Triadic

B42C30
30B52C
2C30B5

Split-Comp.

B42C30
2CB56C
2C75B5

Tetradic

B42C30
75B52C
2CB5B0
6C2CB5

Contrast Matrix WCAG 2.1 Contrast

B42C30
952322
BBA667
C5BD7C
7EA892
—
1.3
Fail
2.6
Fail
3.3
AA Large
2.4
Fail
1.3
Fail
—
3.4
AA Large
4.3
AA Large
3.1
AA Large
2.6
Fail
3.4
AA Large
—
1.2
Fail
1.1
Fail
3.3
AA Large
4.3
AA Large
1.2
Fail
—
1.4
Fail
2.4
Fail
3.1
AA Large
1.1
Fail
1.4
Fail
—
White BG
6.3AA
8.3AAA
2.4Fail
1.9Fail
2.7Fail
Black BG
3.3AA Large
2.5Fail
8.8AAA
10.9AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

79782F
646322
B2B276
C2C18C
909197

Deuteranopia

818B2F
6A7322
B3B57A
C2C390
8E8B99

Tritanopia

AD2E2E
8F2222
BA8285
C5989B
809C9C

Achromatopsia

555555
454545
A5A5A5
B8B8B8
999999

Shades & Tints Shades & Tints

#B42C30

Dark
Light

#952322

Dark
Light

#BBA667

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b42c30;
  --color-2: #952322;
  --color-3: #bba667;
  --color-4: #c5bd7c;
  --color-5: #7ea892;
}

SCSS

$color-1: #b42c30;
$color-2: #952322;
$color-3: #bba667;
$color-4: #c5bd7c;
$color-5: #7ea892;

TAILWIND

colors: {
  'brand-1': '#b42c30',
  'brand-2': '#952322',
  'brand-3': '#bba667',
  'brand-4': '#c5bd7c',
  'brand-5': '#7ea892',
}

RGB Array

[180, 44, 48], [149, 35, 34], [187, 166, 103], [197, 189, 124], [126, 168, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B42C30, #952322, #BBA667, #C5BD7C, #7EA892 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: #b42c30; --color-2: #952322; --color-3: #bba667; --color-4: #c5bd7c; --color-5: #7ea892. 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