#F7BABA + #DEC5C5 + #D1D1D1 + #E8CCC2 + #FFC6B3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7BABA

Peach Pink · LightPink · Cherry Blossom

HEX

#F7BABA

RGB

rgb(247, 186, 186)

HSL

hsl(0, 79%, 85%)

HSB

hsb(0, 25%, 97%)

CMYK

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

Oklch

oklch(84.4% 0.071 18.7)

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

#DEC5C5

Peach Pink · LightGray · Cherry Blossom

HEX

#DEC5C5

RGB

rgb(222, 197, 197)

HSL

hsl(0, 27%, 82%)

HSB

hsb(0, 11%, 87%)

CMYK

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

Oklch

oklch(84.4% 0.028 17.7)

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

#D1D1D1

Silver Gray · LightGray · Pearl Gray

HEX

#D1D1D1

RGB

rgb(209, 209, 209)

HSL

hsl(0, 0%, 82%)

HSB

hsb(0, 0%, 82%)

CMYK

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

Oklch

oklch(86.1% 0.000 89.9)

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

#E8CCC2

Apricot · Wheat · Peach Orange

HEX

#E8CCC2

RGB

rgb(232, 204, 194)

HSL

hsl(16, 45%, 84%)

HSB

hsb(16, 16%, 91%)

CMYK

cmyk(0%, 12%, 16%, 9%)

Oklch

oklch(86.6% 0.035 40.7)

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

#FFC6B3

Apricot · LightPink · Peach Orange

HEX

#FFC6B3

RGB

rgb(255, 198, 179)

HSL

hsl(15, 100%, 85%)

HSB

hsb(15, 30%, 100%)

CMYK

cmyk(0%, 22%, 30%, 0%)

Oklch

oklch(87.3% 0.071 39.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7BABA

BBF7F7

Analogous

F7BBD9

F7BABA

F7D9BB

Triadic

F7BABA

BBF7BB

BBBBF7

Split-Comp.

F7BABA

BBF7D9

BBD9F7

Tetradic

F7BABA

D9F7BB

BBF7F7

D9BBF7

Contrast Matrix WCAG 2.1 Contrast

F7BABA	DEC5C5	D1D1D1	E8CCC2	FFC6B3
—	1.0 Fail	1.1 Fail	1.1 Fail	1.1 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.1 Fail	1.1 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

1.7Fail

1.6Fail

1.5Fail

Black BG

12.7AAA

12.9AAA

13.8AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDCBA

D3D3C5

D1D1D1

DCDCC4

E6E6B8

Deuteranopia

E0E5BA

D5D6C5

D1D1D1

DEE0C5

EAEEB9

Tritanopia

F4BABA

DDC5C5

D1D1D1

E7C6C7

FCBBBC

Achromatopsia

CCCCCC

D1D1D1

D3D3D3

D5D5D5

Shades & Tints Shades & Tints

#F7BABA

Dark

Light

#DEC5C5

Dark

Light

#D1D1D1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7baba;
  --color-2: #dec5c5;
  --color-3: #d1d1d1;
  --color-4: #e8ccc2;
  --color-5: #ffc6b3;
}

SCSS

$color-1: #f7baba;
$color-2: #dec5c5;
$color-3: #d1d1d1;
$color-4: #e8ccc2;
$color-5: #ffc6b3;

TAILWIND

colors: {
  'brand-1': '#f7baba',
  'brand-2': '#dec5c5',
  'brand-3': '#d1d1d1',
  'brand-4': '#e8ccc2',
  'brand-5': '#ffc6b3',
}

RGB Array

[247, 186, 186], [222, 197, 197], [209, 209, 209], [232, 204, 194], [255, 198, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7BABA, #DEC5C5, #D1D1D1, #E8CCC2, #FFC6B3 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: #f7baba; --color-2: #dec5c5; --color-3: #d1d1d1; --color-4: #e8ccc2; --color-5: #ffc6b3. 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