#F2FFC1 + #E2E6D3 + #E1D3E6 + #DDB5EB + #CE8AEB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2FFC1

Willow Green · Beige · Mint Green

HEX

#F2FFC1

RGB

rgb(242, 255, 193)

HSL

hsl(73, 100%, 88%)

HSB

hsb(73, 24%, 100%)

CMYK

cmyk(5%, 0%, 24%, 0%)

Oklch

oklch(97.5% 0.081 117.5)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#E2E6D3

Willow Green · LightGray · Mint Green

HEX

#E2E6D3

RGB

rgb(226, 230, 211)

HSL

hsl(73, 28%, 86%)

HSB

hsb(73, 8%, 90%)

CMYK

cmyk(2%, 0%, 8%, 10%)

Oklch

oklch(91.7% 0.026 116.6)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#E1D3E6

Lilac · LightGray · Lavender

HEX

#E1D3E6

RGB

rgb(225, 211, 230)

HSL

hsl(284, 28%, 86%)

HSB

hsb(284, 8%, 90%)

CMYK

cmyk(2%, 8%, 0%, 10%)

Oklch

oklch(88.4% 0.030 317.2)

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

#DDB5EB

Lilac · LightGray · Lavender

HEX

#DDB5EB

RGB

rgb(221, 181, 235)

HSL

hsl(284, 57%, 82%)

HSB

hsb(284, 23%, 92%)

CMYK

cmyk(6%, 23%, 0%, 8%)

Oklch

oklch(82.6% 0.086 317.2)

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

#CE8AEB

Lilac · Violet · Lilac Purple

HEX

#CE8AEB

RGB

rgb(206, 138, 235)

HSL

hsl(282, 71%, 73%)

HSB

hsb(282, 41%, 92%)

CMYK

cmyk(12%, 41%, 0%, 8%)

Oklch

oklch(73.7% 0.152 315.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2FFC1

CFC2FF

Analogous

FFEEC2

F2FFC1

D3FFC2

Triadic

F2FFC1

C2F2FF

FFC2F2

Split-Comp.

F2FFC1

C2D3FF

EEC2FF

Tetradic

F2FFC1

C2FFEE

CFC2FF

FFC2D3

Contrast Matrix WCAG 2.1 Contrast

F2FFC1	E2E6D3	E1D3E6	DDB5EB	CE8AEB
—	1.2 Fail	1.4 Fail	1.7 Fail	2.3 Fail
1.2 Fail	—	1.1 Fail	1.4 Fail	1.9 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.7 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.4 Fail
2.3 Fail	1.9 Fail	1.7 Fail	1.4 Fail	—

White BG

1.1Fail

1.3Fail

1.4Fail

1.8Fail

2.5Fail

Black BG

19.8AAA

16.5AAA

14.7AAA

11.9AAA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8D0

E4E4D8

DBDBE1

CCCBDE

B1B0D4

Deuteranopia

F7F6D4

E4E3D9

DCDDE0

CED1DB

B5BACE

Tritanopia

F3DCDE

E2DBDC

E0DEDD

DBD4D1

CBC1BD

Achromatopsia

F4F4F4

E3E3E3

D9D9D9

C7C7C7

A9A9A9

Shades & Tints Shades & Tints

#F2FFC1

Dark

Light

#E2E6D3

Dark

Light

#E1D3E6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2ffc1;
  --color-2: #e2e6d3;
  --color-3: #e1d3e6;
  --color-4: #ddb5eb;
  --color-5: #ce8aeb;
}

SCSS

$color-1: #f2ffc1;
$color-2: #e2e6d3;
$color-3: #e1d3e6;
$color-4: #ddb5eb;
$color-5: #ce8aeb;

TAILWIND

colors: {
  'brand-1': '#f2ffc1',
  'brand-2': '#e2e6d3',
  'brand-3': '#e1d3e6',
  'brand-4': '#ddb5eb',
  'brand-5': '#ce8aeb',
}

RGB Array

[242, 255, 193], [226, 230, 211], [225, 211, 230], [221, 181, 235], [206, 138, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2FFC1, #E2E6D3, #E1D3E6, #DDB5EB, #CE8AEB 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: #f2ffc1; --color-2: #e2e6d3; --color-3: #e1d3e6; --color-4: #ddb5eb; --color-5: #ce8aeb. 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