#4C293B + #61455D + #8A6D6D + #BD6774 + #F01C78 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4C293B

Rose Purple · DarkSlateGray · Raspberry

HEX

#4C293B

RGB

rgb(76, 41, 59)

HSL

hsl(329, 30%, 23%)

HSB

hsb(329, 46%, 30%)

CMYK

cmyk(0%, 46%, 22%, 70%)

Oklch

oklch(33.3% 0.058 348.6)

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

#61455D

Rose Purple · DimGray · Eggplant

HEX

#61455D

RGB

rgb(97, 69, 93)

HSL

hsl(309, 17%, 33%)

HSB

hsb(309, 29%, 38%)

CMYK

cmyk(0%, 29%, 4%, 62%)

Oklch

oklch(43.0% 0.053 331.5)

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

#8A6D6D

Crimson · Gray · Passion Red

HEX

#8A6D6D

RGB

rgb(138, 109, 109)

HSL

hsl(0, 12%, 48%)

HSB

hsb(0, 21%, 54%)

CMYK

cmyk(0%, 21%, 21%, 46%)

Oklch

oklch(56.3% 0.037 18.3)

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

#BD6774

Crimson · LightCoral · Passion Red

HEX

#BD6774

RGB

rgb(189, 103, 116)

HSL

hsl(351, 39%, 57%)

HSB

hsb(351, 46%, 74%)

CMYK

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

Oklch

oklch(61.5% 0.110 11.2)

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

#F01C78

Dark Violet · DeepPink · Rose Pink

HEX

#F01C78

RGB

rgb(240, 28, 120)

HSL

hsl(334, 88%, 53%)

HSB

hsb(334, 88%, 94%)

CMYK

cmyk(0%, 88%, 50%, 6%)

Oklch

oklch(62.3% 0.240 3.4)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C293B

294C3A

Analogous

4C294C

4C293B

4C292A

Triadic

4C293B

3B4C29

293B4C

Split-Comp.

4C293B

2A4C29

294C4C

Tetradic

4C293B

4C4C29

294C3A

292A4C

Contrast Matrix WCAG 2.1 Contrast

4C293B	61455D	8A6D6D	BD6774	F01C78
—	1.5 Fail	2.7 Fail	3.2 AA Large	3.0 AA Large
1.5 Fail	—	1.8 Fail	2.1 Fail	2.0 Fail
2.7 Fail	1.8 Fail	—	1.2 Fail	1.1 Fail
3.2 AA Large	2.1 Fail	1.2 Fail	—	1.0 Fail
3.0 AA Large	2.0 Fail	1.1 Fail	1.0 Fail	—

White BG

12.4AAA

8.3AAA

4.7AA

3.9AA Large

4.1AA Large

Black BG

1.7Fail

2.5Fail

4.5AA Large

5.4AA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D37

555557

7D7D6D

989771

949262

Deuteranopia

3F4236

575956

7F816D

9DA370

A1B05C

Tritanopia

4A3332

605352

896D6D

B96E6E

E5504C

Achromatopsia

363636

505050

767676

828282

666666

Shades & Tints Shades & Tints

#4C293B

Dark

Light

#61455D

Dark

Light

#8A6D6D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c293b;
  --color-2: #61455d;
  --color-3: #8a6d6d;
  --color-4: #bd6774;
  --color-5: #f01c78;
}

SCSS

$color-1: #4c293b;
$color-2: #61455d;
$color-3: #8a6d6d;
$color-4: #bd6774;
$color-5: #f01c78;

TAILWIND

colors: {
  'brand-1': '#4c293b',
  'brand-2': '#61455d',
  'brand-3': '#8a6d6d',
  'brand-4': '#bd6774',
  'brand-5': '#f01c78',
}

RGB Array

[76, 41, 59], [97, 69, 93], [138, 109, 109], [189, 103, 116], [240, 28, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #4C293B, #61455D, #8A6D6D, #BD6774, #F01C78 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: #4c293b; --color-2: #61455d; --color-3: #8a6d6d; --color-4: #bd6774; --color-5: #f01c78. 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 dark-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