#876786 + #8C8CBD + #7AB9C4 + #B6C9A3 + #FAC487 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#876786

Rose Purple · Gray · Violet

HEX

#876786

RGB

rgb(135, 103, 134)

HSL

hsl(302, 13%, 47%)

HSB

hsb(302, 24%, 53%)

CMYK

cmyk(0%, 24%, 1%, 47%)

Oklch

oklch(55.6% 0.061 327.4)

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

#8C8CBD

Wisteria · LightSlateGray · Cobalt Blue

HEX

#8C8CBD

RGB

rgb(140, 140, 189)

HSL

hsl(240, 27%, 65%)

HSB

hsb(240, 26%, 74%)

CMYK

cmyk(26%, 26%, 0%, 26%)

Oklch

oklch(65.8% 0.072 284.2)

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

#7AB9C4

Sky Blue · MediumAquaMarine · Lake Green

HEX

#7AB9C4

RGB

rgb(122, 185, 196)

HSL

hsl(189, 39%, 62%)

HSB

hsb(189, 38%, 77%)

CMYK

cmyk(38%, 6%, 0%, 23%)

Oklch

oklch(74.7% 0.066 209.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B6C9A3

Celadon · Silver · Apple Green

HEX

#B6C9A3

RGB

rgb(182, 201, 163)

HSL

hsl(90, 26%, 71%)

HSB

hsb(90, 19%, 79%)

CMYK

cmyk(9%, 0%, 19%, 21%)

Oklch

oklch(81.1% 0.056 129.3)

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

#FAC487

Goose Yellow · BurlyWood · Warm Sun

HEX

#FAC487

RGB

rgb(250, 196, 135)

HSL

hsl(32, 92%, 75%)

HSB

hsb(32, 46%, 98%)

CMYK

cmyk(0%, 22%, 46%, 2%)

Oklch

oklch(85.5% 0.099 69.3)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

876786

688769

Analogous

796887

876786

876877

Triadic

876786

868768

688687

Split-Comp.

876786

778768

688779

Tetradic

876786

877968

688769

687787

Contrast Matrix WCAG 2.1 Contrast

876786	8C8CBD	7AB9C4	B6C9A3	FAC487
—	1.5 Fail	2.2 Fail	2.8 Fail	3.1 AA Large
1.5 Fail	—	1.4 Fail	1.8 Fail	2.0 Fail
2.2 Fail	1.4 Fail	—	1.2 Fail	1.4 Fail
2.8 Fail	1.8 Fail	1.2 Fail	—	1.1 Fail
3.1 AA Large	2.0 Fail	1.4 Fail	1.1 Fail	—

White BG

4.9AA

3.2AA Large

2.2Fail

1.8Fail

1.6Fail

Black BG

4.3AA Large

6.6AA

9.6AAA

11.9AAA

13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

79797E

8C8CB1

9596C1

BEBEAC

E3E296

Deuteranopia

7B7D7D

8C8CAE

928DC1

BDBCAE

E6EA99

Tritanopia

857977

8CA8A6

7DBFBF

B7B3B5

F7A1A4

Achromatopsia

747474

929292

A7A7A7

BFBFBF

CDCDCD

Shades & Tints Shades & Tints

#876786

Dark

Light

#8C8CBD

Dark

Light

#7AB9C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #876786;
  --color-2: #8c8cbd;
  --color-3: #7ab9c4;
  --color-4: #b6c9a3;
  --color-5: #fac487;
}

SCSS

$color-1: #876786;
$color-2: #8c8cbd;
$color-3: #7ab9c4;
$color-4: #b6c9a3;
$color-5: #fac487;

TAILWIND

colors: {
  'brand-1': '#876786',
  'brand-2': '#8c8cbd',
  'brand-3': '#7ab9c4',
  'brand-4': '#b6c9a3',
  'brand-5': '#fac487',
}

RGB Array

[135, 103, 134], [140, 140, 189], [122, 185, 196], [182, 201, 163], [250, 196, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #876786, #8C8CBD, #7AB9C4, #B6C9A3, #FAC487 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: #876786; --color-2: #8c8cbd; --color-3: #7ab9c4; --color-4: #b6c9a3; --color-5: #fac487. 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