#F0EAE9 + #FCCFC4 + #C4B3AF + #A7BDC4 + #C6EAF5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0EAE9

Peach Pink · Linen · Cherry Blossom

HEX

#F0EAE9

RGB

rgb(240, 234, 233)

HSL

hsl(9, 19%, 93%)

HSB

hsb(9, 3%, 94%)

CMYK

cmyk(0%, 3%, 3%, 6%)

Oklch

oklch(94.1% 0.007 28.8)

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

#FCCFC4

Peach Pink · Pink · Cherry Blossom

HEX

#FCCFC4

RGB

rgb(252, 207, 196)

HSL

hsl(12, 90%, 88%)

HSB

hsb(12, 22%, 99%)

CMYK

cmyk(0%, 18%, 22%, 1%)

Oklch

oklch(89.0% 0.053 34.0)

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

#C4B3AF

Peach Pink · Silver · Coral Red

HEX

#C4B3AF

RGB

rgb(196, 179, 175)

HSL

hsl(11, 15%, 73%)

HSB

hsb(11, 11%, 77%)

CMYK

cmyk(0%, 9%, 11%, 23%)

Oklch

oklch(78.0% 0.020 33.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A7BDC4

Sky Blue · Silver · Lake Green

HEX

#A7BDC4

RGB

rgb(167, 189, 196)

HSL

hsl(194, 20%, 71%)

HSB

hsb(194, 15%, 77%)

CMYK

cmyk(15%, 4%, 0%, 23%)

Oklch

oklch(78.4% 0.026 218.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#C6EAF5

Sky Blue · Lavender · Glacier Blue

HEX

#C6EAF5

RGB

rgb(198, 234, 245)

HSL

hsl(194, 70%, 87%)

HSB

hsb(194, 19%, 96%)

CMYK

cmyk(19%, 4%, 0%, 4%)

Oklch

oklch(91.5% 0.040 218.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0EAE9

EAF0F1

Analogous

F1EAEC

F0EAE9

F1EEEA

Triadic

F0EAE9

EAF1EB

EBEAF1

Split-Comp.

F0EAE9

EAF1EE

EAECF1

Tetradic

F0EAE9

ECF1EA

EAF0F1

EEEAF1

Contrast Matrix WCAG 2.1 Contrast

F0EAE9	FCCFC4	C4B3AF	A7BDC4	C6EAF5
—	1.2 Fail	1.7 Fail	1.6 Fail	1.1 Fail
1.2 Fail	—	1.4 Fail	1.4 Fail	1.1 Fail
1.7 Fail	1.4 Fail	—	1.0 Fail	1.6 Fail
1.6 Fail	1.4 Fail	1.0 Fail	—	1.5 Fail
1.1 Fail	1.1 Fail	1.6 Fail	1.5 Fail	—

White BG

1.2Fail

1.4Fail

2.0Fail

1.3Fail

Black BG

17.7AAA

14.9AAA

10.4AAA

10.7AAA

16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDE9

E9E8C7

BDBCB0

B1B1C2

D6D6F2

Deuteranopia

EEEEE9

EBEEC7

BEBFB0

AFAEC2

D4D1F2

Tritanopia

F0E9E9

FAC9C9

C3B1B1

A8C1C1

C8F0F0

Achromatopsia

ECECEC

DBDBDB

B8B8B8

B7B7B7

E0E0E0

Shades & Tints Shades & Tints

#F0EAE9

Dark

Light

#FCCFC4

Dark

Light

#C4B3AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0eae9;
  --color-2: #fccfc4;
  --color-3: #c4b3af;
  --color-4: #a7bdc4;
  --color-5: #c6eaf5;
}

SCSS

$color-1: #f0eae9;
$color-2: #fccfc4;
$color-3: #c4b3af;
$color-4: #a7bdc4;
$color-5: #c6eaf5;

TAILWIND

colors: {
  'brand-1': '#f0eae9',
  'brand-2': '#fccfc4',
  'brand-3': '#c4b3af',
  'brand-4': '#a7bdc4',
  'brand-5': '#c6eaf5',
}

RGB Array

[240, 234, 233], [252, 207, 196], [196, 179, 175], [167, 189, 196], [198, 234, 245]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0EAE9, #FCCFC4, #C4B3AF, #A7BDC4, #C6EAF5 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: #f0eae9; --color-2: #fccfc4; --color-3: #c4b3af; --color-4: #a7bdc4; --color-5: #c6eaf5. 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