← Back to Editor

#E88093 · #B3B0A8 · #51C2B8 · #59B1C9 · #969696

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E88093

Peach Pink · LightCoral · Coral Red

HEX
#E88093
RGB
rgb(232, 128, 147)
HSL
hsl(349, 69%, 71%)
HSB
hsb(349, 45%, 91%)
CMYK
cmyk(0%, 45%, 37%, 9%)
Oklch
oklch(71.9% 0.129 9.2)

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

#B3B0A8

Ash · DarkGray · Silver Sand

HEX
#B3B0A8
RGB
rgb(179, 176, 168)
HSL
hsl(44, 7%, 68%)
HSB
hsb(44, 6%, 70%)
CMYK
cmyk(0%, 2%, 6%, 30%)
Oklch
oklch(75.7% 0.012 89.7)

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

#51C2B8

Mineral Blue · MediumTurquoise · Lake Green

HEX
#51C2B8
RGB
rgb(81, 194, 184)
HSL
hsl(175, 48%, 54%)
HSB
hsb(175, 58%, 76%)
CMYK
cmyk(58%, 0%, 5%, 24%)
Oklch
oklch(74.7% 0.103 187.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#59B1C9

Lake Blue · MediumTurquoise · Lake Green

HEX
#59B1C9
RGB
rgb(89, 177, 201)
HSL
hsl(193, 51%, 57%)
HSB
hsb(193, 56%, 79%)
CMYK
cmyk(56%, 12%, 0%, 21%)
Oklch
oklch(71.5% 0.091 218.0)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#969696

Ash · DarkGray · Silver Sand

HEX
#969696
RGB
rgb(150, 150, 150)
HSL
hsl(0, 0%, 59%)
HSB
hsb(0, 0%, 59%)
CMYK
cmyk(0%, 0%, 0%, 41%)
Oklch
oklch(67.3% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E88093
82E8D5

Analogous

E882C8
E88093
E8A282

Triadic

E88093
95E882
8295E8

Split-Comp.

E88093
82E8A2
82C8E8

Tetradic

E88093
C8E882
82E8D5
A282E8

Contrast Matrix WCAG 2.1 Contrast

E88093
B3B0A8
51C2B8
59B1C9
969696
—
1.2
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
1.0
Fail
1.1
Fail
1.4
Fail
1.2
Fail
1.0
Fail
—
1.1
Fail
1.4
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.1
Fail
1.4
Fail
1.4
Fail
1.2
Fail
—
White BG
2.6Fail
2.2Fail
2.2Fail
2.5Fail
3.0Fail
Black BG
7.9AAA
9.7AAA
9.8AAA
8.6AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBA8E
B2B2AA
8283BA
7F80C3
969696

Deuteranopia

C1C98D
B2B2AA
7B73BB
7A73C2
969696

Tritanopia

E38B8A
B3ABAC
57BCBD
5DBFBE
969696

Achromatopsia

A1A1A1
B0B0B0
9F9F9F
999999
969696

Shades & Tints Shades & Tints

#E88093

Dark
Light

#B3B0A8

Dark
Light

#51C2B8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e88093;
  --color-2: #b3b0a8;
  --color-3: #51c2b8;
  --color-4: #59b1c9;
  --color-5: #969696;
}

SCSS

$color-1: #e88093;
$color-2: #b3b0a8;
$color-3: #51c2b8;
$color-4: #59b1c9;
$color-5: #969696;

TAILWIND

colors: {
  'brand-1': '#e88093',
  'brand-2': '#b3b0a8',
  'brand-3': '#51c2b8',
  'brand-4': '#59b1c9',
  'brand-5': '#969696',
}

RGB Array

[232, 128, 147], [179, 176, 168], [81, 194, 184], [89, 177, 201], [150, 150, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E88093, #B3B0A8, #51C2B8, #59B1C9, #969696 is ideal for: corporate websites, product showcases, portfolios. 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: #e88093; --color-2: #b3b0a8; --color-3: #51c2b8; --color-4: #59b1c9; --color-5: #969696. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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