← Back to Editor

#8F80BA · #916E91 · #CC8168 · #D59965 · #CCC17C

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

#8F80BA

Wisteria · LightSlateGray · Cobalt Blue

HEX
#8F80BA
RGB
rgb(143, 128, 186)
HSL
hsl(256, 30%, 62%)
HSB
hsb(256, 31%, 73%)
CMYK
cmyk(23%, 31%, 0%, 27%)
Oklch
oklch(63.5% 0.087 295.7)

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

#916E91

Rose Purple · Gray · Violet

HEX
#916E91
RGB
rgb(145, 110, 145)
HSL
hsl(300, 14%, 50%)
HSB
hsb(300, 24%, 57%)
CMYK
cmyk(0%, 24%, 0%, 43%)
Oklch
oklch(58.5% 0.067 326.4)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#CC8168

Tangerine · DarkSalmon · Warm Sun

HEX
#CC8168
RGB
rgb(204, 129, 104)
HSL
hsl(15, 50%, 60%)
HSB
hsb(15, 49%, 80%)
CMYK
cmyk(0%, 37%, 49%, 20%)
Oklch
oklch(67.6% 0.100 39.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D59965

Apricot · DarkSalmon · Warm Sun

HEX
#D59965
RGB
rgb(213, 153, 101)
HSL
hsl(28, 57%, 62%)
HSB
hsb(28, 53%, 84%)
CMYK
cmyk(0%, 28%, 53%, 16%)
Oklch
oklch(73.0% 0.099 61.2)

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

#CCC17C

Fresh Green · Tan · Sunflower

HEX
#CCC17C
RGB
rgb(204, 193, 124)
HSL
hsl(52, 44%, 64%)
HSB
hsb(52, 39%, 80%)
CMYK
cmyk(0%, 5%, 39%, 20%)
Oklch
oklch(80.4% 0.090 100.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F80BA
ACBB81

Analogous

818FBB
8F80BA
AE81BB

Triadic

8F80BA
BB9181
81BB91

Split-Comp.

8F80BA
BBAE81
8FBB81

Tetradic

8F80BA
BB818F
ACBB81
81BBAE

Contrast Matrix WCAG 2.1 Contrast

8F80BA
916E91
CC8168
D59965
CCC17C
—
1.2
Fail
1.2
Fail
1.4
Fail
1.9
Fail
1.2
Fail
—
1.4
Fail
1.8
Fail
2.4
Fail
1.2
Fail
1.4
Fail
—
1.2
Fail
1.7
Fail
1.4
Fail
1.8
Fail
1.2
Fail
—
1.3
Fail
1.9
Fail
2.4
Fail
1.7
Fail
1.3
Fail
—
White BG
3.5AA Large
4.3AA Large
3.0AA Large
2.4Fail
1.8Fail
Black BG
6.0AA
4.8AA
6.9AA
8.6AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8988AC
828289
ACAB6E
BBBA72
C7C78D

Deuteranopia

898BA9
848787
B0B570
BFC375
C8C991

Tritanopia

8EA19E
8F8280
C87374
D27C7E
CB9A9D

Achromatopsia

8B8B8B
7C7C7C
959595
A5A5A5
BCBCBC

Shades & Tints Shades & Tints

#8F80BA

Dark
Light

#916E91

Dark
Light

#CC8168

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f80ba;
  --color-2: #916e91;
  --color-3: #cc8168;
  --color-4: #d59965;
  --color-5: #ccc17c;
}

SCSS

$color-1: #8f80ba;
$color-2: #916e91;
$color-3: #cc8168;
$color-4: #d59965;
$color-5: #ccc17c;

TAILWIND

colors: {
  'brand-1': '#8f80ba',
  'brand-2': '#916e91',
  'brand-3': '#cc8168',
  'brand-4': '#d59965',
  'brand-5': '#ccc17c',
}

RGB Array

[143, 128, 186], [145, 110, 145], [204, 129, 104], [213, 153, 101], [204, 193, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F80BA, #916E91, #CC8168, #D59965, #CCC17C 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: #8f80ba; --color-2: #916e91; --color-3: #cc8168; --color-4: #d59965; --color-5: #ccc17c. 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