#F8E7EF + #FFDFE2 + #BEB5C8 + #BFC5DF + #AAB9D0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8E7EF

Rouge · Linen · Cherry Blossom

HEX

#F8E7EF

RGB

rgb(248, 231, 239)

HSL

hsl(332, 55%, 94%)

HSB

hsb(332, 7%, 97%)

CMYK

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

Oklch

oklch(94.4% 0.021 347.3)

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

#FFDFE2

Peach Pink · Linen · Cherry Blossom

HEX

#FFDFE2

RGB

rgb(255, 223, 226)

HSL

hsl(354, 100%, 94%)

HSB

hsb(354, 13%, 100%)

CMYK

cmyk(0%, 13%, 11%, 0%)

Oklch

oklch(93.1% 0.036 11.4)

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

#BEB5C8

Wisteria · Silver · Lilac Purple

HEX

#BEB5C8

RGB

rgb(190, 181, 200)

HSL

hsl(268, 15%, 75%)

HSB

hsb(268, 9%, 78%)

CMYK

cmyk(5%, 9%, 0%, 22%)

Oklch

oklch(78.6% 0.028 307.0)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#BFC5DF

Azure · LightSteelBlue · Sky Blue

HEX

#BFC5DF

RGB

rgb(191, 197, 223)

HSL

hsl(229, 33%, 81%)

HSB

hsb(229, 14%, 87%)

CMYK

cmyk(14%, 12%, 0%, 13%)

Oklch

oklch(82.7% 0.037 275.3)

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

#AAB9D0

Azure · LightSteelBlue · Cobalt Blue

HEX

#AAB9D0

RGB

rgb(170, 185, 208)

HSL

hsl(216, 29%, 74%)

HSB

hsb(216, 18%, 82%)

CMYK

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

Oklch

oklch(78.2% 0.037 258.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8E7EF

E7F8F0

Analogous

F8E7F8

F8E7EF

F8E8E7

Triadic

F8E7EF

EFF8E7

E7EFF8

Split-Comp.

F8E7EF

E7F8E8

E7F8F8

Tetradic

F8E7EF

F8F8E7

E7F8F0

E8E7F8

Contrast Matrix WCAG 2.1 Contrast

F8E7EF	FFDFE2	BEB5C8	BFC5DF	AAB9D0
—	1.0 Fail	1.7 Fail	1.4 Fail	1.7 Fail
1.0 Fail	—	1.6 Fail	1.4 Fail	1.6 Fail
1.7 Fail	1.6 Fail	—	1.2 Fail	1.0 Fail
1.4 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
1.7 Fail	1.6 Fail	1.0 Fail	1.2 Fail	—

White BG

1.2Fail

2.0Fail

1.7Fail

2.0Fail

Black BG

17.7AAA

16.9AAA

10.6AAA

12.3AAA

10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F0ED

F1F1E1

BABAC3

C2C2D9

B0B1CA

Deuteranopia

F2F3ED

F3F5E1

BBBBC2

C1C1D7

B0AFC9

Tritanopia

F7ECEB

FDE1E1

BEC0BF

BFD4D3

ABC6C5

Achromatopsia

EDEDED

E9E9E9

BABABA

C6C6C6

B7B7B7

Shades & Tints Shades & Tints

#F8E7EF

Dark

Light

#FFDFE2

Dark

Light

#BEB5C8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8e7ef;
  --color-2: #ffdfe2;
  --color-3: #beb5c8;
  --color-4: #bfc5df;
  --color-5: #aab9d0;
}

SCSS

$color-1: #f8e7ef;
$color-2: #ffdfe2;
$color-3: #beb5c8;
$color-4: #bfc5df;
$color-5: #aab9d0;

TAILWIND

colors: {
  'brand-1': '#f8e7ef',
  'brand-2': '#ffdfe2',
  'brand-3': '#beb5c8',
  'brand-4': '#bfc5df',
  'brand-5': '#aab9d0',
}

RGB Array

[248, 231, 239], [255, 223, 226], [190, 181, 200], [191, 197, 223], [170, 185, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8E7EF, #FFDFE2, #BEB5C8, #BFC5DF, #AAB9D0 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: #f8e7ef; --color-2: #ffdfe2; --color-3: #beb5c8; --color-4: #bfc5df; --color-5: #aab9d0. 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