#FFBFD1 + #F0C5C6 + #DBD0BF + #BFDBCA + #E6E0D5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFBFD1

Rouge · Pink · Cherry Blossom

HEX

#FFBFD1

RGB

rgb(255, 191, 209)

HSL

hsl(343, 100%, 87%)

HSB

hsb(343, 25%, 100%)

CMYK

cmyk(0%, 25%, 18%, 0%)

Oklch

oklch(86.8% 0.077 0.3)

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

#F0C5C6

Peach Pink · Pink · Cherry Blossom

HEX

#F0C5C6

RGB

rgb(240, 197, 198)

HSL

hsl(359, 59%, 86%)

HSB

hsb(359, 18%, 94%)

CMYK

cmyk(0%, 18%, 17%, 6%)

Oklch

oklch(86.1% 0.049 16.6)

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

#DBD0BF

Goose Yellow · LightGray · Peach Orange

HEX

#DBD0BF

RGB

rgb(219, 208, 191)

HSL

hsl(36, 28%, 80%)

HSB

hsb(36, 13%, 86%)

CMYK

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

Oklch

oklch(86.2% 0.026 78.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#BFDBCA

Celadon · LightGray · Apple Green

HEX

#BFDBCA

RGB

rgb(191, 219, 202)

HSL

hsl(144, 28%, 80%)

HSB

hsb(144, 13%, 86%)

CMYK

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

Oklch

oklch(86.6% 0.038 158.9)

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

#E6E0D5

Goose Yellow · LightGray · Peach Orange

HEX

#E6E0D5

RGB

rgb(230, 224, 213)

HSL

hsl(39, 25%, 87%)

HSB

hsb(39, 7%, 90%)

CMYK

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

Oklch

oklch(90.8% 0.016 82.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBFD1

BDFFEC

Analogous

FFBDF1

FFBFD1

FFCBBD

Triadic

FFBFD1

CFFFBD

BDCFFF

Split-Comp.

FFBFD1

BDFFCB

BDF1FF

Tetradic

FFBFD1

F1FFBD

BDFFEC

CBBDFF

Contrast Matrix WCAG 2.1 Contrast

FFBFD1	F0C5C6	DBD0BF	BFDBCA	E6E0D5
—	1.0 Fail	1.0 Fail	1.0 Fail	1.2 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.2 Fail
1.0 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
1.2 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

1.5Fail

1.6Fail

1.5Fail

1.3Fail

Black BG

13.6AAA

13.5AAA

13.8AAA

14.2AAA

16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3CD

DDDDC6

D6D6C3

CBCBCE

E3E3D8

Deuteranopia

E7ECCC

E0E3C6

D7D8C4

CAC7CF

E4E4D8

Tritanopia

FCC9C8

EEC6C6

DAC6C7

C0D1D2

E6DADA

Achromatopsia

D4D4D4

D2D2D2

D1D1D1

E1E1E1

Shades & Tints Shades & Tints

#FFBFD1

Dark

Light

#F0C5C6

Dark

Light

#DBD0BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbfd1;
  --color-2: #f0c5c6;
  --color-3: #dbd0bf;
  --color-4: #bfdbca;
  --color-5: #e6e0d5;
}

SCSS

$color-1: #ffbfd1;
$color-2: #f0c5c6;
$color-3: #dbd0bf;
$color-4: #bfdbca;
$color-5: #e6e0d5;

TAILWIND

colors: {
  'brand-1': '#ffbfd1',
  'brand-2': '#f0c5c6',
  'brand-3': '#dbd0bf',
  'brand-4': '#bfdbca',
  'brand-5': '#e6e0d5',
}

RGB Array

[255, 191, 209], [240, 197, 198], [219, 208, 191], [191, 219, 202], [230, 224, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBFD1, #F0C5C6, #DBD0BF, #BFDBCA, #E6E0D5 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: #ffbfd1; --color-2: #f0c5c6; --color-3: #dbd0bf; --color-4: #bfdbca; --color-5: #e6e0d5. 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