#C4DFDA + #F5E9CF + #DEB0CA + #B292C3 + #9480BD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C4DFDA

Jade · LightGray · Glacier Blue

HEX

#C4DFDA

RGB

rgb(196, 223, 218)

HSL

hsl(169, 30%, 82%)

HSB

hsb(169, 12%, 87%)

CMYK

cmyk(12%, 0%, 2%, 13%)

Oklch

oklch(88.2% 0.029 183.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#F5E9CF

Goose Yellow · Bisque · Lemon Cream

HEX

#F5E9CF

RGB

rgb(245, 233, 207)

HSL

hsl(41, 66%, 89%)

HSB

hsb(41, 16%, 96%)

CMYK

cmyk(0%, 5%, 16%, 4%)

Oklch

oklch(93.7% 0.037 86.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#DEB0CA

Mauve · LightPink · Cherry Blossom

HEX

#DEB0CA

RGB

rgb(222, 176, 202)

HSL

hsl(326, 41%, 78%)

HSB

hsb(326, 21%, 87%)

CMYK

cmyk(0%, 21%, 9%, 13%)

Oklch

oklch(80.6% 0.063 343.7)

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

#B292C3

Lilac · DarkGray · Lilac Purple

HEX

#B292C3

RGB

rgb(178, 146, 195)

HSL

hsl(279, 29%, 67%)

HSB

hsb(279, 25%, 76%)

CMYK

cmyk(9%, 25%, 0%, 24%)

Oklch

oklch(70.6% 0.078 313.7)

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

#9480BD

Wisteria · LightSlateGray · Lilac Purple

HEX

#9480BD

RGB

rgb(148, 128, 189)

HSL

hsl(260, 32%, 62%)

HSB

hsb(260, 32%, 74%)

CMYK

cmyk(22%, 32%, 0%, 26%)

Oklch

oklch(64.1% 0.092 298.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4DFDA

DFC3C8

Analogous

C3DFCC

C4DFDA

C3D6DF

Triadic

C4DFDA

DAC3DF

DFDAC3

Split-Comp.

C4DFDA

DFC3D6

DFCCC3

Tetradic

C4DFDA

CCC3DF

DFC3C8

D6DFC3

Contrast Matrix WCAG 2.1 Contrast

C4DFDA	F5E9CF	DEB0CA	B292C3	9480BD
—	1.2 Fail	1.3 Fail	1.9 Fail	2.5 Fail
1.2 Fail	—	1.6 Fail	2.2 Fail	2.9 Fail
1.3 Fail	1.6 Fail	—	1.4 Fail	1.8 Fail
1.9 Fail	2.2 Fail	1.4 Fail	—	1.3 Fail
2.5 Fail	2.9 Fail	1.8 Fail	1.3 Fail	—

White BG

1.4Fail

1.2Fail

1.9Fail

2.7Fail

3.5AA Large

Black BG

14.9AAA

17.4AAA

11.2AAA

7.8AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0DB

F0F0D5

CACAC4

A4A4B7

8B8BAE

Deuteranopia

CECCDC

F1F1D7

CDD0C2

A6A8B4

8D8EAB

Tritanopia

C5DCDC

F4DADB

DCBFBE

B0AEAC

93A3A0

Achromatopsia

D6D6D6

EAEAEA

C1C1C1

A1A1A1

8D8D8D

Shades & Tints Shades & Tints

#C4DFDA

Dark

Light

#F5E9CF

Dark

Light

#DEB0CA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4dfda;
  --color-2: #f5e9cf;
  --color-3: #deb0ca;
  --color-4: #b292c3;
  --color-5: #9480bd;
}

SCSS

$color-1: #c4dfda;
$color-2: #f5e9cf;
$color-3: #deb0ca;
$color-4: #b292c3;
$color-5: #9480bd;

TAILWIND

colors: {
  'brand-1': '#c4dfda',
  'brand-2': '#f5e9cf',
  'brand-3': '#deb0ca',
  'brand-4': '#b292c3',
  'brand-5': '#9480bd',
}

RGB Array

[196, 223, 218], [245, 233, 207], [222, 176, 202], [178, 146, 195], [148, 128, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4DFDA, #F5E9CF, #DEB0CA, #B292C3, #9480BD 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: #c4dfda; --color-2: #f5e9cf; --color-3: #deb0ca; --color-4: #b292c3; --color-5: #9480bd. 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