← Back to Editor

#DFCDE0 · #C6A3B9 · #9C87BA · #8C63C7 · #3B9FBD

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 Library

Color Details Color Details

#DFCDE0

Lilac · LightGray · Lavender

HEX
#DFCDE0
RGB
rgb(223, 205, 224)
HSL
hsl(297, 23%, 84%)
HSB
hsb(297, 8%, 88%)
CMYK
cmyk(0%, 8%, 0%, 12%)
Oklch
oklch(86.9% 0.032 324.3)

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

#C6A3B9

Mauve · Silver · Rose Pink

HEX
#C6A3B9
RGB
rgb(198, 163, 185)
HSL
hsl(322, 23%, 71%)
HSB
hsb(322, 18%, 78%)
CMYK
cmyk(0%, 18%, 7%, 22%)
Oklch
oklch(75.3% 0.051 340.3)

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

#9C87BA

Wisteria · DarkGray · Lilac Purple

HEX
#9C87BA
RGB
rgb(156, 135, 186)
HSL
hsl(265, 27%, 63%)
HSB
hsb(265, 27%, 73%)
CMYK
cmyk(16%, 27%, 0%, 27%)
Oklch
oklch(66.1% 0.078 303.2)

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

#8C63C7

Deep Indigo · SlateBlue · Violet

HEX
#8C63C7
RGB
rgb(140, 99, 199)
HSL
hsl(265, 47%, 58%)
HSB
hsb(265, 50%, 78%)
CMYK
cmyk(30%, 50%, 0%, 22%)
Oklch
oklch(58.6% 0.152 300.8)

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

#3B9FBD

Lake Blue · SteelBlue · Mint Ice

HEX
#3B9FBD
RGB
rgb(59, 159, 189)
HSL
hsl(194, 52%, 49%)
HSB
hsb(194, 69%, 74%)
CMYK
cmyk(69%, 16%, 0%, 26%)
Oklch
oklch(65.7% 0.101 221.5)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFCDE0
CEE0CD

Analogous

D5CDE0
DFCDE0
E0CDD7

Triadic

DFCDE0
E0DFCD
CDE0DF

Split-Comp.

DFCDE0
D7E0CD
CDE0D5

Tetradic

DFCDE0
E0D5CD
CEE0CD
CDD7E0

Contrast Matrix WCAG 2.1 Contrast

DFCDE0
C6A3B9
9C87BA
8C63C7
3B9FBD
—
1.5
Fail
2.1
Fail
3.0
Fail
2.0
Fail
1.5
Fail
—
1.4
Fail
2.0
Fail
1.4
Fail
2.1
Fail
1.4
Fail
—
1.4
Fail
1.0
Fail
3.0
Fail
2.0
Fail
1.4
Fail
—
1.5
Fail
2.0
Fail
1.4
Fail
1.0
Fail
1.5
Fail
—
White BG
1.5Fail
2.2Fail
3.2AA Large
4.4AA Large
3.1AA Large
Black BG
13.9AAA
9.3AAA
6.6AA
4.7AA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7DB
B7B7B4
9393AE
7A7AAF
6667B6

Deuteranopia

D8DADA
B9BCB2
9496AB
7D80A9
6159B4

Tritanopia

DED8D7
C4AFAF
9BA4A2
8A9C98
40B0AF

Achromatopsia

D5D5D5
B0B0B0
939393
7B7B7B
858585

Shades & Tints Shades & Tints

#DFCDE0

Dark
Light

#C6A3B9

Dark
Light

#9C87BA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfcde0;
  --color-2: #c6a3b9;
  --color-3: #9c87ba;
  --color-4: #8c63c7;
  --color-5: #3b9fbd;
}

SCSS

$color-1: #dfcde0;
$color-2: #c6a3b9;
$color-3: #9c87ba;
$color-4: #8c63c7;
$color-5: #3b9fbd;

TAILWIND

colors: {
  'brand-1': '#dfcde0',
  'brand-2': '#c6a3b9',
  'brand-3': '#9c87ba',
  'brand-4': '#8c63c7',
  'brand-5': '#3b9fbd',
}

RGB Array

[223, 205, 224], [198, 163, 185], [156, 135, 186], [140, 99, 199], [59, 159, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFCDE0, #C6A3B9, #9C87BA, #8C63C7, #3B9FBD 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: #dfcde0; --color-2: #c6a3b9; --color-3: #9c87ba; --color-4: #8c63c7; --color-5: #3b9fbd. 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