← Back to Editor

#D7C5F6 · #CEE35C · #DD66AA · #FF21AA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#D7C5F6

Wisteria · Lavender · Lavender

HEX
#D7C5F6
RGB
rgb(215, 197, 246)
HSL
hsl(262, 73%, 87%)
HSB
hsb(262, 20%, 96%)
CMYK
cmyk(13%, 20%, 0%, 4%)
Oklch
oklch(85.4% 0.070 301.7)

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

#CEE35C

Fresh Green · Khaki · Sunflower

HEX
#CEE35C
RGB
rgb(206, 227, 92)
HSL
hsl(69, 71%, 63%)
HSB
hsb(69, 59%, 89%)
CMYK
cmyk(9%, 0%, 59%, 11%)
Oklch
oklch(87.4% 0.160 117.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DD66AA

Mauve · Orchid · Rose Pink

HEX
#DD66AA
RGB
rgb(221, 102, 170)
HSL
hsl(326, 64%, 63%)
HSB
hsb(326, 54%, 87%)
CMYK
cmyk(0%, 54%, 23%, 13%)
Oklch
oklch(67.4% 0.167 347.1)

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

#FF21AA

Rose Purple · DeepPink · Rose Pink

HEX
#FF21AA
RGB
rgb(255, 33, 170)
HSL
hsl(323, 100%, 56%)
HSB
hsb(323, 87%, 100%)
CMYK
cmyk(0%, 87%, 33%, 0%)
Oklch
oklch(66.7% 0.265 350.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7C5F6
E4F6C6

Analogous

C6CCF6
D7C5F6
F0C6F6

Triadic

D7C5F6
F6D7C6
C6F6D7

Split-Comp.

D7C5F6
F6F0C6
CCF6C6

Tetradic

D7C5F6
F6C6CC
E4F6C6
C6F6F0

Contrast Matrix WCAG 2.1 Contrast

D7C5F6
CEE35C
DD66AA
FF21AA
—
1.1
Fail
2.0
Fail
2.2
Fail
1.1
Fail
—
2.3
Fail
2.4
Fail
2.0
Fail
2.3
Fail
—
1.1
Fail
2.2
Fail
2.4
Fail
1.1
Fail
—
White BG
1.6Fail
1.4Fail
3.2AA Large
3.5AA Large
Black BG
13.2AAA
14.8AAA
6.6AA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFEA
D7D77D
A9A89A
9F9D89

Deuteranopia

D0D2E7
D6D485
B0B996
ACBC81

Tritanopia

D6E1DF
CF969C
D78D8A
F46F69

Achromatopsia

D0D0D0
CDCDCD
919191
737373

Shades & Tints Shades & Tints

#D7C5F6

Dark
Light

#CEE35C

Dark
Light

#DD66AA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7c5f6;
  --color-2: #cee35c;
  --color-3: #dd66aa;
  --color-4: #ff21aa;
}

SCSS

$color-1: #d7c5f6;
$color-2: #cee35c;
$color-3: #dd66aa;
$color-4: #ff21aa;

TAILWIND

colors: {
  'brand-1': '#d7c5f6',
  'brand-2': '#cee35c',
  'brand-3': '#dd66aa',
  'brand-4': '#ff21aa',
}

RGB Array

[215, 197, 246], [206, 227, 92], [221, 102, 170], [255, 33, 170]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #D7C5F6, #CEE35C, #DD66AA, #FF21AA 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 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d7c5f6; --color-2: #cee35c; --color-3: #dd66aa; --color-4: #ff21aa. 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 4-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