#D62F51 + #322138 + #2C303B + #ACB058 + #C8CE34 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D62F51

Vermilion · Crimson · Passion Red

HEX

#D62F51

RGB

rgb(214, 47, 81)

HSL

hsl(348, 67%, 51%)

HSB

hsb(348, 78%, 84%)

CMYK

cmyk(0%, 78%, 62%, 16%)

Oklch

oklch(57.9% 0.201 15.4)

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

#322138

Dark Plum · DarkSlateGray · Dark Purple

HEX

#322138

RGB

rgb(50, 33, 56)

HSL

hsl(284, 26%, 17%)

HSB

hsb(284, 41%, 22%)

CMYK

cmyk(11%, 41%, 0%, 78%)

Oklch

oklch(27.9% 0.047 317.0)

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

#2C303B

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#2C303B

RGB

rgb(44, 48, 59)

HSL

hsl(224, 15%, 20%)

HSB

hsb(224, 25%, 23%)

CMYK

cmyk(25%, 19%, 0%, 77%)

Oklch

oklch(31.0% 0.021 269.5)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#ACB058

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#ACB058

RGB

rgb(172, 176, 88)

HSL

hsl(63, 36%, 52%)

HSB

hsb(63, 50%, 69%)

CMYK

cmyk(2%, 0%, 50%, 31%)

Oklch

oklch(73.5% 0.112 111.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#C8CE34

Autumn Sage · GoldenRod · Sunflower

HEX

#C8CE34

RGB

rgb(200, 206, 52)

HSL

hsl(62, 61%, 51%)

HSB

hsb(62, 75%, 81%)

CMYK

cmyk(3%, 0%, 75%, 19%)

Oklch

oklch(82.1% 0.166 111.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D62F51

2ED6B4

Analogous

D62EA4

D62F51

D6612E

Triadic

D62F51

50D62E

2E50D6

Split-Comp.

D62F51

2ED661

2EA4D6

Tetradic

D62F51

A4D62E

2ED6B4

612ED6

Contrast Matrix WCAG 2.1 Contrast

D62F51	322138	2C303B	ACB058	C8CE34
—	3.1 AA Large	2.8 Fail	2.1 Fail	2.8 Fail
3.1 AA Large	—	1.1 Fail	6.5 AA	8.7 AAA
2.8 Fail	1.1 Fail	—	5.7 AA	7.7 AAA
2.1 Fail	6.5 AA	5.7 AA	—	1.4 Fail
2.8 Fail	8.7 AAA	7.7 AAA	1.4 Fail	—

White BG

4.8AA

14.9AAA

13.2AAA

2.3Fail

1.7Fail

Black BG

4.4AA Large

1.4Fail

1.6Fail

9.1AAA

12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8C49

2B2A32

2E2E38

AEAE6D

CBCB59

Deuteranopia

97A447

2C2D31

2E2D38

AEAD72

CACA62

Tritanopia

CE4241

312E2D

2C3636

AC7E82

C8777D

Achromatopsia

656565

292929

303030

A5A5A5

BBBBBB

Shades & Tints Shades & Tints

#D62F51

Dark

Light

#322138

Dark

Light

#2C303B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d62f51;
  --color-2: #322138;
  --color-3: #2c303b;
  --color-4: #acb058;
  --color-5: #c8ce34;
}

SCSS

$color-1: #d62f51;
$color-2: #322138;
$color-3: #2c303b;
$color-4: #acb058;
$color-5: #c8ce34;

TAILWIND

colors: {
  'brand-1': '#d62f51',
  'brand-2': '#322138',
  'brand-3': '#2c303b',
  'brand-4': '#acb058',
  'brand-5': '#c8ce34',
}

RGB Array

[214, 47, 81], [50, 33, 56], [44, 48, 59], [172, 176, 88], [200, 206, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D62F51, #322138, #2C303B, #ACB058, #C8CE34 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: #d62f51; --color-2: #322138; --color-3: #2c303b; --color-4: #acb058; --color-5: #c8ce34. 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