#FFF7CD + #EDE5BE + #FAB4CF + #D69AB1 + #897E84 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFF7CD

Fresh Green · Beige · Lemon Cream

HEX

#FFF7CD

RGB

rgb(255, 247, 205)

HSL

hsl(50, 100%, 90%)

HSB

hsb(50, 20%, 100%)

CMYK

cmyk(0%, 3%, 20%, 0%)

Oklch

oklch(97.2% 0.055 98.4)

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

#EDE5BE

Fresh Green · Wheat · Lemon Cream

HEX

#EDE5BE

RGB

rgb(237, 229, 190)

HSL

hsl(50, 57%, 84%)

HSB

hsb(50, 20%, 93%)

CMYK

cmyk(0%, 3%, 20%, 7%)

Oklch

oklch(91.8% 0.052 97.7)

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

#FAB4CF

Rouge · Pink · Cherry Blossom

HEX

#FAB4CF

RGB

rgb(250, 180, 207)

HSL

hsl(337, 88%, 84%)

HSB

hsb(337, 28%, 98%)

CMYK

cmyk(0%, 28%, 17%, 2%)

Oklch

oklch(84.3% 0.088 354.3)

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

#D69AB1

Rouge · Tan · Rose Pink

HEX

#D69AB1

RGB

rgb(214, 154, 177)

HSL

hsl(337, 42%, 72%)

HSB

hsb(337, 28%, 84%)

CMYK

cmyk(0%, 28%, 17%, 16%)

Oklch

oklch(75.0% 0.077 354.4)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#897E84

Ash · Gray · Warm Gray

HEX

#897E84

RGB

rgb(137, 126, 132)

HSL

hsl(327, 4%, 52%)

HSB

hsb(327, 8%, 54%)

CMYK

cmyk(0%, 8%, 4%, 46%)

Oklch

oklch(60.5% 0.016 343.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF7CD

CCD4FF

Analogous

FFDDCC

FFF7CD

EEFFCC

Triadic

FFF7CD

CCFFF7

F6CCFF

Split-Comp.

FFF7CD

CCEEFF

DDCCFF

Tetradic

FFF7CD

CCFFDD

CCD4FF

FFCCEE

Contrast Matrix WCAG 2.1 Contrast

FFF7CD	EDE5BE	FAB4CF	D69AB1	897E84
—	1.2 Fail	1.6 Fail	2.1 Fail	3.6 AA Large
1.2 Fail	—	1.3 Fail	1.8 Fail	3.1 AA Large
1.6 Fail	1.3 Fail	—	1.4 Fail	2.3 Fail
2.1 Fail	1.8 Fail	1.4 Fail	—	1.7 Fail
3.6 AA Large	3.1 AA Large	2.3 Fail	1.7 Fail	—

White BG

1.1Fail

1.3Fail

1.7Fail

2.3Fail

3.9AA Large

Black BG

19.4AAA

16.6AAA

12.5AAA

9.1AAA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFBD7

EAE9C7

DCDBC8

BCBBAB

848483

Deuteranopia

FCFDDA

EAEBCA

E0E5C7

C0C4AA

858682

Tritanopia

FFDFE1

EDCFD1

F7C3C2

D3A7A6

888181

Achromatopsia

F5F5F5

E3E3E3

CCCCCC

AFAFAF

828282

Shades & Tints Shades & Tints

#FFF7CD

Dark

Light

#EDE5BE

Dark

Light

#FAB4CF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff7cd;
  --color-2: #ede5be;
  --color-3: #fab4cf;
  --color-4: #d69ab1;
  --color-5: #897e84;
}

SCSS

$color-1: #fff7cd;
$color-2: #ede5be;
$color-3: #fab4cf;
$color-4: #d69ab1;
$color-5: #897e84;

TAILWIND

colors: {
  'brand-1': '#fff7cd',
  'brand-2': '#ede5be',
  'brand-3': '#fab4cf',
  'brand-4': '#d69ab1',
  'brand-5': '#897e84',
}

RGB Array

[255, 247, 205], [237, 229, 190], [250, 180, 207], [214, 154, 177], [137, 126, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF7CD, #EDE5BE, #FAB4CF, #D69AB1, #897E84 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: #fff7cd; --color-2: #ede5be; --color-3: #fab4cf; --color-4: #d69ab1; --color-5: #897e84. 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