#889898 + #FF788E + #F6AAAC + #FCDAD1 + #B5BAB6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#889898

Ash · LightSlateGray · Silver Sand

HEX

#889898

RGB

rgb(136, 152, 152)

HSL

hsl(180, 7%, 56%)

HSB

hsb(180, 11%, 60%)

CMYK

cmyk(11%, 0%, 0%, 40%)

Oklch

oklch(66.7% 0.018 196.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#FF788E

Peach Pink · LightCoral · Coral Red

HEX

#FF788E

RGB

rgb(255, 120, 142)

HSL

hsl(350, 100%, 74%)

HSB

hsb(350, 53%, 100%)

CMYK

cmyk(0%, 53%, 44%, 0%)

Oklch

oklch(73.6% 0.165 11.9)

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

#F6AAAC

Peach Pink · LightPink · Cherry Blossom

HEX

#F6AAAC

RGB

rgb(246, 170, 172)

HSL

hsl(358, 81%, 82%)

HSB

hsb(358, 31%, 96%)

CMYK

cmyk(0%, 31%, 30%, 4%)

Oklch

oklch(81.1% 0.090 17.5)

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

#FCDAD1

Peach Pink · Bisque · Cherry Blossom

HEX

#FCDAD1

RGB

rgb(252, 218, 209)

HSL

hsl(13, 88%, 90%)

HSB

hsb(13, 17%, 99%)

CMYK

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

Oklch

oklch(91.4% 0.040 35.2)

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

#B5BAB6

Silver Gray · Silver · Pearl Gray

HEX

#B5BAB6

RGB

rgb(181, 186, 182)

HSL

hsl(132, 3%, 72%)

HSB

hsb(132, 3%, 73%)

CMYK

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

Oklch

oklch(78.4% 0.008 151.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

889898

978787

Analogous

87978F

889898

878F97

Triadic

889898

978797

979787

Split-Comp.

889898

97878F

978F87

Tetradic

889898

8F8797

978787

8F9787

Contrast Matrix WCAG 2.1 Contrast

889898	FF788E	F6AAAC	FCDAD1	B5BAB6
—	1.2 Fail	1.6 Fail	2.3 Fail	1.5 Fail
1.2 Fail	—	1.4 Fail	1.9 Fail	1.3 Fail
1.6 Fail	1.4 Fail	—	1.4 Fail	1.1 Fail
2.3 Fail	1.9 Fail	1.4 Fail	—	1.5 Fail
1.5 Fail	1.3 Fail	1.1 Fail	1.5 Fail	—

White BG

3.0AA Large

2.5Fail

1.9Fail

1.3Fail

2.0Fail

Black BG

7.0AA

8.3AAA

11.3AAA

16.1AAA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8F98

C5C389

D5D4AC

EDEDD3

B7B7B7

Deuteranopia

8E8D98

CCD787

DADFAB

EFF2D4

B7B7B7

Tritanopia

899898

F88484

F2ABAB

FAD5D5

B5B8B8

Achromatopsia

939393

A3A3A3

C1C1C1

E3E3E3

B8B8B8

Shades & Tints Shades & Tints

#889898

Dark

Light

#FF788E

Dark

Light

#F6AAAC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #889898;
  --color-2: #ff788e;
  --color-3: #f6aaac;
  --color-4: #fcdad1;
  --color-5: #b5bab6;
}

SCSS

$color-1: #889898;
$color-2: #ff788e;
$color-3: #f6aaac;
$color-4: #fcdad1;
$color-5: #b5bab6;

TAILWIND

colors: {
  'brand-1': '#889898',
  'brand-2': '#ff788e',
  'brand-3': '#f6aaac',
  'brand-4': '#fcdad1',
  'brand-5': '#b5bab6',
}

RGB Array

[136, 152, 152], [255, 120, 142], [246, 170, 172], [252, 218, 209], [181, 186, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #889898, #FF788E, #F6AAAC, #FCDAD1, #B5BAB6 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: #889898; --color-2: #ff788e; --color-3: #f6aaac; --color-4: #fcdad1; --color-5: #b5bab6. 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