← Back to Editor

#9E88B5 · #422454 · #B5D6A1 · #D4E7C9 · #F3F9F0

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#9E88B5

Wisteria · DarkGray · Lilac Purple

HEX
#9E88B5
RGB
rgb(158, 136, 181)
HSL
hsl(269, 23%, 62%)
HSB
hsb(269, 25%, 71%)
CMYK
cmyk(13%, 25%, 0%, 29%)
Oklch
oklch(66.3% 0.070 306.8)

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

#422454

Dark Plum · DarkSlateGray · Eggplant

HEX
#422454
RGB
rgb(66, 36, 84)
HSL
hsl(278, 40%, 24%)
HSB
hsb(278, 57%, 33%)
CMYK
cmyk(21%, 57%, 0%, 67%)
Oklch
oklch(32.3% 0.088 311.3)

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

#B5D6A1

Celadon · Silver · Apple Green

HEX
#B5D6A1
RGB
rgb(181, 214, 161)
HSL
hsl(97, 39%, 74%)
HSB
hsb(97, 25%, 84%)
CMYK
cmyk(15%, 0%, 25%, 16%)
Oklch
oklch(83.8% 0.080 133.9)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#D4E7C9

Celadon · LightGray · Mint Green

HEX
#D4E7C9
RGB
rgb(212, 231, 201)
HSL
hsl(98, 38%, 85%)
HSB
hsb(98, 13%, 91%)
CMYK
cmyk(8%, 0%, 13%, 9%)
Oklch
oklch(90.6% 0.045 133.9)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#F3F9F0

Celadon · SeaShell · Mint Green

HEX
#F3F9F0
RGB
rgb(243, 249, 240)
HSL
hsl(100, 43%, 96%)
HSB
hsb(100, 4%, 98%)
CMYK
cmyk(2%, 0%, 4%, 2%)
Oklch
oklch(97.5% 0.013 134.9)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9E88B5
9FB488

Analogous

8889B4
9E88B5
B488B4

Triadic

9E88B5
B49D88
88B49D

Split-Comp.

9E88B5
B4B488
89B488

Tetradic

9E88B5
B48889
9FB488
88B4B4

Contrast Matrix WCAG 2.1 Contrast

9E88B5
422454
B5D6A1
D4E7C9
F3F9F0
—
4.1
AA Large
2.0
Fail
2.4
Fail
3.0
Fail
4.1
AA Large
—
8.1
AAA
10.0
AAA
12.2
AAA
2.0
Fail
8.1
AAA
—
1.2
Fail
1.5
Fail
2.4
Fail
10.0
AAA
1.2
Fail
—
1.2
Fail
3.0
Fail
12.2
AAA
1.5
Fail
1.2
Fail
—
White BG
3.2AA Large
13.0AAA
1.6Fail
1.3Fail
1.1Fail
Black BG
6.6AA
1.6Fail
13.1AAA
16.1AAA
19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9494AA
353548
C3C4AE
DCDCD0
F6F6F2

Deuteranopia

9697A8
373946
C1BFB1
DBDAD2
F5F5F3

Tritanopia

9DA2A0
413F3D
B7B8BA
D5D6D7
F3F4F4

Achromatopsia

949494
323232
C6C6C6
DEDEDE
F6F6F6

Shades & Tints Shades & Tints

#9E88B5

Dark
Light

#422454

Dark
Light

#B5D6A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9e88b5;
  --color-2: #422454;
  --color-3: #b5d6a1;
  --color-4: #d4e7c9;
  --color-5: #f3f9f0;
}

SCSS

$color-1: #9e88b5;
$color-2: #422454;
$color-3: #b5d6a1;
$color-4: #d4e7c9;
$color-5: #f3f9f0;

TAILWIND

colors: {
  'brand-1': '#9e88b5',
  'brand-2': '#422454',
  'brand-3': '#b5d6a1',
  'brand-4': '#d4e7c9',
  'brand-5': '#f3f9f0',
}

RGB Array

[158, 136, 181], [66, 36, 84], [181, 214, 161], [212, 231, 201], [243, 249, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9E88B5, #422454, #B5D6A1, #D4E7C9, #F3F9F0 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #9e88b5; --color-2: #422454; --color-3: #b5d6a1; --color-4: #d4e7c9; --color-5: #f3f9f0. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. High-contrast palettes naturally meet WCAG accessibility standards. 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