← Back to Editor

#9D96B6 · #FEF2E8 · #4D586A · #B57698 · #D37895

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#9D96B6

Wisteria · DarkGray · Cobalt Blue

HEX
#9D96B6
RGB
rgb(157, 150, 182)
HSL
hsl(253, 18%, 65%)
HSB
hsb(253, 18%, 71%)
CMYK
cmyk(14%, 18%, 0%, 29%)
Oklch
oklch(69.0% 0.047 295.2)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#FEF2E8

Apricot · Linen · Peach Orange

HEX
#FEF2E8
RGB
rgb(254, 242, 232)
HSL
hsl(27, 92%, 95%)
HSB
hsb(27, 9%, 100%)
CMYK
cmyk(0%, 5%, 9%, 0%)
Oklch
oklch(96.8% 0.019 62.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#4D586A

Indigo · DimGray · Prussian Blue

HEX
#4D586A
RGB
rgb(77, 88, 106)
HSL
hsl(217, 16%, 36%)
HSB
hsb(217, 27%, 42%)
CMYK
cmyk(27%, 17%, 0%, 58%)
Oklch
oklch(45.8% 0.033 260.2)

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

#B57698

Rose Purple · DarkGray · Rose Pink

HEX
#B57698
RGB
rgb(181, 118, 152)
HSL
hsl(328, 30%, 59%)
HSB
hsb(328, 35%, 71%)
CMYK
cmyk(0%, 35%, 16%, 29%)
Oklch
oklch(64.2% 0.090 346.4)

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

#D37895

Rouge · LightCoral · Rose Pink

HEX
#D37895
RGB
rgb(211, 120, 149)
HSL
hsl(341, 51%, 65%)
HSB
hsb(341, 43%, 83%)
CMYK
cmyk(0%, 43%, 29%, 17%)
Oklch
oklch(68.1% 0.118 0.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D96B6
AFB696

Analogous

969FB6
9D96B6
AD96B6

Triadic

9D96B6
B69D96
96B69D

Split-Comp.

9D96B6
B6AD96
9FB696

Tetradic

9D96B6
B6969F
AFB696
96B6AD

Contrast Matrix WCAG 2.1 Contrast

9D96B6
FEF2E8
4D586A
B57698
D37895
—
2.6
Fail
2.6
Fail
1.2
Fail
1.1
Fail
2.6
Fail
—
6.5
AA
3.2
AA Large
2.8
Fail
2.6
Fail
6.5
AA
—
2.1
Fail
2.4
Fail
1.2
Fail
3.2
AA Large
2.1
Fail
—
1.1
Fail
1.1
Fail
2.8
Fail
2.4
Fail
1.1
Fail
—
White BG
2.8Fail
1.1Fail
7.2AAA
3.5AA Large
3.0AA Large
Black BG
7.5AAA
19.1AAA
2.9Fail
6.0AA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9AAE
F9F9EA
525266
9A9990
ACAB8E

Deuteranopia

9A9BAC
FAFAEB
515065
9DA28E
B1B88C

Tritanopia

9DA8A7
FDECED
4E6261
B28988
CE8887

Achromatopsia

9C9C9C
F4F4F4
575757
8D8D8D
979797

Shades & Tints Shades & Tints

#9D96B6

Dark
Light

#FEF2E8

Dark
Light

#4D586A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d96b6;
  --color-2: #fef2e8;
  --color-3: #4d586a;
  --color-4: #b57698;
  --color-5: #d37895;
}

SCSS

$color-1: #9d96b6;
$color-2: #fef2e8;
$color-3: #4d586a;
$color-4: #b57698;
$color-5: #d37895;

TAILWIND

colors: {
  'brand-1': '#9d96b6',
  'brand-2': '#fef2e8',
  'brand-3': '#4d586a',
  'brand-4': '#b57698',
  'brand-5': '#d37895',
}

RGB Array

[157, 150, 182], [254, 242, 232], [77, 88, 106], [181, 118, 152], [211, 120, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9D96B6, #FEF2E8, #4D586A, #B57698, #D37895 is ideal for: 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: #9d96b6; --color-2: #fef2e8; --color-3: #4d586a; --color-4: #b57698; --color-5: #d37895. 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. 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