#BD1E50 + #6D122F + #380F1C + #3D252D + #57474C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BD1E50

Dark Violet · Crimson · Camellia

HEX

#BD1E50

RGB

rgb(189, 30, 80)

HSL

hsl(341, 73%, 43%)

HSB

hsb(341, 84%, 74%)

CMYK

cmyk(0%, 84%, 58%, 26%)

Oklch

oklch(52.2% 0.192 9.9)

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

#6D122F

Dark Violet · Maroon · Raspberry

HEX

#6D122F

RGB

rgb(109, 18, 47)

HSL

hsl(341, 72%, 25%)

HSB

hsb(341, 83%, 43%)

CMYK

cmyk(0%, 83%, 57%, 57%)

Oklch

oklch(35.5% 0.125 8.1)

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

#380F1C

Dark Violet · Black · Raspberry

HEX

#380F1C

RGB

rgb(56, 15, 28)

HSL

hsl(341, 58%, 14%)

HSB

hsb(341, 73%, 22%)

CMYK

cmyk(0%, 73%, 50%, 78%)

Oklch

oklch(24.2% 0.067 3.9)

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

#3D252D

Dark Violet · DarkSlateGray · Raspberry

HEX

#3D252D

RGB

rgb(61, 37, 45)

HSL

hsl(340, 24%, 19%)

HSB

hsb(340, 39%, 24%)

CMYK

cmyk(0%, 39%, 26%, 76%)

Oklch

oklch(29.8% 0.038 358.1)

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

#57474C

Dark Violet · DarkSlateGray · Camellia

HEX

#57474C

RGB

rgb(87, 71, 76)

HSL

hsl(341, 10%, 31%)

HSB

hsb(341, 18%, 34%)

CMYK

cmyk(0%, 18%, 13%, 66%)

Oklch

oklch(41.6% 0.023 357.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BD1E50

1EBE8B

Analogous

BE1EA0

BD1E50

BE3B1E

Triadic

BD1E50

50BE1E

1E50BE

Split-Comp.

BD1E50

1EBE3B

1EA0BE

Tetradic

BD1E50

A0BE1E

1EBE8B

3B1EBE

Contrast Matrix WCAG 2.1 Contrast

BD1E50	6D122F	380F1C	3D252D	57474C
—	1.9 Fail	2.8 Fail	2.3 Fail	1.4 Fail
1.9 Fail	—	1.4 Fail	1.2 Fail	1.4 Fail
2.8 Fail	1.4 Fail	—	1.2 Fail	1.9 Fail
2.3 Fail	1.2 Fail	1.2 Fail	—	1.6 Fail
1.4 Fail	1.4 Fail	1.9 Fail	1.6 Fail	—

White BG

6.1AA

11.8AAA

16.8AAA

14.0AAA

8.7AAA

Black BG

3.5AA Large

1.8Fail

1.3Fail

1.5Fail

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

787744

464528

262619

33322B

50504B

Deuteranopia

818D41

4B5226

292C18

34362B

51524B

Tritanopia

B53A38

682221

361616

3C2A29

564A4A

Achromatopsia

535353

313131

1D1D1D

2D2D2D

4C4C4C

Shades & Tints Shades & Tints

#BD1E50

Dark

Light

#6D122F

Dark

Light

#380F1C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bd1e50;
  --color-2: #6d122f;
  --color-3: #380f1c;
  --color-4: #3d252d;
  --color-5: #57474c;
}

SCSS

$color-1: #bd1e50;
$color-2: #6d122f;
$color-3: #380f1c;
$color-4: #3d252d;
$color-5: #57474c;

TAILWIND

colors: {
  'brand-1': '#bd1e50',
  'brand-2': '#6d122f',
  'brand-3': '#380f1c',
  'brand-4': '#3d252d',
  'brand-5': '#57474c',
}

RGB Array

[189, 30, 80], [109, 18, 47], [56, 15, 28], [61, 37, 45], [87, 71, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BD1E50, #6D122F, #380F1C, #3D252D, #57474C 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: #bd1e50; --color-2: #6d122f; --color-3: #380f1c; --color-4: #3d252d; --color-5: #57474c. 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