← Back to Editor

#8585E3 · #948CCC · #B59D98 · #DEB158 · #FCB501

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

#8585E3

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#8585E3
RGB
rgb(133, 133, 227)
HSL
hsl(240, 63%, 71%)
HSB
hsb(240, 41%, 89%)
CMYK
cmyk(41%, 41%, 0%, 11%)
Oklch
oklch(65.8% 0.138 281.9)

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

#948CCC

Wisteria · DarkGray · Cobalt Blue

HEX
#948CCC
RGB
rgb(148, 140, 204)
HSL
hsl(248, 39%, 67%)
HSB
hsb(248, 31%, 80%)
CMYK
cmyk(27%, 31%, 0%, 20%)
Oklch
oklch(67.2% 0.094 289.3)

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

#B59D98

Peach Pink · DarkGray · Coral Red

HEX
#B59D98
RGB
rgb(181, 157, 152)
HSL
hsl(10, 16%, 65%)
HSB
hsb(10, 16%, 71%)
CMYK
cmyk(0%, 13%, 16%, 29%)
Oklch
oklch(71.6% 0.029 31.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DEB158

Ginger · SandyBrown · Sunflower

HEX
#DEB158
RGB
rgb(222, 177, 88)
HSL
hsl(40, 67%, 61%)
HSB
hsb(40, 60%, 87%)
CMYK
cmyk(0%, 20%, 60%, 13%)
Oklch
oklch(78.4% 0.119 82.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FCB501

Ochre · Orange · Honey Gold

HEX
#FCB501
RGB
rgb(252, 181, 1)
HSL
hsl(43, 99%, 50%)
HSB
hsb(43, 100%, 99%)
CMYK
cmyk(0%, 28%, 100%, 1%)
Oklch
oklch(81.8% 0.169 80.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8585E3
E4E486

Analogous

86B5E4
8585E3
B586E4

Triadic

8585E3
E48686
86E486

Split-Comp.

8585E3
E4B586
B5E486

Tetradic

8585E3
E486B5
E4E486
86E4B5

Contrast Matrix WCAG 2.1 Contrast

8585E3
948CCC
B59D98
DEB158
FCB501
—
1.1
Fail
1.3
Fail
1.6
Fail
1.8
Fail
1.1
Fail
—
1.2
Fail
1.5
Fail
1.7
Fail
1.3
Fail
1.2
Fail
—
1.3
Fail
1.4
Fail
1.6
Fail
1.5
Fail
1.3
Fail
—
1.1
Fail
1.8
Fail
1.7
Fail
1.4
Fail
1.1
Fail
—
White BG
3.3AA Large
3.1AA Large
2.5Fail
2.0Fail
1.8Fail
Black BG
6.5AA
6.9AA
8.2AAA
10.5AAA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8585CC
9190BD
ABAA99
CBCA6E
DDDD2D

Deuteranopia

8585C7
9192B9
ACAE9A
CDD073
E1E737

Tritanopia

85BAB6
94B0AE
B49A9A
DC7F82
F84F57

Achromatopsia

909090
969696
A4A4A4
B4B4B4
B6B6B6

Shades & Tints Shades & Tints

#8585E3

Dark
Light

#948CCC

Dark
Light

#B59D98

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8585e3;
  --color-2: #948ccc;
  --color-3: #b59d98;
  --color-4: #deb158;
  --color-5: #fcb501;
}

SCSS

$color-1: #8585e3;
$color-2: #948ccc;
$color-3: #b59d98;
$color-4: #deb158;
$color-5: #fcb501;

TAILWIND

colors: {
  'brand-1': '#8585e3',
  'brand-2': '#948ccc',
  'brand-3': '#b59d98',
  'brand-4': '#deb158',
  'brand-5': '#fcb501',
}

RGB Array

[133, 133, 227], [148, 140, 204], [181, 157, 152], [222, 177, 88], [252, 181, 1]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8585E3, #948CCC, #B59D98, #DEB158, #FCB501 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: #8585e3; --color-2: #948ccc; --color-3: #b59d98; --color-4: #deb158; --color-5: #fcb501. 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