← Back to Editor

#CDD0D1 · #CF98D4 · #C770CF · #9E629D · #5D6380

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

#CDD0D1

Silver Gray · LightGray · Pearl Gray

HEX
#CDD0D1
RGB
rgb(205, 208, 209)
HSL
hsl(195, 4%, 81%)
HSB
hsb(195, 2%, 82%)
CMYK
cmyk(2%, 0%, 0%, 18%)
Oklch
oklch(85.6% 0.004 219.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#CF98D4

Lilac · Orchid · Lilac Purple

HEX
#CF98D4
RGB
rgb(207, 152, 212)
HSL
hsl(295, 41%, 71%)
HSB
hsb(295, 28%, 83%)
CMYK
cmyk(2%, 28%, 0%, 17%)
Oklch
oklch(75.2% 0.104 323.7)

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

#C770CF

Lilac · Orchid · Lilac Purple

HEX
#C770CF
RGB
rgb(199, 112, 207)
HSL
hsl(295, 50%, 63%)
HSB
hsb(295, 46%, 81%)
CMYK
cmyk(4%, 46%, 0%, 19%)
Oklch
oklch(67.6% 0.163 324.0)

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

#9E629D

Rose Purple · Gray · Violet

HEX
#9E629D
RGB
rgb(158, 98, 157)
HSL
hsl(301, 24%, 50%)
HSB
hsb(301, 38%, 62%)
CMYK
cmyk(0%, 38%, 1%, 38%)
Oklch
oklch(58.3% 0.112 327.5)

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

#5D6380

Indigo · DimGray · Navy Blue

HEX
#5D6380
RGB
rgb(93, 99, 128)
HSL
hsl(230, 16%, 43%)
HSB
hsb(230, 27%, 50%)
CMYK
cmyk(27%, 23%, 0%, 50%)
Oklch
oklch(50.6% 0.047 275.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDD0D1
D0CECD

Analogous

CDD0D0
CDD0D1
CDCED0

Triadic

CDD0D1
D0CDD0
D0D0CD

Split-Comp.

CDD0D1
D0CDCE
D0D0CD

Tetradic

CDD0D1
D0CDD0
D0CECD
CED0CD

Contrast Matrix WCAG 2.1 Contrast

CDD0D1
CF98D4
C770CF
9E629D
5D6380
—
1.5
Fail
2.0
Fail
2.9
Fail
3.8
AA Large
1.5
Fail
—
1.4
Fail
1.9
Fail
2.6
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
1.9
Fail
2.9
Fail
1.9
Fail
1.4
Fail
—
1.3
Fail
3.8
AA Large
2.6
Fail
1.9
Fail
1.3
Fail
—
White BG
1.6Fail
2.3Fail
3.2AA Large
4.5AA Large
5.9AA
Black BG
13.5AAA
9.1AAA
6.6AA
4.7AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECED1
B7B7C5
A1A1B8
84838F
606079

Deuteranopia

CECED1
BABEC2
A6ADB2
888C8B
5F5F77

Tritanopia

CDD1D1
CCBAB8
C3A6A2
9B8381
5D7372

Achromatopsia

CFCFCF
AFAFAF
959595
7B7B7B
656565

Shades & Tints Shades & Tints

#CDD0D1

Dark
Light

#CF98D4

Dark
Light

#C770CF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdd0d1;
  --color-2: #cf98d4;
  --color-3: #c770cf;
  --color-4: #9e629d;
  --color-5: #5d6380;
}

SCSS

$color-1: #cdd0d1;
$color-2: #cf98d4;
$color-3: #c770cf;
$color-4: #9e629d;
$color-5: #5d6380;

TAILWIND

colors: {
  'brand-1': '#cdd0d1',
  'brand-2': '#cf98d4',
  'brand-3': '#c770cf',
  'brand-4': '#9e629d',
  'brand-5': '#5d6380',
}

RGB Array

[205, 208, 209], [207, 152, 212], [199, 112, 207], [158, 98, 157], [93, 99, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDD0D1, #CF98D4, #C770CF, #9E629D, #5D6380 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cdd0d1; --color-2: #cf98d4; --color-3: #c770cf; --color-4: #9e629d; --color-5: #5d6380. 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. Restrained colors convey professionalism and trust. 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