#F896BF + #DFAFAF + #D9BCB6 + #EFC7C7 + #F2E1D1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F896BF

Rouge · LightPink · Cherry Blossom

HEX

#F896BF

RGB

rgb(248, 150, 191)

HSL

hsl(335, 88%, 78%)

HSB

hsb(335, 40%, 97%)

CMYK

cmyk(0%, 40%, 23%, 3%)

Oklch

oklch(78.6% 0.127 353.8)

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

#DFAFAF

Peach Pink · LightPink · Coral Red

HEX

#DFAFAF

RGB

rgb(223, 175, 175)

HSL

hsl(0, 43%, 78%)

HSB

hsb(0, 22%, 87%)

CMYK

cmyk(0%, 22%, 22%, 13%)

Oklch

oklch(79.7% 0.056 18.4)

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

#D9BCB6

Peach Pink · Silver · Coral Red

HEX

#D9BCB6

RGB

rgb(217, 188, 182)

HSL

hsl(10, 32%, 78%)

HSB

hsb(10, 16%, 85%)

CMYK

cmyk(0%, 13%, 16%, 15%)

Oklch

oklch(81.8% 0.034 31.6)

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

#EFC7C7

Peach Pink · Pink · Cherry Blossom

HEX

#EFC7C7

RGB

rgb(239, 199, 199)

HSL

hsl(0, 56%, 86%)

HSB

hsb(0, 17%, 94%)

CMYK

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

Oklch

oklch(86.4% 0.046 18.1)

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

#F2E1D1

Apricot · Bisque · Peach Orange

HEX

#F2E1D1

RGB

rgb(242, 225, 209)

HSL

hsl(29, 56%, 88%)

HSB

hsb(29, 14%, 95%)

CMYK

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

Oklch

oklch(91.9% 0.028 65.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F896BF

96F8CF

Analogous

F896F0

F896BF

F89E96

Triadic

F896BF

BFF896

96BFF8

Split-Comp.

F896BF

96F89E

96F0F8

Tetradic

F896BF

F0F896

96F8CF

9E96F8

Contrast Matrix WCAG 2.1 Contrast

F896BF	DFAFAF	D9BCB6	EFC7C7	F2E1D1
—	1.1 Fail	1.2 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.4 Fail	1.3 Fail	1.2 Fail	—	1.2 Fail
1.6 Fail	1.5 Fail	1.4 Fail	1.2 Fail	—

White BG

2.1Fail

1.9Fail

1.8Fail

1.5Fail

1.3Fail

Black BG

10.1AAA

10.9AAA

11.8AAA

13.7AAA

16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECDB5

CACAAF

CCCCB7

DEDDC7

EBEAD5

Deuteranopia

D3DBB3

CDD1AF

CED0B8

E0E3C7

ECEDD6

Tritanopia

F3ADAC

DDAFAF

D8B9B9

EDC7C7

F1D8D9

Achromatopsia

B8B8B8

BDBDBD

C4C4C4

D3D3D3

E4E4E4

Shades & Tints Shades & Tints

#F896BF

Dark

Light

#DFAFAF

Dark

Light

#D9BCB6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f896bf;
  --color-2: #dfafaf;
  --color-3: #d9bcb6;
  --color-4: #efc7c7;
  --color-5: #f2e1d1;
}

SCSS

$color-1: #f896bf;
$color-2: #dfafaf;
$color-3: #d9bcb6;
$color-4: #efc7c7;
$color-5: #f2e1d1;

TAILWIND

colors: {
  'brand-1': '#f896bf',
  'brand-2': '#dfafaf',
  'brand-3': '#d9bcb6',
  'brand-4': '#efc7c7',
  'brand-5': '#f2e1d1',
}

RGB Array

[248, 150, 191], [223, 175, 175], [217, 188, 182], [239, 199, 199], [242, 225, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F896BF, #DFAFAF, #D9BCB6, #EFC7C7, #F2E1D1 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: #f896bf; --color-2: #dfafaf; --color-3: #d9bcb6; --color-4: #efc7c7; --color-5: #f2e1d1. 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