#FB556B + #EC757E + #DC9691 + #CDB6A3 + #BDD6B6 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#FB556B

Peach Pink · Tomato · Coral Red

HEX

#FB556B

RGB

rgb(251, 85, 107)

HSL

hsl(352, 95%, 66%)

HSB

hsb(352, 66%, 98%)

CMYK

cmyk(0%, 66%, 57%, 2%)

Oklch

oklch(68.0% 0.201 16.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#EC757E

Peach Pink · LightCoral · Coral Red

HEX

#EC757E

RGB

rgb(236, 117, 126)

HSL

hsl(355, 76%, 69%)

HSB

hsb(355, 50%, 93%)

CMYK

cmyk(0%, 50%, 47%, 7%)

Oklch

oklch(70.2% 0.147 16.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DC9691

Peach Pink · DarkSalmon · Coral Red

HEX

#DC9691

RGB

rgb(220, 150, 145)

HSL

hsl(4, 52%, 72%)

HSB

hsb(4, 34%, 86%)

CMYK

cmyk(0%, 32%, 34%, 14%)

Oklch

oklch(74.1% 0.085 23.9)

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

#CDB6A3

Apricot · Tan · Warm Sun

HEX

#CDB6A3

RGB

rgb(205, 182, 163)

HSL

hsl(27, 30%, 72%)

HSB

hsb(27, 20%, 80%)

CMYK

cmyk(0%, 11%, 20%, 20%)

Oklch

oklch(79.1% 0.037 61.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#BDD6B6

Celadon · Silver · Apple Green

HEX

#BDD6B6

RGB

rgb(189, 214, 182)

HSL

hsl(107, 28%, 78%)

HSB

hsb(107, 15%, 84%)

CMYK

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

Oklch

oklch(84.9% 0.051 138.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FB556B

56FBE5

Analogous

FB56BE

FB556B

FB9256

Triadic

FB556B

6CFB56

566CFB

Split-Comp.

FB556B

56FB92

56BEFB

Tetradic

FB556B

BEFB56

56FBE5

9256FB

Contrast Matrix WCAG 2.1 Contrast

FB556B	EC757E	DC9691	CDB6A3	BDD6B6
—	1.1 Fail	1.3 Fail	1.6 Fail	2.0 Fail
1.1 Fail	—	1.2 Fail	1.5 Fail	1.8 Fail
1.3 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.6 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.0 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

3.2AA Large

2.8Fail

2.4Fail

1.9Fail

1.6Fail

Black BG

6.6AA

7.4AAA

8.8AAA

10.8AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B266

B8B77C

BEBD92

C3C3A8

C8C8BE

Deuteranopia

BDC964

BFC87B

C2C793

C4C6A9

C6C5C0

Tritanopia

F36161

E67A7A

D99393

CCABAC

BEC4C5

Achromatopsia

898989

9A9A9A

AAAAAA

BBBBBB

CBCBCB

Shades & Tints Shades & Tints

#FB556B

Dark

Light

#EC757E

Dark

Light

#DC9691

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fb556b;
  --color-2: #ec757e;
  --color-3: #dc9691;
  --color-4: #cdb6a3;
  --color-5: #bdd6b6;
}

SCSS

$color-1: #fb556b;
$color-2: #ec757e;
$color-3: #dc9691;
$color-4: #cdb6a3;
$color-5: #bdd6b6;

TAILWIND

colors: {
  'brand-1': '#fb556b',
  'brand-2': '#ec757e',
  'brand-3': '#dc9691',
  'brand-4': '#cdb6a3',
  'brand-5': '#bdd6b6',
}

RGB Array

[251, 85, 107], [236, 117, 126], [220, 150, 145], [205, 182, 163], [189, 214, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FB556B, #EC757E, #DC9691, #CDB6A3, #BDD6B6 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: #fb556b; --color-2: #ec757e; --color-3: #dc9691; --color-4: #cdb6a3; --color-5: #bdd6b6. 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 pastel-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