← Back to Editor

#A256A7 · #957CCC · #8C9CBF · #87B4B0 · #A6C98B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A256A7

Dark Plum · MediumOrchid · Violet

HEX
#A256A7
RGB
rgb(162, 86, 167)
HSL
hsl(296, 32%, 50%)
HSB
hsb(296, 49%, 65%)
CMYK
cmyk(3%, 49%, 0%, 35%)
Oklch
oklch(57.3% 0.146 325.0)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#957CCC

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#957CCC
RGB
rgb(149, 124, 204)
HSL
hsl(259, 44%, 64%)
HSB
hsb(259, 39%, 80%)
CMYK
cmyk(27%, 39%, 0%, 20%)
Oklch
oklch(64.2% 0.119 297.3)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#8C9CBF

Azure · DarkGray · Cobalt Blue

HEX
#8C9CBF
RGB
rgb(140, 156, 191)
HSL
hsl(221, 28%, 65%)
HSB
hsb(221, 27%, 75%)
CMYK
cmyk(27%, 18%, 0%, 25%)
Oklch
oklch(69.3% 0.055 265.7)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#87B4B0

Jade · DarkSeaGreen · Lake Green

HEX
#87B4B0
RGB
rgb(135, 180, 176)
HSL
hsl(175, 23%, 62%)
HSB
hsb(175, 25%, 71%)
CMYK
cmyk(25%, 0%, 2%, 29%)
Oklch
oklch(73.7% 0.048 189.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#A6C98B

Celadon · DarkSeaGreen · Apple Green

HEX
#A6C98B
RGB
rgb(166, 201, 139)
HSL
hsl(94, 36%, 67%)
HSB
hsb(94, 31%, 79%)
CMYK
cmyk(17%, 0%, 31%, 21%)
Oklch
oklch(79.5% 0.092 132.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A256A7
5CA857

Analogous

7A57A8
A256A7
A85785

Triadic

A256A7
A8A357
57A8A3

Split-Comp.

A256A7
85A857
57A87A

Tetradic

A256A7
A87A57
5CA857
5785A8

Contrast Matrix WCAG 2.1 Contrast

A256A7
957CCC
8C9CBF
87B4B0
A6C98B
—
1.4
Fail
1.7
Fail
2.1
Fail
2.6
Fail
1.4
Fail
—
1.3
Fail
1.5
Fail
1.9
Fail
1.7
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
2.1
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.6
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
4.7AA
3.5AA Large
2.8Fail
2.3Fail
1.9Fail
Black BG
4.4AA Large
6.0AA
7.6AAA
9.2AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

818093
8A8AB9
9393B7
9A9BB1
B5B59A

Deuteranopia

868B8F
8C8EB4
9291B5
9895B1
B3B19E

Tritanopia

9E8481
94A9A6
8DB0AE
89B2B2
A8A6A8

Achromatopsia

767676
8D8D8D
9B9B9B
A6A6A6
B7B7B7

Shades & Tints Shades & Tints

#A256A7

Dark
Light

#957CCC

Dark
Light

#8C9CBF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a256a7;
  --color-2: #957ccc;
  --color-3: #8c9cbf;
  --color-4: #87b4b0;
  --color-5: #a6c98b;
}

SCSS

$color-1: #a256a7;
$color-2: #957ccc;
$color-3: #8c9cbf;
$color-4: #87b4b0;
$color-5: #a6c98b;

TAILWIND

colors: {
  'brand-1': '#a256a7',
  'brand-2': '#957ccc',
  'brand-3': '#8c9cbf',
  'brand-4': '#87b4b0',
  'brand-5': '#a6c98b',
}

RGB Array

[162, 86, 167], [149, 124, 204], [140, 156, 191], [135, 180, 176], [166, 201, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A256A7, #957CCC, #8C9CBF, #87B4B0, #A6C98B 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: #a256a7; --color-2: #957ccc; --color-3: #8c9cbf; --color-4: #87b4b0; --color-5: #a6c98b. 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