#E30BA9 + #BB36D9 + #9E6ACC + #708CBA + #8BB7C3 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#E30BA9

Rose Purple · DeepPink · Violet

HEX

#E30BA9

RGB

rgb(227, 11, 169)

HSL

hsl(316, 91%, 47%)

HSB

hsb(316, 95%, 89%)

CMYK

cmyk(0%, 95%, 26%, 11%)

Oklch

oklch(61.4% 0.259 344.1)

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

#BB36D9

Royal Purple · MediumOrchid · Violet

HEX

#BB36D9

RGB

rgb(187, 54, 217)

HSL

hsl(289, 68%, 53%)

HSB

hsb(289, 75%, 85%)

CMYK

cmyk(14%, 75%, 0%, 15%)

Oklch

oklch(59.9% 0.246 319.4)

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

#9E6ACC

Lilac · MediumOrchid · Lilac Purple

HEX

#9E6ACC

RGB

rgb(158, 106, 204)

HSL

hsl(272, 49%, 61%)

HSB

hsb(272, 48%, 80%)

CMYK

cmyk(23%, 48%, 0%, 20%)

Oklch

oklch(61.9% 0.151 307.0)

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

#708CBA

Azure · LightSlateGray · Navy Blue

HEX

#708CBA

RGB

rgb(112, 140, 186)

HSL

hsl(217, 35%, 58%)

HSB

hsb(217, 40%, 73%)

CMYK

cmyk(40%, 25%, 0%, 27%)

Oklch

oklch(63.7% 0.077 260.1)

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

#8BB7C3

Sky Blue · DarkGray · Lake Green

HEX

#8BB7C3

RGB

rgb(139, 183, 195)

HSL

hsl(193, 32%, 65%)

HSB

hsb(193, 29%, 76%)

CMYK

cmyk(29%, 6%, 0%, 24%)

Oklch

oklch(75.2% 0.050 216.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E30BA9

0BE545

Analogous

B20BE5

E30BA9

E50B3E

Triadic

E30BA9

ABE50B

0BABE5

Split-Comp.

E30BA9

3EE50B

0BE5B2

Tetradic

E30BA9

E5B20B

0BE545

0B3EE5

Contrast Matrix WCAG 2.1 Contrast

E30BA9	BB36D9	9E6ACC	708CBA	8BB7C3
—	1.1 Fail	1.1 Fail	1.3 Fail	2.0 Fail
1.1 Fail	—	1.2 Fail	1.3 Fail	2.1 Fail
1.1 Fail	1.2 Fail	—	1.1 Fail	1.8 Fail
1.3 Fail	1.3 Fail	1.1 Fail	—	1.6 Fail
2.0 Fail	2.1 Fail	1.8 Fail	1.6 Fail	—

White BG

4.3AA Large

4.5AA

3.9AA Large

3.4AA Large

2.2Fail

Black BG

4.9AA

4.6AA

5.4AA

6.1AA

9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858483

8180B2

8787B4

7C7CAF

9E9EC0

Deuteranopia

92A27A

8993A8

8B8EAF

7B78AC

9C98BF

Tritanopia

D8655E

B4928C

9BA29D

71A6A4

8DBEBD

Achromatopsia

5E5E5E

707070

858585

898989

ABABAB

Shades & Tints Shades & Tints

#E30BA9

Dark

Light

#BB36D9

Dark

Light

#9E6ACC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e30ba9;
  --color-2: #bb36d9;
  --color-3: #9e6acc;
  --color-4: #708cba;
  --color-5: #8bb7c3;
}

SCSS

$color-1: #e30ba9;
$color-2: #bb36d9;
$color-3: #9e6acc;
$color-4: #708cba;
$color-5: #8bb7c3;

TAILWIND

colors: {
  'brand-1': '#e30ba9',
  'brand-2': '#bb36d9',
  'brand-3': '#9e6acc',
  'brand-4': '#708cba',
  'brand-5': '#8bb7c3',
}

RGB Array

[227, 11, 169], [187, 54, 217], [158, 106, 204], [112, 140, 186], [139, 183, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #E30BA9, #BB36D9, #9E6ACC, #708CBA, #8BB7C3 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: #e30ba9; --color-2: #bb36d9; --color-3: #9e6acc; --color-4: #708cba; --color-5: #8bb7c3. 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 pastel-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