← Back to Editor

#CDC4F2 · #C8D3E3 · #DDDDDD · #E6E6E6 · #F7F3F3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CDC4F2

Wisteria · LightGray · Sky Blue

HEX
#CDC4F2
RGB
rgb(205, 196, 242)
HSL
hsl(252, 64%, 86%)
HSB
hsb(252, 19%, 95%)
CMYK
cmyk(15%, 19%, 0%, 5%)
Oklch
oklch(84.3% 0.064 293.9)

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

#C8D3E3

Azure · LightGray · Sky Blue

HEX
#C8D3E3
RGB
rgb(200, 211, 227)
HSL
hsl(216, 33%, 84%)
HSB
hsb(216, 12%, 89%)
CMYK
cmyk(12%, 7%, 0%, 11%)
Oklch
oklch(86.3% 0.025 257.7)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#DDDDDD

Plain White · LightGray · Cloud White

HEX
#DDDDDD
RGB
rgb(221, 221, 221)
HSL
hsl(0, 0%, 87%)
HSB
hsb(0, 0%, 87%)
CMYK
cmyk(0%, 0%, 0%, 13%)
Oklch
oklch(89.8% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#E6E6E6

Plain White · Lavender · Cloud White

HEX
#E6E6E6
RGB
rgb(230, 230, 230)
HSL
hsl(0, 0%, 90%)
HSB
hsb(0, 0%, 90%)
CMYK
cmyk(0%, 0%, 0%, 10%)
Oklch
oklch(92.5% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#F7F3F3

Peach Pink · SeaShell · Cherry Blossom

HEX
#F7F3F3
RGB
rgb(247, 243, 243)
HSL
hsl(0, 20%, 96%)
HSB
hsb(0, 2%, 97%)
CMYK
cmyk(0%, 2%, 2%, 3%)
Oklch
oklch(96.7% 0.004 17.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDC4F2
E9F2C4

Analogous

C4D2F2
CDC4F2
E4C4F2

Triadic

CDC4F2
F2CEC4
C4F2CE

Split-Comp.

CDC4F2
F2E4C4
D2F2C4

Tetradic

CDC4F2
F2C4D2
E9F2C4
C4F2E4

Contrast Matrix WCAG 2.1 Contrast

CDC4F2
C8D3E3
DDDDDD
E6E6E6
F7F3F3
—
1.1
Fail
1.2
Fail
1.3
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
White BG
1.6Fail
1.5Fail
1.4Fail
1.2Fail
1.1Fail
Black BG
12.8AAA
13.9AAA
15.5AAA
16.8AAA
19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9E7
CDCDDF
DDDDDD
E6E6E6
F5F5F3

Deuteranopia

CACAE4
CCCBDE
DDDDDD
E6E6E6
F6F6F3

Tritanopia

CDDEDC
C9DCDB
DDDDDD
E6E6E6
F7F3F3

Achromatopsia

CCCCCC
D2D2D2
DDDDDD
E6E6E6
F4F4F4

Shades & Tints Shades & Tints

#CDC4F2

Dark
Light

#C8D3E3

Dark
Light

#DDDDDD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdc4f2;
  --color-2: #c8d3e3;
  --color-3: #dddddd;
  --color-4: #e6e6e6;
  --color-5: #f7f3f3;
}

SCSS

$color-1: #cdc4f2;
$color-2: #c8d3e3;
$color-3: #dddddd;
$color-4: #e6e6e6;
$color-5: #f7f3f3;

TAILWIND

colors: {
  'brand-1': '#cdc4f2',
  'brand-2': '#c8d3e3',
  'brand-3': '#dddddd',
  'brand-4': '#e6e6e6',
  'brand-5': '#f7f3f3',
}

RGB Array

[205, 196, 242], [200, 211, 227], [221, 221, 221], [230, 230, 230], [247, 243, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDC4F2, #C8D3E3, #DDDDDD, #E6E6E6, #F7F3F3 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. 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: #cdc4f2; --color-2: #c8d3e3; --color-3: #dddddd; --color-4: #e6e6e6; --color-5: #f7f3f3. 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. 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 beauty, lifestyle, arts 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