#F1E6FD + #DBF8ED + #E9CCE8 + #CDD9DC + #F4CCDA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1E6FD

Wisteria · Lavender · Lavender

HEX

#F1E6FD

RGB

rgb(241, 230, 253)

HSL

hsl(269, 85%, 95%)

HSB

hsb(269, 9%, 99%)

CMYK

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

Oklch

oklch(94.0% 0.033 307.2)

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

#DBF8ED

Jade · Lavender · Mint Green

HEX

#DBF8ED

RGB

rgb(219, 248, 237)

HSL

hsl(157, 67%, 92%)

HSB

hsb(157, 12%, 97%)

CMYK

cmyk(12%, 0%, 4%, 3%)

Oklch

oklch(95.5% 0.034 170.8)

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

#E9CCE8

Mauve · LightGray · Lavender

HEX

#E9CCE8

RGB

rgb(233, 204, 232)

HSL

hsl(302, 40%, 86%)

HSB

hsb(302, 12%, 91%)

CMYK

cmyk(0%, 12%, 0%, 9%)

Oklch

oklch(87.8% 0.049 327.1)

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

#CDD9DC

Sky Blue · LightGray · Glacier Blue

HEX

#CDD9DC

RGB

rgb(205, 217, 220)

HSL

hsl(192, 18%, 83%)

HSB

hsb(192, 7%, 86%)

CMYK

cmyk(7%, 1%, 0%, 14%)

Oklch

oklch(87.7% 0.014 214.4)

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

#F4CCDA

Rouge · Pink · Cherry Blossom

HEX

#F4CCDA

RGB

rgb(244, 204, 218)

HSL

hsl(339, 65%, 88%)

HSB

hsb(339, 16%, 96%)

CMYK

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

Oklch

oklch(88.3% 0.048 355.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1E6FD

F3FDE7

Analogous

E7E8FD

F1E6FD

FDE7FD

Triadic

F1E6FD

FDF2E7

E7FDF2

Split-Comp.

F1E6FD

FDFDE7

E8FDE7

Tetradic

F1E6FD

FDE7E8

F3FDE7

E7FDFD

Contrast Matrix WCAG 2.1 Contrast

F1E6FD	DBF8ED	E9CCE8	CDD9DC	F4CCDA
—	1.1 Fail	1.2 Fail	1.2 Fail	1.2 Fail
1.1 Fail	—	1.3 Fail	1.3 Fail	1.3 Fail
1.2 Fail	1.3 Fail	—	1.0 Fail	1.0 Fail
1.2 Fail	1.3 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.3 Fail	1.0 Fail	1.0 Fail	—

White BG

1.2Fail

1.1Fail

1.5Fail

1.4Fail

Black BG

17.5AAA

18.7AAA

14.3AAA

14.6AAA

14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECF7

E8E8F0

DCDCE1

D2D2DB

E3E2D7

Deuteranopia

EDEEF6

E6E4F0

DEE0E0

D2D1DB

E5E8D6

Tritanopia

F0F3F2

DCF2F2

E8DCDB

CEDBDB

F2D4D3

Achromatopsia

ECECEC

EEEEEE

D8D8D8

D6D6D6

DADADA

Shades & Tints Shades & Tints

#F1E6FD

Dark

Light

#DBF8ED

Dark

Light

#E9CCE8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1e6fd;
  --color-2: #dbf8ed;
  --color-3: #e9cce8;
  --color-4: #cdd9dc;
  --color-5: #f4ccda;
}

SCSS

$color-1: #f1e6fd;
$color-2: #dbf8ed;
$color-3: #e9cce8;
$color-4: #cdd9dc;
$color-5: #f4ccda;

TAILWIND

colors: {
  'brand-1': '#f1e6fd',
  'brand-2': '#dbf8ed',
  'brand-3': '#e9cce8',
  'brand-4': '#cdd9dc',
  'brand-5': '#f4ccda',
}

RGB Array

[241, 230, 253], [219, 248, 237], [233, 204, 232], [205, 217, 220], [244, 204, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1E6FD, #DBF8ED, #E9CCE8, #CDD9DC, #F4CCDA 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: #f1e6fd; --color-2: #dbf8ed; --color-3: #e9cce8; --color-4: #cdd9dc; --color-5: #f4ccda. 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