#D2C7CF + #EED4F9 + #F5164D + #AFB4D0 + #A4EDC9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D2C7CF

Mauve · LightGray · Lilac Purple

HEX

#D2C7CF

RGB

rgb(210, 199, 207)

HSL

hsl(316, 11%, 80%)

HSB

hsb(316, 5%, 82%)

CMYK

cmyk(0%, 5%, 1%, 18%)

Oklch

oklch(84.1% 0.016 335.1)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#EED4F9

Lilac · Lavender · Lavender

HEX

#EED4F9

RGB

rgb(238, 212, 249)

HSL

hsl(282, 76%, 90%)

HSB

hsb(282, 15%, 98%)

CMYK

cmyk(4%, 15%, 0%, 2%)

Oklch

oklch(90.3% 0.057 315.9)

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

#F5164D

Vermilion · Crimson · Passion Red

HEX

#F5164D

RGB

rgb(245, 22, 77)

HSL

hsl(345, 92%, 52%)

HSB

hsb(345, 91%, 96%)

CMYK

cmyk(0%, 91%, 69%, 4%)

Oklch

oklch(62.0% 0.241 17.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#AFB4D0

Azure · LightSteelBlue · Cobalt Blue

HEX

#AFB4D0

RGB

rgb(175, 180, 208)

HSL

hsl(231, 26%, 75%)

HSB

hsb(231, 16%, 82%)

CMYK

cmyk(16%, 13%, 0%, 18%)

Oklch

oklch(77.5% 0.040 277.4)

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

#A4EDC9

Jade · LightBlue · Apple Green

HEX

#A4EDC9

RGB

rgb(164, 237, 201)

HSL

hsl(150, 67%, 79%)

HSB

hsb(150, 31%, 93%)

CMYK

cmyk(31%, 0%, 15%, 7%)

Oklch

oklch(88.8% 0.088 162.5)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2C7CF

C6D2C9

Analogous

CFC6D2

D2C7CF

D2C6C9

Triadic

D2C7CF

CFD2C6

C6CFD2

Split-Comp.

D2C7CF

C9D2C6

C6D2CF

Tetradic

D2C7CF

D2CFC6

C6D2C9

C6C9D2

Contrast Matrix WCAG 2.1 Contrast

D2C7CF	EED4F9	F5164D	AFB4D0	A4EDC9
—	1.2 Fail	2.5 Fail	1.2 Fail	1.2 Fail
1.2 Fail	—	3.0 AA Large	1.5 Fail	1.0 Fail
2.5 Fail	3.0 AA Large	—	2.0 Fail	3.0 AA Large
1.2 Fail	1.5 Fail	2.0 Fail	—	1.5 Fail
1.2 Fail	1.0 Fail	3.0 AA Large	1.5 Fail	—

White BG

1.6Fail

1.4Fail

4.1AA Large

2.0Fail

1.4Fail

Black BG

12.8AAA

15.4AAA

5.1AA

10.3AAA

15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCDCD

E3E3F0

949240

B1B1C9

C4C4D2

Deuteranopia

CECFCD

E4E6EE

A1B23D

B1B1C8

BFBAD4

Tritanopia

D1CCCB

EDE9E7

EA3533

AFC4C3

A8D9DA

Achromatopsia

CBCBCB

E0E0E0

5F5F5F

B6B6B6

D3D3D3

Shades & Tints Shades & Tints

#D2C7CF

Dark

Light

#EED4F9

Dark

Light

#F5164D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2c7cf;
  --color-2: #eed4f9;
  --color-3: #f5164d;
  --color-4: #afb4d0;
  --color-5: #a4edc9;
}

SCSS

$color-1: #d2c7cf;
$color-2: #eed4f9;
$color-3: #f5164d;
$color-4: #afb4d0;
$color-5: #a4edc9;

TAILWIND

colors: {
  'brand-1': '#d2c7cf',
  'brand-2': '#eed4f9',
  'brand-3': '#f5164d',
  'brand-4': '#afb4d0',
  'brand-5': '#a4edc9',
}

RGB Array

[210, 199, 207], [238, 212, 249], [245, 22, 77], [175, 180, 208], [164, 237, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2C7CF, #EED4F9, #F5164D, #AFB4D0, #A4EDC9 is ideal for: health products, baby brands, fresh-style blogs. 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: #d2c7cf; --color-2: #eed4f9; --color-3: #f5164d; --color-4: #afb4d0; --color-5: #a4edc9. 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 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