← Back to Editor

#E96381 · #948AA3 · #B6CB7A · #86939F · #7D8A85

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

#E96381

Peach Pink · LightCoral · Coral Red

HEX
#E96381
RGB
rgb(233, 99, 129)
HSL
hsl(347, 75%, 65%)
HSB
hsb(347, 58%, 91%)
CMYK
cmyk(0%, 58%, 45%, 9%)
Oklch
oklch(67.4% 0.167 8.9)

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

#948AA3

Deep Indigo · LightSlateGray · Violet

HEX
#948AA3
RGB
rgb(148, 138, 163)
HSL
hsl(264, 12%, 59%)
HSB
hsb(264, 15%, 64%)
CMYK
cmyk(9%, 15%, 0%, 36%)
Oklch
oklch(65.1% 0.038 303.5)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#B6CB7A

Willow Green · Tan · Apple Green

HEX
#B6CB7A
RGB
rgb(182, 203, 122)
HSL
hsl(76, 44%, 64%)
HSB
hsb(76, 40%, 80%)
CMYK
cmyk(10%, 0%, 40%, 20%)
Oklch
oklch(80.8% 0.108 120.7)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#86939F

Slate Blue · LightSlateGray · Navy Blue

HEX
#86939F
RGB
rgb(134, 147, 159)
HSL
hsl(209, 12%, 57%)
HSB
hsb(209, 16%, 62%)
CMYK
cmyk(16%, 8%, 0%, 38%)
Oklch
oklch(65.7% 0.023 246.0)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#7D8A85

Ash · Gray · Warm Gray

HEX
#7D8A85
RGB
rgb(125, 138, 133)
HSL
hsl(157, 5%, 52%)
HSB
hsb(157, 9%, 54%)
CMYK
cmyk(9%, 0%, 4%, 46%)
Oklch
oklch(62.1% 0.017 170.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E96381
63E9CC

Analogous

E963C3
E96381
E98963

Triadic

E96381
80E963
6380E9

Split-Comp.

E96381
63E989
63C3E9

Tetradic

E96381
C3E963
63E9CC
8963E9

Contrast Matrix WCAG 2.1 Contrast

E96381
948AA3
B6CB7A
86939F
7D8A85
—
1.0
Fail
1.8
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
1.8
Fail
1.0
Fail
1.1
Fail
1.8
Fail
1.8
Fail
—
1.8
Fail
2.0
Fail
1.0
Fail
1.0
Fail
1.8
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
2.0
Fail
1.1
Fail
—
White BG
3.2AA Large
3.3AA Large
1.8Fail
3.1AA Large
3.6AA Large
Black BG
6.6AA
6.4AA
11.8AAA
6.7AA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAE7A
90909D
BFBF8E
8C8C9C
838386

Deuteranopia

B7C178
90919C
BEBC92
8B8A9B
828187

Tritanopia

E27473
949897
B79DA0
879A99
7E8787

Achromatopsia

8E8E8E
909090
BBBBBB
909090
868686

Shades & Tints Shades & Tints

#E96381

Dark
Light

#948AA3

Dark
Light

#B6CB7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e96381;
  --color-2: #948aa3;
  --color-3: #b6cb7a;
  --color-4: #86939f;
  --color-5: #7d8a85;
}

SCSS

$color-1: #e96381;
$color-2: #948aa3;
$color-3: #b6cb7a;
$color-4: #86939f;
$color-5: #7d8a85;

TAILWIND

colors: {
  'brand-1': '#e96381',
  'brand-2': '#948aa3',
  'brand-3': '#b6cb7a',
  'brand-4': '#86939f',
  'brand-5': '#7d8a85',
}

RGB Array

[233, 99, 129], [148, 138, 163], [182, 203, 122], [134, 147, 159], [125, 138, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E96381, #948AA3, #B6CB7A, #86939F, #7D8A85 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e96381; --color-2: #948aa3; --color-3: #b6cb7a; --color-4: #86939f; --color-5: #7d8a85. 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. Restrained colors convey professionalism and trust. 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