#660E43 + #711673 + #65439C + #4D6DB0 + #5197B8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#660E43

Rose Purple · Purple · Raspberry

HEX

#660E43

RGB

rgb(102, 14, 67)

HSL

hsl(324, 76%, 23%)

HSB

hsb(324, 86%, 40%)

CMYK

cmyk(0%, 86%, 34%, 60%)

Oklch

oklch(34.6% 0.130 349.7)

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

#711673

Royal Purple · Purple · Eggplant

HEX

#711673

RGB

rgb(113, 22, 115)

HSL

hsl(299, 68%, 27%)

HSB

hsb(299, 81%, 45%)

CMYK

cmyk(2%, 81%, 0%, 55%)

Oklch

oklch(39.8% 0.163 327.1)

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

#65439C

Deep Indigo · DarkSlateBlue · Violet

HEX

#65439C

RGB

rgb(101, 67, 156)

HSL

hsl(263, 40%, 44%)

HSB

hsb(263, 57%, 61%)

CMYK

cmyk(35%, 57%, 0%, 39%)

Oklch

oklch(46.6% 0.140 298.4)

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

#4D6DB0

Indigo · SteelBlue · Navy Blue

HEX

#4D6DB0

RGB

rgb(77, 109, 176)

HSL

hsl(221, 39%, 50%)

HSB

hsb(221, 56%, 69%)

CMYK

cmyk(56%, 38%, 0%, 31%)

Oklch

oklch(54.2% 0.112 263.8)

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

#5197B8

Slate Blue · SteelBlue · Lake Green

HEX

#5197B8

RGB

rgb(81, 151, 184)

HSL

hsl(199, 42%, 52%)

HSB

hsb(199, 56%, 72%)

CMYK

cmyk(56%, 18%, 0%, 28%)

Oklch

oklch(64.4% 0.086 230.5)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

660E43

0E6732

Analogous

5E0E67

660E43

670E17

Triadic

660E43

44670E

0E4467

Split-Comp.

660E43

17670E

0E675E

Tetradic

660E43

675E0E

0E6732

0E1767

Contrast Matrix WCAG 2.1 Contrast

660E43	711673	65439C	4D6DB0	5197B8
—	1.2 Fail	1.7 Fail	2.4 Fail	3.8 AA Large
1.2 Fail	—	1.4 Fail	2.0 Fail	3.1 AA Large
1.7 Fail	1.4 Fail	—	1.5 Fail	2.3 Fail
2.4 Fail	2.0 Fail	1.5 Fail	—	1.6 Fail
3.8 AA Large	3.1 AA Large	2.3 Fail	1.6 Fail	—

White BG

12.3AAA

10.2AAA

7.4AAA

5.1AA

3.2AA Large

Black BG

1.7Fail

2.1Fail

2.8Fail

4.1AA Large

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

403F36

4A495C

565686

5B5BA0

6F70B0

Deuteranopia

454C33

4F5657

585B81

59579C

6B66AE

Tritanopia

622C2A

6C4B47

637572

4F9390

55AAA8

Achromatopsia

2E2E2E

3C3C3C

575757

6B6B6B

868686

Shades & Tints Shades & Tints

#660E43

Dark

Light

#711673

Dark

Light

#65439C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #660e43;
  --color-2: #711673;
  --color-3: #65439c;
  --color-4: #4d6db0;
  --color-5: #5197b8;
}

SCSS

$color-1: #660e43;
$color-2: #711673;
$color-3: #65439c;
$color-4: #4d6db0;
$color-5: #5197b8;

TAILWIND

colors: {
  'brand-1': '#660e43',
  'brand-2': '#711673',
  'brand-3': '#65439c',
  'brand-4': '#4d6db0',
  'brand-5': '#5197b8',
}

RGB Array

[102, 14, 67], [113, 22, 115], [101, 67, 156], [77, 109, 176], [81, 151, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #660E43, #711673, #65439C, #4D6DB0, #5197B8 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: #660e43; --color-2: #711673; --color-3: #65439c; --color-4: #4d6db0; --color-5: #5197b8. 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