#B10C43 + #D0006C + #5CB2BE + #AE9879 + #58475E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B10C43

Dark Violet · FireBrick · Camellia

HEX

#B10C43

RGB

rgb(177, 12, 67)

HSL

hsl(340, 87%, 37%)

HSB

hsb(340, 93%, 69%)

CMYK

cmyk(0%, 93%, 62%, 31%)

Oklch

oklch(48.9% 0.190 11.8)

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

#D0006C

Rose Purple · MediumVioletRed · Camellia

HEX

#D0006C

RGB

rgb(208, 0, 108)

HSL

hsl(329, 100%, 41%)

HSB

hsb(329, 100%, 82%)

CMYK

cmyk(0%, 100%, 48%, 18%)

Oklch

oklch(55.5% 0.225 0.7)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#5CB2BE

Slate Blue · MediumAquaMarine · Lake Green

HEX

#5CB2BE

RGB

rgb(92, 178, 190)

HSL

hsl(187, 43%, 55%)

HSB

hsb(187, 52%, 75%)

CMYK

cmyk(52%, 6%, 0%, 25%)

Oklch

oklch(71.5% 0.085 207.4)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#AE9879

Ginger · Tan · Warm Sun

HEX

#AE9879

RGB

rgb(174, 152, 121)

HSL

hsl(35, 25%, 58%)

HSB

hsb(35, 30%, 68%)

CMYK

cmyk(0%, 13%, 30%, 32%)

Oklch

oklch(69.1% 0.050 76.2)

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

#58475E

Dark Plum · DimGray · Eggplant

HEX

#58475E

RGB

rgb(88, 71, 94)

HSL

hsl(284, 14%, 32%)

HSB

hsb(284, 24%, 37%)

CMYK

cmyk(6%, 24%, 0%, 63%)

Oklch

oklch(42.4% 0.043 317.2)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B10C43

0CB07A

Analogous

B00C95

B10C43

B0280C

Triadic

B10C43

43B00C

0C43B0

Split-Comp.

B10C43

0CB028

0C95B0

Tetradic

B10C43

95B00C

0CB07A

280CB0

Contrast Matrix WCAG 2.1 Contrast

B10C43	D0006C	5CB2BE	AE9879	58475E
—	1.3 Fail	2.9 Fail	2.5 Fail	1.2 Fail
1.3 Fail	—	2.2 Fail	1.9 Fail	1.6 Fail
2.9 Fail	2.2 Fail	—	1.1 Fail	3.5 AA Large
2.5 Fail	1.9 Fail	1.1 Fail	—	3.1 AA Large
1.2 Fail	1.6 Fail	3.5 AA Large	3.1 AA Large	—

White BG

7.0AA

5.4AA

2.5Fail

2.8Fail

8.5AAA

Black BG

3.0AA Large

3.9AA Large

8.6AAA

7.6AAA

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6836

767452

8182BB

A4A481

515058

Deuteranopia

737F33

82924C

7C76BA

A6A782

525357

Tritanopia

A92B29

C63D39

60B9B8

AD8688

575453

Achromatopsia

444444

4B4B4B

9A9A9A

9B9B9B

4F4F4F

Shades & Tints Shades & Tints

#B10C43

Dark

Light

#D0006C

Dark

Light

#5CB2BE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b10c43;
  --color-2: #d0006c;
  --color-3: #5cb2be;
  --color-4: #ae9879;
  --color-5: #58475e;
}

SCSS

$color-1: #b10c43;
$color-2: #d0006c;
$color-3: #5cb2be;
$color-4: #ae9879;
$color-5: #58475e;

TAILWIND

colors: {
  'brand-1': '#b10c43',
  'brand-2': '#d0006c',
  'brand-3': '#5cb2be',
  'brand-4': '#ae9879',
  'brand-5': '#58475e',
}

RGB Array

[177, 12, 67], [208, 0, 108], [92, 178, 190], [174, 152, 121], [88, 71, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B10C43, #D0006C, #5CB2BE, #AE9879, #58475E 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: #b10c43; --color-2: #d0006c; --color-3: #5cb2be; --color-4: #ae9879; --color-5: #58475e. 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