← Back to Editor

#8356CB · #9673B9 · #AA90A8 · #BEAD95 · #D2CB83

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

#8356CB

Deep Indigo · SlateBlue · Violet

HEX
#8356CB
RGB
rgb(131, 86, 203)
HSL
hsl(263, 53%, 57%)
HSB
hsb(263, 58%, 80%)
CMYK
cmyk(35%, 58%, 0%, 20%)
Oklch
oklch(55.9% 0.175 298.3)

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

#9673B9

Dark Plum · LightSlateGray · Violet

HEX
#9673B9
RGB
rgb(150, 115, 185)
HSL
hsl(270, 33%, 59%)
HSB
hsb(270, 38%, 73%)
CMYK
cmyk(19%, 38%, 0%, 27%)
Oklch
oklch(61.7% 0.109 306.4)

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

#AA90A8

Mauve · DarkGray · Lilac Purple

HEX
#AA90A8
RGB
rgb(170, 144, 168)
HSL
hsl(305, 13%, 62%)
HSB
hsb(305, 15%, 67%)
CMYK
cmyk(0%, 15%, 1%, 33%)
Oklch
oklch(68.4% 0.046 328.5)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#BEAD95

Ginger · Tan · Warm Sun

HEX
#BEAD95
RGB
rgb(190, 173, 149)
HSL
hsl(35, 24%, 66%)
HSB
hsb(35, 22%, 75%)
CMYK
cmyk(0%, 9%, 22%, 25%)
Oklch
oklch(75.6% 0.039 76.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D2CB83

Fresh Green · BurlyWood · Sunflower

HEX
#D2CB83
RGB
rgb(210, 203, 131)
HSL
hsl(55, 47%, 67%)
HSB
hsb(55, 38%, 82%)
CMYK
cmyk(0%, 3%, 38%, 18%)
Oklch
oklch(83.1% 0.093 103.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8356CB
9FCB57

Analogous

5765CB
8356CB
BE57CB

Triadic

8356CB
CB8457
57CB84

Split-Comp.

8356CB
CBBE57
65CB57

Tetradic

8356CB
CB5765
9FCB57
57CBBE

Contrast Matrix WCAG 2.1 Contrast

8356CB
9673B9
AA90A8
BEAD95
D2CB83
—
1.3
Fail
1.7
Fail
2.3
Fail
3.0
AA Large
1.3
Fail
—
1.3
Fail
1.8
Fail
2.3
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.3
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
3.0
AA Large
2.3
Fail
1.7
Fail
1.3
Fail
—
White BG
5.0AA
3.9AA Large
2.9Fail
2.2Fail
1.7Fail
Black BG
4.2AA Large
5.4AA
7.3AAA
9.6AAA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

706FAF
8787A8
9F9FA2
B7B69B
CFCF94

Deuteranopia

7275A8
898CA4
A0A2A1
B8B99C
CFD099

Tritanopia

819893
949B98
A99E9D
BD9FA0
D2A2A5

Achromatopsia

717171
858585
9B9B9B
AFAFAF
C5C5C5

Shades & Tints Shades & Tints

#8356CB

Dark
Light

#9673B9

Dark
Light

#AA90A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8356cb;
  --color-2: #9673b9;
  --color-3: #aa90a8;
  --color-4: #bead95;
  --color-5: #d2cb83;
}

SCSS

$color-1: #8356cb;
$color-2: #9673b9;
$color-3: #aa90a8;
$color-4: #bead95;
$color-5: #d2cb83;

TAILWIND

colors: {
  'brand-1': '#8356cb',
  'brand-2': '#9673b9',
  'brand-3': '#aa90a8',
  'brand-4': '#bead95',
  'brand-5': '#d2cb83',
}

RGB Array

[131, 86, 203], [150, 115, 185], [170, 144, 168], [190, 173, 149], [210, 203, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8356CB, #9673B9, #AA90A8, #BEAD95, #D2CB83 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: #8356cb; --color-2: #9673b9; --color-3: #aa90a8; --color-4: #bead95; --color-5: #d2cb83. 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