← Back to Editor

#BB62E7 · #94A69E · #857DD2 · #8D7039 · #DBA7E9

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

#BB62E7

Lilac · MediumOrchid · Lilac Purple

HEX
#BB62E7
RGB
rgb(187, 98, 231)
HSL
hsl(280, 73%, 65%)
HSB
hsb(280, 58%, 91%)
CMYK
cmyk(19%, 58%, 0%, 9%)
Oklch
oklch(65.5% 0.204 313.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#94A69E

Jade · DarkGray · Silver Sand

HEX
#94A69E
RGB
rgb(148, 166, 158)
HSL
hsl(153, 9%, 62%)
HSB
hsb(153, 11%, 65%)
CMYK
cmyk(11%, 0%, 5%, 35%)
Oklch
oklch(70.9% 0.023 167.2)

Traditional「Jade」· Paint「Silver Sand」· Creative Urban Concrete

#857DD2

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#857DD2
RGB
rgb(133, 125, 210)
HSL
hsl(246, 49%, 66%)
HSB
hsb(246, 40%, 82%)
CMYK
cmyk(37%, 40%, 0%, 18%)
Oklch
oklch(63.3% 0.126 286.5)

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

#8D7039

Ochre · Sienna · Amber Brown

HEX
#8D7039
RGB
rgb(141, 112, 57)
HSL
hsl(39, 42%, 39%)
HSB
hsb(39, 60%, 55%)
CMYK
cmyk(0%, 21%, 60%, 45%)
Oklch
oklch(56.2% 0.082 81.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#DBA7E9

Lilac · Violet · Lilac Purple

HEX
#DBA7E9
RGB
rgb(219, 167, 233)
HSL
hsl(287, 60%, 78%)
HSB
hsb(287, 28%, 91%)
CMYK
cmyk(6%, 28%, 0%, 9%)
Oklch
oklch(79.8% 0.107 319.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB62E7
90E765

Analogous

7A65E7
BB62E7
E765D1

Triadic

BB62E7
E7BB65
65E7BB

Split-Comp.

BB62E7
D1E765
65E77A

Tetradic

BB62E7
E77A65
90E765
65D1E7

Contrast Matrix WCAG 2.1 Contrast

BB62E7
94A69E
857DD2
8D7039
DBA7E9
—
1.4
Fail
1.0
Fail
1.3
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
1.8
Fail
1.3
Fail
1.0
Fail
1.4
Fail
—
1.3
Fail
1.8
Fail
1.3
Fail
1.8
Fail
1.3
Fail
—
2.4
Fail
1.8
Fail
1.3
Fail
1.8
Fail
2.4
Fail
—
White BG
3.5AA Large
2.6Fail
3.6AA Large
4.7AA
2.0Fail
Black BG
6.0AA
8.2AAA
5.9AA
4.5AA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9494C7
9C9CA0
8281BD
808046
C4C4D9

Deuteranopia

9AA0BF
9B99A0
8283B9
82844A
C8CBD5

Tritanopia

B7ADA8
95A1A2
85ADAA
8C5153
D8CCCA

Achromatopsia

8C8C8C
A0A0A0
898989
727272
BEBEBE

Shades & Tints Shades & Tints

#BB62E7

Dark
Light

#94A69E

Dark
Light

#857DD2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb62e7;
  --color-2: #94a69e;
  --color-3: #857dd2;
  --color-4: #8d7039;
  --color-5: #dba7e9;
}

SCSS

$color-1: #bb62e7;
$color-2: #94a69e;
$color-3: #857dd2;
$color-4: #8d7039;
$color-5: #dba7e9;

TAILWIND

colors: {
  'brand-1': '#bb62e7',
  'brand-2': '#94a69e',
  'brand-3': '#857dd2',
  'brand-4': '#8d7039',
  'brand-5': '#dba7e9',
}

RGB Array

[187, 98, 231], [148, 166, 158], [133, 125, 210], [141, 112, 57], [219, 167, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BB62E7, #94A69E, #857DD2, #8D7039, #DBA7E9 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: #bb62e7; --color-2: #94a69e; --color-3: #857dd2; --color-4: #8d7039; --color-5: #dba7e9. 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