#FAC4BB + #F7DFB0 + #FCF5D8 + #D5E6D8 + #B1BAB2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FAC4BB

Peach Pink · LightPink · Cherry Blossom

HEX

#FAC4BB

RGB

rgb(250, 196, 187)

HSL

hsl(9, 86%, 86%)

HSB

hsb(9, 25%, 98%)

CMYK

cmyk(0%, 22%, 25%, 2%)

Oklch

oklch(86.6% 0.063 29.3)

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

#F7DFB0

Goose Yellow · Wheat · Lemon Cream

HEX

#F7DFB0

RGB

rgb(247, 223, 176)

HSL

hsl(40, 82%, 83%)

HSB

hsb(40, 29%, 97%)

CMYK

cmyk(0%, 10%, 29%, 3%)

Oklch

oklch(91.2% 0.066 84.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#FCF5D8

Goose Yellow · Beige · Lemon Cream

HEX

#FCF5D8

RGB

rgb(252, 245, 216)

HSL

hsl(48, 86%, 92%)

HSB

hsb(48, 14%, 99%)

CMYK

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

Oklch

oklch(96.8% 0.039 95.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D5E6D8

Celadon · LightGray · Mint Green

HEX

#D5E6D8

RGB

rgb(213, 230, 216)

HSL

hsl(131, 25%, 87%)

HSB

hsb(131, 7%, 90%)

CMYK

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

Oklch

oklch(90.8% 0.026 150.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#B1BAB2

Silver Gray · DarkGray · Pearl Gray

HEX

#B1BAB2

RGB

rgb(177, 186, 178)

HSL

hsl(127, 6%, 71%)

HSB

hsb(127, 5%, 73%)

CMYK

cmyk(5%, 0%, 4%, 27%)

Oklch

oklch(78.0% 0.015 148.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAC4BB

BDF1FA

Analogous

FABDD2

FAC4BB

FAE5BD

Triadic

FAC4BB

BDFAC6

C6BDFA

Split-Comp.

FAC4BB

BDFAE5

BDD2FA

Tetradic

FAC4BB

D2FABD

BDF1FA

E5BDFA

Contrast Matrix WCAG 2.1 Contrast

FAC4BB	F7DFB0	FCF5D8	D5E6D8	B1BAB2
—	1.2 Fail	1.4 Fail	1.2 Fail	1.3 Fail
1.2 Fail	—	1.2 Fail	1.0 Fail	1.5 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.8 Fail
1.2 Fail	1.0 Fail	1.2 Fail	—	1.5 Fail
1.3 Fail	1.5 Fail	1.8 Fail	1.5 Fail	—

White BG

1.5Fail

1.3Fail

1.1Fail

1.3Fail

2.0Fail

Black BG

13.7AAA

16.1AAA

19.2AAA

16.1AAA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E2BD

EDECBB

F9F9DF

DCDDDB

B5B5B4

Deuteranopia

E6EABE

EEF0BE

F9FAE1

DBDADC

B4B4B4

Tritanopia

F7BFBF

F6C4C6

FCE5E6

D6DEDF

B1B5B6

Achromatopsia

D3D3D3

E1E1E1

F4F4F4

DFDFDF

B6B6B6

Shades & Tints Shades & Tints

#FAC4BB

Dark

Light

#F7DFB0

Dark

Light

#FCF5D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fac4bb;
  --color-2: #f7dfb0;
  --color-3: #fcf5d8;
  --color-4: #d5e6d8;
  --color-5: #b1bab2;
}

SCSS

$color-1: #fac4bb;
$color-2: #f7dfb0;
$color-3: #fcf5d8;
$color-4: #d5e6d8;
$color-5: #b1bab2;

TAILWIND

colors: {
  'brand-1': '#fac4bb',
  'brand-2': '#f7dfb0',
  'brand-3': '#fcf5d8',
  'brand-4': '#d5e6d8',
  'brand-5': '#b1bab2',
}

RGB Array

[250, 196, 187], [247, 223, 176], [252, 245, 216], [213, 230, 216], [177, 186, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAC4BB, #F7DFB0, #FCF5D8, #D5E6D8, #B1BAB2 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: #fac4bb; --color-2: #f7dfb0; --color-3: #fcf5d8; --color-4: #d5e6d8; --color-5: #b1bab2. 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