← Back to Editor

#877E7F · #E9628A · #E3E3E3 · #E6FFE6 · #FCFFFC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#877E7F

Ash · Gray · Warm Gray

HEX
#877E7F
RGB
rgb(135, 126, 127)
HSL
hsl(353, 4%, 51%)
HSB
hsb(353, 7%, 53%)
CMYK
cmyk(0%, 7%, 6%, 47%)
Oklch
oklch(60.1% 0.011 9.7)

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

#E9628A

Rouge · LightCoral · Rose Pink

HEX
#E9628A
RGB
rgb(233, 98, 138)
HSL
hsl(342, 75%, 65%)
HSB
hsb(342, 58%, 91%)
CMYK
cmyk(0%, 58%, 41%, 9%)
Oklch
oklch(67.5% 0.171 4.3)

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

#E3E3E3

Plain White · Lavender · Cloud White

HEX
#E3E3E3
RGB
rgb(227, 227, 227)
HSL
hsl(0, 0%, 89%)
HSB
hsb(0, 0%, 89%)
CMYK
cmyk(0%, 0%, 0%, 11%)
Oklch
oklch(91.6% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#E6FFE6

Emerald · Beige · Mint Green

HEX
#E6FFE6
RGB
rgb(230, 255, 230)
HSL
hsl(120, 100%, 95%)
HSB
hsb(120, 10%, 100%)
CMYK
cmyk(10%, 0%, 10%, 0%)
Oklch
oklch(97.5% 0.042 145.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#FCFFFC

Emerald · White · Mint Green

HEX
#FCFFFC
RGB
rgb(252, 255, 252)
HSL
hsl(120, 100%, 99%)
HSB
hsb(120, 1%, 100%)
CMYK
cmyk(1%, 0%, 1%, 0%)
Oklch
oklch(99.7% 0.005 145.5)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

877E7F
7D8786

Analogous

877D83
877E7F
87817D

Triadic

877E7F
7E877D
7D7E87

Split-Comp.

877E7F
7D8781
7D8387

Tetradic

877E7F
83877D
7D8786
817D87

Contrast Matrix WCAG 2.1 Contrast

877E7F
E9628A
E3E3E3
E6FFE6
FCFFFC
—
1.2
Fail
3.1
AA Large
3.7
AA Large
3.9
AA Large
1.2
Fail
—
2.5
Fail
3.0
AA Large
3.2
AA Large
3.1
AA Large
2.5
Fail
—
1.2
Fail
1.3
Fail
3.7
AA Large
3.0
AA Large
1.2
Fail
—
1.1
Fail
3.9
AA Large
3.2
AA Large
1.3
Fail
1.1
Fail
—
White BG
3.9AA Large
3.2AA Large
1.3Fail
1.1Fail
1.0Fail
Black BG
5.3AA
6.6AA
16.4AAA
19.8AAA
20.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

83837F
AFAD80
E3E3E3
F1F1EC
FDFDFD

Deuteranopia

84847F
B6C17E
E3E3E3
EFEEEE
FDFDFD

Tritanopia

877F7F
E27977
E3E3E3
E7F1F2
FCFDFD

Achromatopsia

818181
8F8F8F
E3E3E3
F5F5F5
FEFEFE

Shades & Tints Shades & Tints

#877E7F

Dark
Light

#E9628A

Dark
Light

#E3E3E3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #877e7f;
  --color-2: #e9628a;
  --color-3: #e3e3e3;
  --color-4: #e6ffe6;
  --color-5: #fcfffc;
}

SCSS

$color-1: #877e7f;
$color-2: #e9628a;
$color-3: #e3e3e3;
$color-4: #e6ffe6;
$color-5: #fcfffc;

TAILWIND

colors: {
  'brand-1': '#877e7f',
  'brand-2': '#e9628a',
  'brand-3': '#e3e3e3',
  'brand-4': '#e6ffe6',
  'brand-5': '#fcfffc',
}

RGB Array

[135, 126, 127], [233, 98, 138], [227, 227, 227], [230, 255, 230], [252, 255, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #877E7F, #E9628A, #E3E3E3, #E6FFE6, #FCFFFC is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #877e7f; --color-2: #e9628a; --color-3: #e3e3e3; --color-4: #e6ffe6; --color-5: #fcfffc. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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