#4B2F30 + #8E2478 + #DA1D72 + #D5B429 + #776166 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4B2F30

Crimson · DarkSlateGray · Wine Red

HEX

#4B2F30

RGB

rgb(75, 47, 48)

HSL

hsl(358, 23%, 24%)

HSB

hsb(358, 37%, 29%)

CMYK

cmyk(0%, 37%, 36%, 71%)

Oklch

oklch(33.9% 0.041 17.1)

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

#8E2478

Rose Purple · Purple · Eggplant

HEX

#8E2478

RGB

rgb(142, 36, 120)

HSL

hsl(312, 60%, 35%)

HSB

hsb(312, 75%, 56%)

CMYK

cmyk(0%, 75%, 15%, 44%)

Oklch

oklch(46.0% 0.168 337.7)

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

#DA1D72

Dark Violet · MediumVioletRed · Camellia

HEX

#DA1D72

RGB

rgb(218, 29, 114)

HSL

hsl(333, 77%, 48%)

HSB

hsb(333, 87%, 85%)

CMYK

cmyk(0%, 87%, 48%, 15%)

Oklch

oklch(58.3% 0.222 1.6)

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

#D5B429

Ochre · GoldenRod · Honey Gold

HEX

#D5B429

RGB

rgb(213, 180, 41)

HSL

hsl(48, 68%, 50%)

HSB

hsb(48, 81%, 84%)

CMYK

cmyk(0%, 15%, 81%, 16%)

Oklch

oklch(77.7% 0.149 94.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#776166

Crimson · DimGray · Passion Red

HEX

#776166

RGB

rgb(119, 97, 102)

HSL

hsl(346, 10%, 42%)

HSB

hsb(346, 18%, 47%)

CMYK

cmyk(0%, 18%, 14%, 53%)

Oklch

oklch(51.6% 0.029 2.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B2F30

2F4B4A

Analogous

4B2F3E

4B2F30

4B3C2F

Triadic

4B2F30

304B2F

2F304B

Split-Comp.

4B2F30

2F4B3C

2F3E4B

Tetradic

4B2F30

3E4B2F

2F4B4A

3C2F4B

Contrast Matrix WCAG 2.1 Contrast

4B2F30	8E2478	DA1D72	D5B429	776166
—	1.5 Fail	2.5 Fail	5.9 AA	2.1 Fail
1.5 Fail	—	1.6 Fail	3.9 AA Large	1.4 Fail
2.5 Fail	1.6 Fail	—	2.4 Fail	1.2 Fail
5.9 AA	3.9 AA Large	2.4 Fail	—	2.8 Fail
2.1 Fail	1.4 Fail	1.2 Fail	2.8 Fail	—

White BG

12.0AAA

7.9AAA

4.8AA

2.0Fail

5.7AA

Black BG

1.7Fail

2.7Fail

4.4AA Large

10.4AAA

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F30

605F64

88865D

C7C64B

6D6D65

Deuteranopia

414330

666E5F

93A159

C9CB53

6F7064

Tritanopia

4A3030

895450

D14D4A

D3656B

766464

Achromatopsia

373737

4D4D4D

5F5F5F

AEAEAE

686868

Shades & Tints Shades & Tints

#4B2F30

Dark

Light

#8E2478

Dark

Light

#DA1D72

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b2f30;
  --color-2: #8e2478;
  --color-3: #da1d72;
  --color-4: #d5b429;
  --color-5: #776166;
}

SCSS

$color-1: #4b2f30;
$color-2: #8e2478;
$color-3: #da1d72;
$color-4: #d5b429;
$color-5: #776166;

TAILWIND

colors: {
  'brand-1': '#4b2f30',
  'brand-2': '#8e2478',
  'brand-3': '#da1d72',
  'brand-4': '#d5b429',
  'brand-5': '#776166',
}

RGB Array

[75, 47, 48], [142, 36, 120], [218, 29, 114], [213, 180, 41], [119, 97, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B2F30, #8E2478, #DA1D72, #D5B429, #776166 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: #4b2f30; --color-2: #8e2478; --color-3: #da1d72; --color-4: #d5b429; --color-5: #776166. 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