#DFA2C4 + #F1BABC + #E6DEB1 + #ECE7E6 + #F8F7F0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DFA2C4

Mauve · LightPink · Rose Pink

HEX

#DFA2C4

RGB

rgb(223, 162, 196)

HSL

hsl(327, 49%, 75%)

HSB

hsb(327, 27%, 87%)

CMYK

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

Oklch

oklch(78.0% 0.084 344.7)

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

#F1BABC

Peach Pink · LightPink · Cherry Blossom

HEX

#F1BABC

RGB

rgb(241, 186, 188)

HSL

hsl(358, 66%, 84%)

HSB

hsb(358, 23%, 95%)

CMYK

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

Oklch

oklch(83.9% 0.064 16.1)

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

#E6DEB1

Fresh Green · Wheat · Lemon Cream

HEX

#E6DEB1

RGB

rgb(230, 222, 177)

HSL

hsl(51, 51%, 80%)

HSB

hsb(51, 23%, 90%)

CMYK

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

Oklch

oklch(89.6% 0.060 99.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#ECE7E6

Peach Pink · Linen · Cherry Blossom

HEX

#ECE7E6

RGB

rgb(236, 231, 230)

HSL

hsl(10, 14%, 91%)

HSB

hsb(10, 3%, 93%)

CMYK

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

Oklch

oklch(93.2% 0.006 31.1)

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

#F8F7F0

Fresh Green · SeaShell · Lemon Cream

HEX

#F8F7F0

RGB

rgb(248, 247, 240)

HSL

hsl(53, 36%, 96%)

HSB

hsb(53, 3%, 97%)

CMYK

cmyk(0%, 0%, 3%, 3%)

Oklch

oklch(97.5% 0.009 100.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFA2C4

A0DEBC

Analogous

DBA0DE

DFA2C4

DEA0A3

Triadic

DFA2C4

C2DEA0

A0C2DE

Split-Comp.

DFA2C4

A3DEA0

A0DEDB

Tetradic

DFA2C4

DEDBA0

A0DEBC

A0A3DE

Contrast Matrix WCAG 2.1 Contrast

DFA2C4	F1BABC	E6DEB1	ECE7E6	F8F7F0
—	1.2 Fail	1.5 Fail	1.7 Fail	1.9 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
1.5 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
1.7 Fail	1.4 Fail	1.1 Fail	—	1.1 Fail
1.9 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

2.1Fail

1.7Fail

1.4Fail

1.2Fail

1.1Fail

Black BG

10.1AAA

12.5AAA

15.4AAA

17.1AAA

19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C4BC

D9D9BC

E3E2BC

EAEAE6

F8F8F2

Deuteranopia

C8CDBA

DCE1BB

E3E4BF

EAEBE6

F8F8F2

Tritanopia

DCB5B4

EEBBBB

E6C4C6

ECE6E6

F8F3F3

Achromatopsia

B8B8B8

CBCBCB

DBDBDB

E8E8E8

F7F7F7

Shades & Tints Shades & Tints

#DFA2C4

Dark

Light

#F1BABC

Dark

Light

#E6DEB1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfa2c4;
  --color-2: #f1babc;
  --color-3: #e6deb1;
  --color-4: #ece7e6;
  --color-5: #f8f7f0;
}

SCSS

$color-1: #dfa2c4;
$color-2: #f1babc;
$color-3: #e6deb1;
$color-4: #ece7e6;
$color-5: #f8f7f0;

TAILWIND

colors: {
  'brand-1': '#dfa2c4',
  'brand-2': '#f1babc',
  'brand-3': '#e6deb1',
  'brand-4': '#ece7e6',
  'brand-5': '#f8f7f0',
}

RGB Array

[223, 162, 196], [241, 186, 188], [230, 222, 177], [236, 231, 230], [248, 247, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFA2C4, #F1BABC, #E6DEB1, #ECE7E6, #F8F7F0 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: #dfa2c4; --color-2: #f1babc; --color-3: #e6deb1; --color-4: #ece7e6; --color-5: #f8f7f0. 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