#FFE9CC + #F0CACA + #E1ABC8 + #D28BC6 + #C36CC4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFE9CC

Goose Yellow · Bisque · Peach Orange

HEX

#FFE9CC

RGB

rgb(255, 233, 204)

HSL

hsl(34, 100%, 90%)

HSB

hsb(34, 20%, 100%)

CMYK

cmyk(0%, 9%, 20%, 0%)

Oklch

oklch(94.4% 0.045 74.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F0CACA

Peach Pink · Pink · Cherry Blossom

HEX

#F0CACA

RGB

rgb(240, 202, 202)

HSL

hsl(0, 56%, 87%)

HSB

hsb(0, 16%, 94%)

CMYK

cmyk(0%, 16%, 16%, 6%)

Oklch

oklch(87.1% 0.043 18.0)

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

#E1ABC8

Mauve · LightPink · Cherry Blossom

HEX

#E1ABC8

RGB

rgb(225, 171, 200)

HSL

hsl(328, 47%, 78%)

HSB

hsb(328, 24%, 88%)

CMYK

cmyk(0%, 24%, 11%, 12%)

Oklch

oklch(79.9% 0.073 345.4)

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

#D28BC6

Mauve · Orchid · Lilac Purple

HEX

#D28BC6

RGB

rgb(210, 139, 198)

HSL

hsl(310, 44%, 68%)

HSB

hsb(310, 34%, 82%)

CMYK

cmyk(0%, 34%, 6%, 18%)

Oklch

oklch(72.7% 0.115 332.9)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#C36CC4

Dark Plum · MediumOrchid · Violet

HEX

#C36CC4

RGB

rgb(195, 108, 196)

HSL

hsl(299, 43%, 60%)

HSB

hsb(299, 45%, 77%)

CMYK

cmyk(1%, 45%, 0%, 23%)

Oklch

oklch(66.0% 0.157 326.8)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE9CC

CCE2FF

Analogous

FFCFCC

FFE9CC

FCFFCC

Triadic

FFE9CC

CCFFE9

E9CCFF

Split-Comp.

FFE9CC

CCFCFF

CFCCFF

Tetradic

FFE9CC

CCFFCF

CCE2FF

FFCCFC

Contrast Matrix WCAG 2.1 Contrast

FFE9CC	F0CACA	E1ABC8	D28BC6	C36CC4
—	1.3 Fail	1.6 Fail	2.2 Fail	2.8 Fail
1.3 Fail	—	1.3 Fail	1.7 Fail	2.2 Fail
1.6 Fail	1.3 Fail	—	1.3 Fail	1.7 Fail
2.2 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
2.8 Fail	2.2 Fail	1.7 Fail	1.3 Fail	—

White BG

1.2Fail

1.5Fail

1.9Fail

2.5Fail

3.4AA Large

Black BG

17.8AAA

14.0AAA

10.9AAA

8.2AAA

6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5D3

E0DFCA

CAC9C1

B3B3B8

9D9DAF

Deuteranopia

F7F8D5

E2E5CA

CDD1BF

B7BDB4

A2A9AA

Tritanopia

FED9DA

EECACA

DEBBBA

CEACAA

BF9E9A

Achromatopsia

ECECEC

D5D5D5

BEBEBE

A7A7A7

909090

Shades & Tints Shades & Tints

#FFE9CC

Dark

Light

#F0CACA

Dark

Light

#E1ABC8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe9cc;
  --color-2: #f0caca;
  --color-3: #e1abc8;
  --color-4: #d28bc6;
  --color-5: #c36cc4;
}

SCSS

$color-1: #ffe9cc;
$color-2: #f0caca;
$color-3: #e1abc8;
$color-4: #d28bc6;
$color-5: #c36cc4;

TAILWIND

colors: {
  'brand-1': '#ffe9cc',
  'brand-2': '#f0caca',
  'brand-3': '#e1abc8',
  'brand-4': '#d28bc6',
  'brand-5': '#c36cc4',
}

RGB Array

[255, 233, 204], [240, 202, 202], [225, 171, 200], [210, 139, 198], [195, 108, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFE9CC, #F0CACA, #E1ABC8, #D28BC6, #C36CC4 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: #ffe9cc; --color-2: #f0caca; --color-3: #e1abc8; --color-4: #d28bc6; --color-5: #c36cc4. 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