#9E8ABB + #E45635 + #CF2C25 + #BA1A3A + #4E367C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9E8ABB

Wisteria · DarkGray · Lilac Purple

HEX

#9E8ABB

RGB

rgb(158, 138, 187)

HSL

hsl(264, 26%, 64%)

HSB

hsb(264, 26%, 73%)

CMYK

cmyk(16%, 26%, 0%, 27%)

Oklch

oklch(66.9% 0.074 303.1)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#E45635

Vermilion · Chocolate · Passion Red

HEX

#E45635

RGB

rgb(228, 86, 53)

HSL

hsl(11, 76%, 55%)

HSB

hsb(11, 77%, 89%)

CMYK

cmyk(0%, 62%, 77%, 11%)

Oklch

oklch(63.7% 0.183 34.4)

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

#CF2C25

Vermilion · FireBrick · Passion Red

HEX

#CF2C25

RGB

rgb(207, 44, 37)

HSL

hsl(2, 70%, 48%)

HSB

hsb(2, 82%, 81%)

CMYK

cmyk(0%, 79%, 82%, 19%)

Oklch

oklch(55.8% 0.200 28.3)

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

#BA1A3A

Vermilion · FireBrick · Passion Red

HEX

#BA1A3A

RGB

rgb(186, 26, 58)

HSL

hsl(348, 75%, 42%)

HSB

hsb(348, 86%, 73%)

CMYK

cmyk(0%, 86%, 69%, 27%)

Oklch

oklch(51.0% 0.190 18.0)

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

#4E367C

Deep Indigo · DarkSlateBlue · Eggplant

HEX

#4E367C

RGB

rgb(78, 54, 124)

HSL

hsl(261, 39%, 35%)

HSB

hsb(261, 56%, 49%)

CMYK

cmyk(37%, 56%, 0%, 51%)

Oklch

oklch(39.7% 0.115 296.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9E8ABB

A8BB8B

Analogous

8B90BB

9E8ABB

B68BBB

Triadic

9E8ABB

BB9E8B

8BBB9E

Split-Comp.

9E8ABB

BBB68B

90BB8B

Tetradic

9E8ABB

BB8B90

A8BB8B

8BBBB6

Contrast Matrix WCAG 2.1 Contrast

9E8ABB	E45635	CF2C25	BA1A3A	4E367C
—	1.2 Fail	1.7 Fail	2.1 Fail	3.2 AA Large
1.2 Fail	—	1.4 Fail	1.7 Fail	2.7 Fail
1.7 Fail	1.4 Fail	—	1.2 Fail	1.9 Fail
2.1 Fail	1.7 Fail	1.2 Fail	—	1.5 Fail
3.2 AA Large	2.7 Fail	1.9 Fail	1.5 Fail	—

White BG

3.1AA Large

3.7AA Large

5.2AA

6.4AA

9.8AAA

Black BG

6.8AA

5.7AA

4.0AA Large

3.3AA Large

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9595AF

A7A53D

888727

757332

44436B

Deuteranopia

9798AC

AFB93F

929E27

7E8A30

454767

Tritanopia

9DA6A4

DD4345

C72828

B22C2B

4D5E5B

Achromatopsia

969696

7D7D7D

5C5C5C

4D4D4D

454545

Shades & Tints Shades & Tints

#9E8ABB

Dark

Light

#E45635

Dark

Light

#CF2C25

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9e8abb;
  --color-2: #e45635;
  --color-3: #cf2c25;
  --color-4: #ba1a3a;
  --color-5: #4e367c;
}

SCSS

$color-1: #9e8abb;
$color-2: #e45635;
$color-3: #cf2c25;
$color-4: #ba1a3a;
$color-5: #4e367c;

TAILWIND

colors: {
  'brand-1': '#9e8abb',
  'brand-2': '#e45635',
  'brand-3': '#cf2c25',
  'brand-4': '#ba1a3a',
  'brand-5': '#4e367c',
}

RGB Array

[158, 138, 187], [228, 86, 53], [207, 44, 37], [186, 26, 58], [78, 54, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9E8ABB, #E45635, #CF2C25, #BA1A3A, #4E367C 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: #9e8abb; --color-2: #e45635; --color-3: #cf2c25; --color-4: #ba1a3a; --color-5: #4e367c. 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 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