← Back to Editor

#D5F7FB · #CFE7FD · #C4C4F3 · #C5A6EE · #CA79E1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#D5F7FB

Sky Blue · Lavender · Glacier Blue

HEX
#D5F7FB
RGB
rgb(213, 247, 251)
HSL
hsl(186, 83%, 91%)
HSB
hsb(186, 15%, 98%)
CMYK
cmyk(15%, 2%, 0%, 2%)
Oklch
oklch(95.3% 0.036 205.2)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

#CFE7FD

Sky Blue · Lavender · Sky Blue

HEX
#CFE7FD
RGB
rgb(207, 231, 253)
HSL
hsl(209, 92%, 90%)
HSB
hsb(209, 18%, 99%)
CMYK
cmyk(18%, 9%, 0%, 1%)
Oklch
oklch(91.7% 0.039 245.9)

TraditionalSky Blue」· PaintSky Blue」· Creative Twilight Haze

#C4C4F3

Wisteria · LightSteelBlue · Sky Blue

HEX
#C4C4F3
RGB
rgb(196, 196, 243)
HSL
hsl(240, 66%, 86%)
HSB
hsb(240, 19%, 95%)
CMYK
cmyk(19%, 19%, 0%, 5%)
Oklch
oklch(83.6% 0.065 284.9)

TraditionalWisteria」· PaintSky Blue」· Creative Lavender Dream

#C5A6EE

Wisteria · LightSteelBlue · Lilac Purple

HEX
#C5A6EE
RGB
rgb(197, 166, 238)
HSL
hsl(266, 68%, 79%)
HSB
hsb(266, 30%, 93%)
CMYK
cmyk(17%, 30%, 0%, 7%)
Oklch
oklch(77.8% 0.105 303.8)

TraditionalWisteria」· PaintLilac Purple」· Creative Lavender Dream

#CA79E1

Lilac · Orchid · Lilac Purple

HEX
#CA79E1
RGB
rgb(202, 121, 225)
HSL
hsl(287, 63%, 68%)
HSB
hsb(287, 46%, 88%)
CMYK
cmyk(10%, 46%, 0%, 12%)
Oklch
oklch(70.1% 0.168 318.5)

TraditionalLilac」· PaintLilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D5F7FB
FBD9D5

Analogous

D5FBEC
D5F7FB
D5E4FB

Triadic

D5F7FB
FBD5F7
F7FBD5

Split-Comp.

D5F7FB
FBD5E4
FBECD5

Tetradic

D5F7FB
ECD5FB
FBD9D5
E4FBD5

Contrast Matrix WCAG 2.1 Contrast

D5F7FB
CFE7FD
C4C4F3
C5A6EE
CA79E1
1.1
Fail
1.5
Fail
1.8
Fail
2.5
Fail
1.1
Fail
1.3
Fail
1.6
Fail
2.3
Fail
1.5
Fail
1.3
Fail
1.2
Fail
1.7
Fail
1.8
Fail
1.6
Fail
1.2
Fail
1.4
Fail
2.5
Fail
2.3
Fail
1.7
Fail
1.4
Fail
White BG
1.1Fail
1.3Fail
1.7Fail
2.1Fail
2.9Fail
Black BG
18.5AAA
16.5AAA
12.5AAA
10.1AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4FA
D9DAF8
C4C4E8
B8B7DD
A7A6C8

Deuteranopia

E2DFFA
D8D6F6
C4C4E5
B9BCD8
ACB2C2

Tritanopia

D7F9F9
D0F3F3
C4DFDD
C3CFCC
C6B4B0

Achromatopsia

EDEDED
E2E2E2
C9C9C9
B7B7B7
9D9D9D

Shades & Tints Shades & Tints

#D5F7FB

Dark
Light

#CFE7FD

Dark
Light

#C4C4F3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d5f7fb;
  --color-2: #cfe7fd;
  --color-3: #c4c4f3;
  --color-4: #c5a6ee;
  --color-5: #ca79e1;
}

SCSS

$color-1: #d5f7fb;
$color-2: #cfe7fd;
$color-3: #c4c4f3;
$color-4: #c5a6ee;
$color-5: #ca79e1;

TAILWIND

colors: {
  'brand-1': '#d5f7fb',
  'brand-2': '#cfe7fd',
  'brand-3': '#c4c4f3',
  'brand-4': '#c5a6ee',
  'brand-5': '#ca79e1',
}

RGB Array

[213, 247, 251], [207, 231, 253], [196, 196, 243], [197, 166, 238], [202, 121, 225]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D5F7FB, #CFE7FD, #C4C4F3, #C5A6EE, #CA79E1 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d5f7fb; --color-2: #cfe7fd; --color-3: #c4c4f3; --color-4: #c5a6ee; --color-5: #ca79e1. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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