#B4437B + #FF558E + #BFBDC0 + #D3DE20 + #84CF3E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B4437B

Dark Violet · MediumVioletRed · Camellia

HEX

#B4437B

RGB

rgb(180, 67, 123)

HSL

hsl(330, 46%, 48%)

HSB

hsb(330, 63%, 71%)

CMYK

cmyk(0%, 63%, 32%, 29%)

Oklch

oklch(55.4% 0.157 352.7)

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

#FF558E

Rouge · LightCoral · Rose Pink

HEX

#FF558E

RGB

rgb(255, 85, 142)

HSL

hsl(340, 100%, 67%)

HSB

hsb(340, 67%, 100%)

CMYK

cmyk(0%, 67%, 44%, 0%)

Oklch

oklch(69.4% 0.209 3.9)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#BFBDC0

Silver Gray · Silver · Pearl Gray

HEX

#BFBDC0

RGB

rgb(191, 189, 192)

HSL

hsl(280, 2%, 75%)

HSB

hsb(280, 2%, 75%)

CMYK

cmyk(1%, 2%, 0%, 25%)

Oklch

oklch(80.1% 0.005 314.8)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#D3DE20

Autumn Sage · GreenYellow · Honey Gold

HEX

#D3DE20

RGB

rgb(211, 222, 32)

HSL

hsl(63, 75%, 50%)

HSB

hsb(63, 86%, 87%)

CMYK

cmyk(5%, 0%, 86%, 13%)

Oklch

oklch(86.3% 0.187 113.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#84CF3E

Emerald · GreenYellow · Olive Green

HEX

#84CF3E

RGB

rgb(132, 207, 62)

HSL

hsl(91, 60%, 53%)

HSB

hsb(91, 70%, 81%)

CMYK

cmyk(36%, 0%, 70%, 19%)

Oklch

oklch(77.8% 0.190 133.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4437B

42B37A

Analogous

B342B3

B4437B

B34242

Triadic

B4437B

7AB342

427AB3

Split-Comp.

B4437B

42B342

42B3B3

Tetradic

B4437B

B3B342

42B37A

4242B3

Contrast Matrix WCAG 2.1 Contrast

B4437B	FF558E	BFBDC0	D3DE20	84CF3E
—	1.7 Fail	2.8 Fail	3.5 AA Large	2.7 Fail
1.7 Fail	—	1.6 Fail	2.1 Fail	1.6 Fail
2.8 Fail	1.6 Fail	—	1.3 Fail	1.0 Fail
3.5 AA Large	2.1 Fail	1.3 Fail	—	1.3 Fail
2.7 Fail	1.6 Fail	1.0 Fail	1.3 Fail	—

White BG

5.2AA

3.0AA Large

1.9Fail

1.5Fail

1.9Fail

Black BG

4.0AA Large

6.9AA

11.3AAA

14.2AAA

11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

83826D

B5B480

BEBEBF

D8D84E

A4A561

Deuteranopia

8A926A

BFCC7D

BEBEBF

D7D659

A09B6A

Tritanopia

AE6360

F77573

BFBFBF

D4727A

887D83

Achromatopsia

6B6B6B

8E8E8E

BEBEBE

C5C5C5

A8A8A8

Shades & Tints Shades & Tints

#B4437B

Dark

Light

#FF558E

Dark

Light

#BFBDC0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4437b;
  --color-2: #ff558e;
  --color-3: #bfbdc0;
  --color-4: #d3de20;
  --color-5: #84cf3e;
}

SCSS

$color-1: #b4437b;
$color-2: #ff558e;
$color-3: #bfbdc0;
$color-4: #d3de20;
$color-5: #84cf3e;

TAILWIND

colors: {
  'brand-1': '#b4437b',
  'brand-2': '#ff558e',
  'brand-3': '#bfbdc0',
  'brand-4': '#d3de20',
  'brand-5': '#84cf3e',
}

RGB Array

[180, 67, 123], [255, 85, 142], [191, 189, 192], [211, 222, 32], [132, 207, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4437B, #FF558E, #BFBDC0, #D3DE20, #84CF3E 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: #b4437b; --color-2: #ff558e; --color-3: #bfbdc0; --color-4: #d3de20; --color-5: #84cf3e. 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