#887878 + #FF5398 + #E6CDBB + #FAB4AF + #AD4259 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#887878

Ink Gray · Gray · Warm Gray

HEX

#887878

RGB

rgb(136, 120, 120)

HSL

hsl(0, 6%, 50%)

HSB

hsb(0, 12%, 53%)

CMYK

cmyk(0%, 12%, 12%, 47%)

Oklch

oklch(58.7% 0.020 17.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#FF5398

Rouge · LightCoral · Rose Pink

HEX

#FF5398

RGB

rgb(255, 83, 152)

HSL

hsl(336, 100%, 66%)

HSB

hsb(336, 67%, 100%)

CMYK

cmyk(0%, 67%, 40%, 0%)

Oklch

oklch(69.5% 0.214 359.8)

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

#E6CDBB

Apricot · Wheat · Peach Orange

HEX

#E6CDBB

RGB

rgb(230, 205, 187)

HSL

hsl(25, 46%, 82%)

HSB

hsb(25, 19%, 90%)

CMYK

cmyk(0%, 11%, 19%, 10%)

Oklch

oklch(86.4% 0.037 58.0)

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

#FAB4AF

Peach Pink · LightPink · Cherry Blossom

HEX

#FAB4AF

RGB

rgb(250, 180, 175)

HSL

hsl(4, 88%, 83%)

HSB

hsb(4, 30%, 98%)

CMYK

cmyk(0%, 28%, 30%, 2%)

Oklch

oklch(83.4% 0.082 23.6)

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

#AD4259

Crimson · Sienna · Passion Red

HEX

#AD4259

RGB

rgb(173, 66, 89)

HSL

hsl(347, 45%, 47%)

HSB

hsb(347, 62%, 68%)

CMYK

cmyk(0%, 62%, 49%, 32%)

Oklch

oklch(53.1% 0.141 10.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

887878

788787

Analogous

877880

887878

878078

Triadic

887878

788778

787887

Split-Comp.

887878

788780

788087

Tetradic

887878

808778

788787

807887

Contrast Matrix WCAG 2.1 Contrast

887878	FF5398	E6CDBB	FAB4AF	AD4259
—	1.4 Fail	2.8 Fail	2.4 Fail	1.4 Fail
1.4 Fail	—	2.0 Fail	1.8 Fail	1.9 Fail
2.8 Fail	2.0 Fail	—	1.1 Fail	3.7 AA Large
2.4 Fail	1.8 Fail	1.1 Fail	—	3.3 AA Large
1.4 Fail	1.9 Fail	3.7 AA Large	3.3 AA Large	—

White BG

4.2AA Large

3.0AA Large

1.5Fail

1.7Fail

5.7AA

Black BG

5.0AA

6.9AA

13.8AAA

12.2AAA

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

818178

B5B387

DBDBBF

DCDBB0

7F7E53

Deuteranopia

828378

BFCB83

DDDFC0

E0E5B1

858D52

Tritanopia

877878

F67A77

E5C3C4

F7B1B1

A84F4E

Achromatopsia

7D7D7D

8E8E8E

D2D2D2

C8C8C8

656565

Shades & Tints Shades & Tints

#887878

Dark

Light

#FF5398

Dark

Light

#E6CDBB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #887878;
  --color-2: #ff5398;
  --color-3: #e6cdbb;
  --color-4: #fab4af;
  --color-5: #ad4259;
}

SCSS

$color-1: #887878;
$color-2: #ff5398;
$color-3: #e6cdbb;
$color-4: #fab4af;
$color-5: #ad4259;

TAILWIND

colors: {
  'brand-1': '#887878',
  'brand-2': '#ff5398',
  'brand-3': '#e6cdbb',
  'brand-4': '#fab4af',
  'brand-5': '#ad4259',
}

RGB Array

[136, 120, 120], [255, 83, 152], [230, 205, 187], [250, 180, 175], [173, 66, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #887878, #FF5398, #E6CDBB, #FAB4AF, #AD4259 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: #887878; --color-2: #ff5398; --color-3: #e6cdbb; --color-4: #fab4af; --color-5: #ad4259. 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