#B50647 + #882D47 + #6A4450 + #4E5260 + #7C888C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B50647

Dark Violet · Crimson · Camellia

HEX

#B50647

RGB

rgb(181, 6, 71)

HSL

hsl(338, 94%, 37%)

HSB

hsb(338, 97%, 71%)

CMYK

cmyk(0%, 97%, 61%, 29%)

Oklch

oklch(49.6% 0.196 10.5)

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

#882D47

Dark Violet · Brown · Camellia

HEX

#882D47

RGB

rgb(136, 45, 71)

HSL

hsl(343, 50%, 35%)

HSB

hsb(343, 67%, 53%)

CMYK

cmyk(0%, 67%, 48%, 47%)

Oklch

oklch(43.9% 0.126 6.4)

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

#6A4450

Dark Violet · DimGray · Camellia

HEX

#6A4450

RGB

rgb(106, 68, 80)

HSL

hsl(341, 22%, 34%)

HSB

hsb(341, 36%, 42%)

CMYK

cmyk(0%, 36%, 25%, 58%)

Oklch

oklch(43.4% 0.055 359.1)

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

#4E5260

Indigo · DarkSlateGray · Prussian Blue

HEX

#4E5260

RGB

rgb(78, 82, 96)

HSL

hsl(227, 10%, 34%)

HSB

hsb(227, 19%, 38%)

CMYK

cmyk(19%, 15%, 0%, 62%)

Oklch

oklch(44.0% 0.024 272.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#7C888C

Ash · LightSlateGray · Warm Gray

HEX

#7C888C

RGB

rgb(124, 136, 140)

HSL

hsl(195, 7%, 52%)

HSB

hsb(195, 11%, 55%)

CMYK

cmyk(11%, 3%, 0%, 45%)

Oklch

oklch(61.8% 0.015 219.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B50647

06B776

Analogous

B7069F

B50647

B71D06

Triadic

B50647

47B706

0647B7

Split-Comp.

B50647

06B71D

069FB7

Tetradic

B50647

9FB706

06B776

1D06B7

Contrast Matrix WCAG 2.1 Contrast

B50647	882D47	6A4450	4E5260	7C888C
—	1.2 Fail	1.2 Fail	1.1 Fail	1.9 Fail
1.2 Fail	—	1.0 Fail	1.1 Fail	2.3 Fail
1.2 Fail	1.0 Fail	—	1.1 Fail	2.3 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	2.1 Fail
1.9 Fail	2.3 Fail	2.3 Fail	2.1 Fail	—

White BG

6.8AA

8.4AAA

8.2AAA

7.8AAA

3.6AA Large

Black BG

3.1AA Large

2.5Fail

2.6Fail

2.7Fail

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

696837

616041

5A594D

50505D

81818B

Deuteranopia

738133

666D3F

5C5F4C

504F5C

81808B

Tritanopia

AC2B28

833C3B

684B4A

4E5A59

7D8A8A

Achromatopsia

424242

4B4B4B

515151

525252

858585

Shades & Tints Shades & Tints

#B50647

Dark

Light

#882D47

Dark

Light

#6A4450

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b50647;
  --color-2: #882d47;
  --color-3: #6a4450;
  --color-4: #4e5260;
  --color-5: #7c888c;
}

SCSS

$color-1: #b50647;
$color-2: #882d47;
$color-3: #6a4450;
$color-4: #4e5260;
$color-5: #7c888c;

TAILWIND

colors: {
  'brand-1': '#b50647',
  'brand-2': '#882d47',
  'brand-3': '#6a4450',
  'brand-4': '#4e5260',
  'brand-5': '#7c888c',
}

RGB Array

[181, 6, 71], [136, 45, 71], [106, 68, 80], [78, 82, 96], [124, 136, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B50647, #882D47, #6A4450, #4E5260, #7C888C is ideal for: tech websites, dark mode UIs, game UIs. 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: #b50647; --color-2: #882d47; --color-3: #6a4450; --color-4: #4e5260; --color-5: #7c888c. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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