#40333B + #592752 + #85175D + #BF1552 + #FA3251 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#40333B

Rose Purple · DarkSlateGray · Raspberry

HEX

#40333B

RGB

rgb(64, 51, 59)

HSL

hsl(323, 11%, 23%)

HSB

hsb(323, 20%, 25%)

CMYK

cmyk(0%, 20%, 8%, 75%)

Oklch

oklch(33.8% 0.023 341.0)

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

#592752

Rose Purple · DarkSlateGray · Eggplant

HEX

#592752

RGB

rgb(89, 39, 82)

HSL

hsl(308, 39%, 25%)

HSB

hsb(308, 56%, 35%)

CMYK

cmyk(0%, 56%, 8%, 65%)

Oklch

oklch(35.9% 0.095 332.9)

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

#85175D

Rose Purple · Purple · Camellia

HEX

#85175D

RGB

rgb(133, 23, 93)

HSL

hsl(322, 71%, 31%)

HSB

hsb(322, 83%, 52%)

CMYK

cmyk(0%, 83%, 30%, 48%)

Oklch

oklch(42.1% 0.158 347.4)

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

#BF1552

Dark Violet · Crimson · Camellia

HEX

#BF1552

RGB

rgb(191, 21, 82)

HSL

hsl(338, 80%, 42%)

HSB

hsb(338, 89%, 75%)

CMYK

cmyk(0%, 89%, 57%, 25%)

Oklch

oklch(52.2% 0.199 8.6)

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

#FA3251

Vermilion · Crimson · Passion Red

HEX

#FA3251

RGB

rgb(250, 50, 81)

HSL

hsl(351, 95%, 59%)

HSB

hsb(351, 80%, 98%)

CMYK

cmyk(0%, 80%, 68%, 2%)

Oklch

oklch(64.3% 0.231 19.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

40333B

344139

Analogous

403441

40333B

413436

Triadic

40333B

3C4134

343C41

Split-Comp.

40333B

364134

344140

Tetradic

40333B

414034

344139

343641

Contrast Matrix WCAG 2.1 Contrast

40333B	592752	85175D	BF1552	FA3251
—	1.0 Fail	1.3 Fail	2.0 Fail	3.2 AA Large
1.0 Fail	—	1.2 Fail	1.9 Fail	3.1 AA Large
1.3 Fail	1.2 Fail	—	1.5 Fail	2.5 Fail
2.0 Fail	1.9 Fail	1.5 Fail	—	1.6 Fail
3.2 AA Large	3.1 AA Large	2.5 Fail	1.6 Fail	—

White BG

12.0AAA

11.4AAA

9.2AAA

6.1AA

3.7AA Large

Black BG

1.8Fail

2.3Fail

3.4AA Large

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A39

434348

55544C

757443

A3A249

Deuteranopia

3B3C39

464A45

5C6448

7F8C40

AFBE48

Tritanopia

3F3837

573F3E

803F3C

B73835

F04442

Achromatopsia

383838

3B3B3B

404040

4F4F4F

717171

Shades & Tints Shades & Tints

#40333B

Dark

Light

#592752

Dark

Light

#85175D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #40333b;
  --color-2: #592752;
  --color-3: #85175d;
  --color-4: #bf1552;
  --color-5: #fa3251;
}

SCSS

$color-1: #40333b;
$color-2: #592752;
$color-3: #85175d;
$color-4: #bf1552;
$color-5: #fa3251;

TAILWIND

colors: {
  'brand-1': '#40333b',
  'brand-2': '#592752',
  'brand-3': '#85175d',
  'brand-4': '#bf1552',
  'brand-5': '#fa3251',
}

RGB Array

[64, 51, 59], [89, 39, 82], [133, 23, 93], [191, 21, 82], [250, 50, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #40333B, #592752, #85175D, #BF1552, #FA3251 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: #40333b; --color-2: #592752; --color-3: #85175d; --color-4: #bf1552; --color-5: #fa3251. 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