#D13882 + #9E2F86 + #5C2E6E + #677E8F + #DECE87 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D13882

Dark Violet · MediumVioletRed · Rose Pink

HEX

#D13882

RGB

rgb(209, 56, 130)

HSL

hsl(331, 62%, 52%)

HSB

hsb(331, 73%, 82%)

CMYK

cmyk(0%, 73%, 38%, 18%)

Oklch

oklch(59.1% 0.199 355.6)

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

#9E2F86

Rose Purple · MediumVioletRed · Eggplant

HEX

#9E2F86

RGB

rgb(158, 47, 134)

HSL

hsl(313, 54%, 40%)

HSB

hsb(313, 70%, 62%)

CMYK

cmyk(0%, 70%, 15%, 38%)

Oklch

oklch(50.3% 0.174 337.8)

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

#5C2E6E

Dark Plum · DarkSlateBlue · Eggplant

HEX

#5C2E6E

RGB

rgb(92, 46, 110)

HSL

hsl(283, 41%, 31%)

HSB

hsb(283, 58%, 43%)

CMYK

cmyk(16%, 58%, 0%, 57%)

Oklch

oklch(39.1% 0.114 315.6)

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

#677E8F

Slate Blue · SlateGray · Navy Blue

HEX

#677E8F

RGB

rgb(103, 126, 143)

HSL

hsl(206, 16%, 48%)

HSB

hsb(206, 28%, 56%)

CMYK

cmyk(28%, 12%, 0%, 44%)

Oklch

oklch(58.1% 0.037 240.3)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#DECE87

Ginger · BurlyWood · Sunflower

HEX

#DECE87

RGB

rgb(222, 206, 135)

HSL

hsl(49, 57%, 70%)

HSB

hsb(49, 39%, 87%)

CMYK

cmyk(0%, 7%, 39%, 13%)

Oklch

oklch(84.9% 0.092 97.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D13882

39D087

Analogous

D039CE

D13882

D03B39

Triadic

D13882

82D039

3982D0

Split-Comp.

D13882

39D03B

39CED0

Tetradic

D13882

CED039

39D087

3B39D0

Contrast Matrix WCAG 2.1 Contrast

D13882	9E2F86	5C2E6E	677E8F	DECE87
—	1.4 Fail	2.2 Fail	1.1 Fail	2.9 Fail
1.4 Fail	—	1.5 Fail	1.5 Fail	4.1 AA Large
2.2 Fail	1.5 Fail	—	2.4 Fail	6.4 AA
1.1 Fail	1.5 Fail	2.4 Fail	—	2.7 Fail
2.9 Fail	4.1 AA Large	6.4 AA	2.7 Fail	—

White BG

4.6AA

6.6AA

10.1AAA

4.2AA Large

1.6Fail

Black BG

4.6AA

3.2AA Large

2.1Fail

5.0AA

13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8D70

6E6D71

48485F

71718B

D7D798

Deuteranopia

98A36C

747D6C

4B4E5B

706E8A

D8D99C

Tritanopia

C9625F

98605D

5A5250

688887

DDA6A9

Achromatopsia

6E6E6E

5A5A5A

434343

797979

CBCBCB

Shades & Tints Shades & Tints

#D13882

Dark

Light

#9E2F86

Dark

Light

#5C2E6E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d13882;
  --color-2: #9e2f86;
  --color-3: #5c2e6e;
  --color-4: #677e8f;
  --color-5: #dece87;
}

SCSS

$color-1: #d13882;
$color-2: #9e2f86;
$color-3: #5c2e6e;
$color-4: #677e8f;
$color-5: #dece87;

TAILWIND

colors: {
  'brand-1': '#d13882',
  'brand-2': '#9e2f86',
  'brand-3': '#5c2e6e',
  'brand-4': '#677e8f',
  'brand-5': '#dece87',
}

RGB Array

[209, 56, 130], [158, 47, 134], [92, 46, 110], [103, 126, 143], [222, 206, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D13882, #9E2F86, #5C2E6E, #677E8F, #DECE87 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: #d13882; --color-2: #9e2f86; --color-3: #5c2e6e; --color-4: #677e8f; --color-5: #dece87. 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 warm-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