#DE3368 + #BD3568 + #803C69 + #4F3855 + #393341 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DE3368

Dark Violet · MediumVioletRed · Rose Pink

HEX

#DE3368

RGB

rgb(222, 51, 104)

HSL

hsl(341, 72%, 54%)

HSB

hsb(341, 77%, 87%)

CMYK

cmyk(0%, 77%, 53%, 13%)

Oklch

oklch(60.1% 0.207 8.2)

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

#BD3568

Dark Violet · MediumVioletRed · Camellia

HEX

#BD3568

RGB

rgb(189, 53, 104)

HSL

hsl(338, 56%, 47%)

HSB

hsb(338, 72%, 74%)

CMYK

cmyk(0%, 72%, 45%, 26%)

Oklch

oklch(54.7% 0.176 2.3)

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

#803C69

Rose Purple · DimGray · Camellia

HEX

#803C69

RGB

rgb(128, 60, 105)

HSL

hsl(320, 36%, 37%)

HSB

hsb(320, 53%, 50%)

CMYK

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

Oklch

oklch(46.0% 0.110 342.0)

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

#4F3855

Dark Plum · DarkSlateGray · Eggplant

HEX

#4F3855

RGB

rgb(79, 56, 85)

HSL

hsl(288, 21%, 28%)

HSB

hsb(288, 34%, 33%)

CMYK

cmyk(7%, 34%, 0%, 67%)

Oklch

oklch(37.8% 0.057 319.2)

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

#393341

Deep Indigo · DarkSlateGray · Eggplant

HEX

#393341

RGB

rgb(57, 51, 65)

HSL

hsl(266, 12%, 23%)

HSB

hsb(266, 22%, 25%)

CMYK

cmyk(12%, 22%, 0%, 75%)

Oklch

oklch(33.3% 0.026 304.5)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE3368

35DEA9

Analogous

DE35BF

DE3368

DE5435

Triadic

DE3368

6BDE35

356BDE

Split-Comp.

DE3368

35DE54

35BFDE

Tetradic

DE3368

BFDE35

35DEA9

5435DE

Contrast Matrix WCAG 2.1 Contrast

DE3368	BD3568	803C69	4F3855	393341
—	1.2 Fail	1.7 Fail	2.4 Fail	2.8 Fail
1.2 Fail	—	1.4 Fail	1.9 Fail	2.2 Fail
1.7 Fail	1.4 Fail	—	1.4 Fail	1.6 Fail
2.4 Fail	1.9 Fail	1.4 Fail	—	1.2 Fail
2.8 Fail	2.2 Fail	1.6 Fail	1.2 Fail	—

White BG

4.4AA Large

5.4AA

7.6AAA

10.3AAA

12.2AAA

Black BG

4.8AA

3.9AA Large

2.8Fail

2.0Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

94925B

82815C

63625E

45454E

36363E

Deuteranopia

9EAB58

8A9459

676C5C

46484C

37373D

Tritanopia

D5514F

B65250

7D5654

4E4847

393B3A

Achromatopsia

6C6C6C

636363

555555

424242

363636

Shades & Tints Shades & Tints

#DE3368

Dark

Light

#BD3568

Dark

Light

#803C69

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de3368;
  --color-2: #bd3568;
  --color-3: #803c69;
  --color-4: #4f3855;
  --color-5: #393341;
}

SCSS

$color-1: #de3368;
$color-2: #bd3568;
$color-3: #803c69;
$color-4: #4f3855;
$color-5: #393341;

TAILWIND

colors: {
  'brand-1': '#de3368',
  'brand-2': '#bd3568',
  'brand-3': '#803c69',
  'brand-4': '#4f3855',
  'brand-5': '#393341',
}

RGB Array

[222, 51, 104], [189, 53, 104], [128, 60, 105], [79, 56, 85], [57, 51, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE3368, #BD3568, #803C69, #4F3855, #393341 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: #de3368; --color-2: #bd3568; --color-3: #803c69; --color-4: #4f3855; --color-5: #393341. 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