#557A87 + #A6C8C6 + #CEC2B4 + #EBB5AB + #FFA5B1 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#557A87

Slate Blue · SlateGray · Mint Ice

HEX

#557A87

RGB

rgb(85, 122, 135)

HSL

hsl(196, 23%, 43%)

HSB

hsb(196, 37%, 53%)

CMYK

cmyk(37%, 10%, 0%, 47%)

Oklch

oklch(55.7% 0.046 221.8)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#A6C8C6

Jade · LightSteelBlue · Lake Green

HEX

#A6C8C6

RGB

rgb(166, 200, 198)

HSL

hsl(176, 24%, 72%)

HSB

hsb(176, 17%, 78%)

CMYK

cmyk(17%, 0%, 1%, 22%)

Oklch

oklch(80.7% 0.036 192.1)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#CEC2B4

Goose Yellow · Silver · Peach Orange

HEX

#CEC2B4

RGB

rgb(206, 194, 180)

HSL

hsl(32, 21%, 76%)

HSB

hsb(32, 13%, 81%)

CMYK

cmyk(0%, 6%, 13%, 19%)

Oklch

oklch(82.0% 0.024 71.7)

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

#EBB5AB

Peach Pink · LightPink · Coral Red

HEX

#EBB5AB

RGB

rgb(235, 181, 171)

HSL

hsl(9, 62%, 80%)

HSB

hsb(9, 27%, 92%)

CMYK

cmyk(0%, 23%, 27%, 8%)

Oklch

oklch(81.9% 0.065 30.5)

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

#FFA5B1

Peach Pink · LightPink · Cherry Blossom

HEX

#FFA5B1

RGB

rgb(255, 165, 177)

HSL

hsl(352, 100%, 82%)

HSB

hsb(352, 35%, 100%)

CMYK

cmyk(0%, 35%, 31%, 0%)

Oklch

oklch(81.4% 0.107 11.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

557A87

876254

Analogous

54877B

557A87

546087

Triadic

557A87

875479

798754

Split-Comp.

557A87

875460

877B54

Tetradic

557A87

7B5487

876254

608754

Contrast Matrix WCAG 2.1 Contrast

557A87	A6C8C6	CEC2B4	EBB5AB	FFA5B1
—	2.6 Fail	2.7 Fail	2.6 Fail	2.5 Fail
2.6 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
2.7 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
2.6 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
2.5 Fail	1.0 Fail	1.1 Fail	1.0 Fail	—

White BG

4.6AA

1.8Fail

1.7Fail

1.8Fail

1.9Fail

Black BG

4.5AA

11.7AAA

12.0AAA

11.7AAA

11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

656584

B5B5C6

C9C9B7

D4D3AD

D8D7AE

Deuteranopia

636083

B3B0C7

CACAB8

D7DBAE

DDE4AD

Tritanopia

578181

A8C7C7

CDBABB

E8AFB0

FBACAB

Achromatopsia

707070

BEBEBE

C4C4C4

C1C1C1

Shades & Tints Shades & Tints

#557A87

Dark

Light

#A6C8C6

Dark

Light

#CEC2B4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #557a87;
  --color-2: #a6c8c6;
  --color-3: #cec2b4;
  --color-4: #ebb5ab;
  --color-5: #ffa5b1;
}

SCSS

$color-1: #557a87;
$color-2: #a6c8c6;
$color-3: #cec2b4;
$color-4: #ebb5ab;
$color-5: #ffa5b1;

TAILWIND

colors: {
  'brand-1': '#557a87',
  'brand-2': '#a6c8c6',
  'brand-3': '#cec2b4',
  'brand-4': '#ebb5ab',
  'brand-5': '#ffa5b1',
}

RGB Array

[85, 122, 135], [166, 200, 198], [206, 194, 180], [235, 181, 171], [255, 165, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #557A87, #A6C8C6, #CEC2B4, #EBB5AB, #FFA5B1 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: #557a87; --color-2: #a6c8c6; --color-3: #cec2b4; --color-4: #ebb5ab; --color-5: #ffa5b1. 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