#FCD9E0 + #F0D3D8 + #DBCFD9 + #BFC8D9 + #97BCD6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FCD9E0

Peach Pink · Linen · Cherry Blossom

HEX

#FCD9E0

RGB

rgb(252, 217, 224)

HSL

hsl(348, 85%, 92%)

HSB

hsb(348, 14%, 99%)

CMYK

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

Oklch

oklch(91.6% 0.040 4.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F0D3D8

Peach Pink · Pink · Cherry Blossom

HEX

#F0D3D8

RGB

rgb(240, 211, 216)

HSL

hsl(350, 49%, 88%)

HSB

hsb(350, 12%, 94%)

CMYK

cmyk(0%, 12%, 10%, 6%)

Oklch

oklch(89.2% 0.033 6.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#DBCFD9

Mauve · LightGray · Lavender

HEX

#DBCFD9

RGB

rgb(219, 207, 217)

HSL

hsl(310, 14%, 84%)

HSB

hsb(310, 5%, 86%)

CMYK

cmyk(0%, 5%, 1%, 14%)

Oklch

oklch(86.7% 0.019 331.1)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#BFC8D9

Azure · LightSteelBlue · Cobalt Blue

HEX

#BFC8D9

RGB

rgb(191, 200, 217)

HSL

hsl(219, 25%, 80%)

HSB

hsb(219, 12%, 85%)

CMYK

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

Oklch

oklch(83.1% 0.026 263.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#97BCD6

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#97BCD6

RGB

rgb(151, 188, 214)

HSL

hsl(205, 43%, 72%)

HSB

hsb(205, 29%, 84%)

CMYK

cmyk(29%, 12%, 0%, 16%)

Oklch

oklch(77.7% 0.055 239.0)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCD9E0

D9FCF5

Analogous

FCD9F2

FCD9E0

FCE4D9

Triadic

FCD9E0

E0FCD9

D9E0FC

Split-Comp.

FCD9E0

D9FCE4

D9F2FC

Tetradic

FCD9E0

F2FCD9

D9FCF5

E4D9FC

Contrast Matrix WCAG 2.1 Contrast

FCD9E0	F0D3D8	DBCFD9	BFC8D9	97BCD6
—	1.1 Fail	1.2 Fail	1.3 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.5 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

1.7Fail

2.0Fail

Black BG

16.1AAA

15.0AAA

13.9AAA

12.5AAA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDDE

E3E3D7

D6D6D7

C3C3D5

A7A7D0

Deuteranopia

EFF1DE

E5E7D7

D7D7D6

C2C2D4

A5A2CE

Tritanopia

FADDDD

EFD6D6

DAD5D4

BFD2D1

99CBCA

Achromatopsia

E4E4E4

DCDCDC

D4D4D4

C7C7C7

B4B4B4

Shades & Tints Shades & Tints

#FCD9E0

Dark

Light

#F0D3D8

Dark

Light

#DBCFD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcd9e0;
  --color-2: #f0d3d8;
  --color-3: #dbcfd9;
  --color-4: #bfc8d9;
  --color-5: #97bcd6;
}

SCSS

$color-1: #fcd9e0;
$color-2: #f0d3d8;
$color-3: #dbcfd9;
$color-4: #bfc8d9;
$color-5: #97bcd6;

TAILWIND

colors: {
  'brand-1': '#fcd9e0',
  'brand-2': '#f0d3d8',
  'brand-3': '#dbcfd9',
  'brand-4': '#bfc8d9',
  'brand-5': '#97bcd6',
}

RGB Array

[252, 217, 224], [240, 211, 216], [219, 207, 217], [191, 200, 217], [151, 188, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCD9E0, #F0D3D8, #DBCFD9, #BFC8D9, #97BCD6 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: #fcd9e0; --color-2: #f0d3d8; --color-3: #dbcfd9; --color-4: #bfc8d9; --color-5: #97bcd6. 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