#FFFDE4 + #FFE2D0 + #EEDBDB + #CECCD9 + #9C9CC9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFFDE4

Fresh Green · LightYellow · Lemon Cream

HEX

#FFFDE4

RGB

rgb(255, 253, 228)

HSL

hsl(56, 100%, 95%)

HSB

hsb(56, 11%, 100%)

CMYK

cmyk(0%, 1%, 11%, 0%)

Oklch

oklch(98.9% 0.033 103.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FFE2D0

Apricot · Bisque · Peach Orange

HEX

#FFE2D0

RGB

rgb(255, 226, 208)

HSL

hsl(23, 100%, 91%)

HSB

hsb(23, 18%, 100%)

CMYK

cmyk(0%, 11%, 18%, 0%)

Oklch

oklch(93.2% 0.040 53.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#EEDBDB

Peach Pink · Linen · Cherry Blossom

HEX

#EEDBDB

RGB

rgb(238, 219, 219)

HSL

hsl(0, 36%, 90%)

HSB

hsb(0, 8%, 93%)

CMYK

cmyk(0%, 8%, 8%, 7%)

Oklch

oklch(90.7% 0.021 17.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#CECCD9

Wisteria · LightGray · Sky Blue

HEX

#CECCD9

RGB

rgb(206, 204, 217)

HSL

hsl(249, 15%, 83%)

HSB

hsb(249, 6%, 85%)

CMYK

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

Oklch

oklch(85.1% 0.018 293.1)

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

#9C9CC9

Wisteria · DarkGray · Cobalt Blue

HEX

#9C9CC9

RGB

rgb(156, 156, 201)

HSL

hsl(240, 29%, 70%)

HSB

hsb(240, 22%, 79%)

CMYK

cmyk(22%, 22%, 0%, 21%)

Oklch

oklch(70.9% 0.065 284.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFDE4

E5E7FF

Analogous

FFF1E5

FFFDE4

F4FFE5

Triadic

FFFDE4

E5FFFD

FDE5FF

Split-Comp.

FFFDE4

E5F4FF

F1E5FF

Tetradic

FFFDE4

E5FFF1

E5E7FF

FFE5F4

Contrast Matrix WCAG 2.1 Contrast

FFFDE4	FFE2D0	EEDBDB	CECCD9	9C9CC9
—	1.2 Fail	1.3 Fail	1.5 Fail	2.5 Fail
1.2 Fail	—	1.1 Fail	1.3 Fail	2.1 Fail
1.3 Fail	1.1 Fail	—	1.2 Fail	2.0 Fail
1.5 Fail	1.3 Fail	1.2 Fail	—	1.7 Fail
2.5 Fail	2.1 Fail	2.0 Fail	1.7 Fail	—

White BG

1.0Fail

1.2Fail

1.3Fail

1.6Fail

2.6Fail

Black BG

20.4AAA

17.0AAA

15.8AAA

13.3AAA

8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FEFEEA

F2F2D4

E6E6DB

CDCDD6

9C9CBE

Deuteranopia

FEFEEC

F4F6D5

E7E8DB

CDCDD5

9C9CBC

Tritanopia

FFEFF0

FED8D9

EDDBDB

CED3D3

9CB6B4

Achromatopsia

FBFBFB

E9E9E9

E1E1E1

CECECE

A1A1A1

Shades & Tints Shades & Tints

#FFFDE4

Dark

Light

#FFE2D0

Dark

Light

#EEDBDB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fffde4;
  --color-2: #ffe2d0;
  --color-3: #eedbdb;
  --color-4: #ceccd9;
  --color-5: #9c9cc9;
}

SCSS

$color-1: #fffde4;
$color-2: #ffe2d0;
$color-3: #eedbdb;
$color-4: #ceccd9;
$color-5: #9c9cc9;

TAILWIND

colors: {
  'brand-1': '#fffde4',
  'brand-2': '#ffe2d0',
  'brand-3': '#eedbdb',
  'brand-4': '#ceccd9',
  'brand-5': '#9c9cc9',
}

RGB Array

[255, 253, 228], [255, 226, 208], [238, 219, 219], [206, 204, 217], [156, 156, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFDE4, #FFE2D0, #EEDBDB, #CECCD9, #9C9CC9 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: #fffde4; --color-2: #ffe2d0; --color-3: #eedbdb; --color-4: #ceccd9; --color-5: #9c9cc9. 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