#DFBDD1 + #D9868B + #FC3263 + #AC768F + #9499BF · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DFBDD1

Mauve · LightGray · Cherry Blossom

HEX

#DFBDD1

RGB

rgb(223, 189, 209)

HSL

hsl(325, 35%, 81%)

HSB

hsb(325, 15%, 87%)

CMYK

cmyk(0%, 15%, 6%, 13%)

Oklch

oklch(83.4% 0.047 342.0)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#D9868B

Peach Pink · LightCoral · Coral Red

HEX

#D9868B

RGB

rgb(217, 134, 139)

HSL

hsl(356, 52%, 69%)

HSB

hsb(356, 38%, 85%)

CMYK

cmyk(0%, 38%, 36%, 15%)

Oklch

oklch(70.8% 0.102 16.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FC3263

Vermilion · Tomato · Passion Red

HEX

#FC3263

RGB

rgb(252, 50, 99)

HSL

hsl(345, 97%, 59%)

HSB

hsb(345, 80%, 99%)

CMYK

cmyk(0%, 80%, 61%, 1%)

Oklch

oklch(65.0% 0.233 13.9)

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

#AC768F

Dark Violet · Gray · Rose Pink

HEX

#AC768F

RGB

rgb(172, 118, 143)

HSL

hsl(332, 25%, 57%)

HSB

hsb(332, 31%, 67%)

CMYK

cmyk(0%, 31%, 17%, 33%)

Oklch

oklch(62.9% 0.075 350.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#9499BF

Azure · DarkGray · Cobalt Blue

HEX

#9499BF

RGB

rgb(148, 153, 191)

HSL

hsl(233, 25%, 66%)

HSB

hsb(233, 23%, 75%)

CMYK

cmyk(23%, 20%, 0%, 25%)

Oklch

oklch(69.2% 0.056 279.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFBDD1

BEE0CC

Analogous

DDBEE0

DFBDD1

E0BEC0

Triadic

DFBDD1

D1E0BE

BED1E0

Split-Comp.

DFBDD1

C0E0BE

BEE0DD

Tetradic

DFBDD1

E0DDBE

BEE0CC

BEC0E0

Contrast Matrix WCAG 2.1 Contrast

DFBDD1	D9868B	FC3263	AC768F	9499BF
—	1.6 Fail	2.1 Fail	2.1 Fail	1.6 Fail
1.6 Fail	—	1.3 Fail	1.3 Fail	1.0 Fail
2.1 Fail	1.3 Fail	—	1.0 Fail	1.3 Fail
2.1 Fail	1.3 Fail	1.0 Fail	—	1.3 Fail
1.6 Fail	1.0 Fail	1.3 Fail	1.3 Fail	—

White BG

1.7Fail

2.7Fail

3.6AA Large

3.7AA Large

2.8Fail

Black BG

12.3AAA

7.7AAA

5.8AA

5.7AA

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0CC

B5B48A

A5A357

959489

9696B6

Deuteranopia

D2D5CB

BAC08A

B0BF54

989C88

9696B4

Tritanopia

DDC8C8

D58989

F24E4C

A98483

94AFAD

Achromatopsia

C9C9C9

9F9F9F

747474

898989

9C9C9C

Shades & Tints Shades & Tints

#DFBDD1

Dark

Light

#D9868B

Dark

Light

#FC3263

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfbdd1;
  --color-2: #d9868b;
  --color-3: #fc3263;
  --color-4: #ac768f;
  --color-5: #9499bf;
}

SCSS

$color-1: #dfbdd1;
$color-2: #d9868b;
$color-3: #fc3263;
$color-4: #ac768f;
$color-5: #9499bf;

TAILWIND

colors: {
  'brand-1': '#dfbdd1',
  'brand-2': '#d9868b',
  'brand-3': '#fc3263',
  'brand-4': '#ac768f',
  'brand-5': '#9499bf',
}

RGB Array

[223, 189, 209], [217, 134, 139], [252, 50, 99], [172, 118, 143], [148, 153, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #DFBDD1, #D9868B, #FC3263, #AC768F, #9499BF 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: #dfbdd1; --color-2: #d9868b; --color-3: #fc3263; --color-4: #ac768f; --color-5: #9499bf. 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 cool-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