← Back to Editor

#765693 · #588A96 · #86AB9D · #B9C6A3 · #DDCE96

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

#765693

Dark Plum · SlateGray · Violet

HEX
#765693
RGB
rgb(118, 86, 147)
HSL
hsl(271, 26%, 46%)
HSB
hsb(271, 41%, 58%)
CMYK
cmyk(20%, 41%, 0%, 42%)
Oklch
oklch(51.2% 0.100 307.3)

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

#588A96

Slate Blue · CadetBlue · Mint Ice

HEX
#588A96
RGB
rgb(88, 138, 150)
HSL
hsl(192, 26%, 47%)
HSB
hsb(192, 41%, 59%)
CMYK
cmyk(41%, 8%, 0%, 41%)
Oklch
oklch(60.3% 0.057 214.6)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#86AB9D

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#86AB9D
RGB
rgb(134, 171, 157)
HSL
hsl(157, 18%, 60%)
HSB
hsb(157, 22%, 67%)
CMYK
cmyk(22%, 0%, 8%, 33%)
Oklch
oklch(71.0% 0.045 169.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B9C6A3

Willow Green · Silver · Apple Green

HEX
#B9C6A3
RGB
rgb(185, 198, 163)
HSL
hsl(82, 23%, 71%)
HSB
hsb(82, 18%, 78%)
CMYK
cmyk(7%, 0%, 18%, 22%)
Oklch
oklch(80.7% 0.050 124.1)

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

#DDCE96

Goose Yellow · BurlyWood · Sunflower

HEX
#DDCE96
RGB
rgb(221, 206, 150)
HSL
hsl(47, 51%, 73%)
HSB
hsb(47, 32%, 87%)
CMYK
cmyk(0%, 7%, 32%, 13%)
Oklch
oklch(85.0% 0.075 94.9)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

765693
749457

Analogous

585794
765693
945793

Triadic

765693
947657
579476

Split-Comp.

765693
939457
579458

Tetradic

765693
945857
749457
579394

Contrast Matrix WCAG 2.1 Contrast

765693
588A96
86AB9D
B9C6A3
DDCE96
—
1.6
Fail
2.4
Fail
3.3
AA Large
3.8
AA Large
1.6
Fail
—
1.5
Fail
2.1
Fail
2.4
Fail
2.4
Fail
1.5
Fail
—
1.4
Fail
1.6
Fail
3.3
AA Large
2.1
Fail
1.4
Fail
—
1.1
Fail
3.8
AA Large
2.4
Fail
1.6
Fail
1.1
Fail
—
White BG
6.0AA
3.8AA Large
2.5Fail
1.8Fail
1.6Fail
Black BG
3.5AA Large
5.5AA
8.3AAA
11.7AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

686884
6E6E93
9696A0
BFBFAB
D7D6A4

Deuteranopia

6A6C81
6B6792
9491A1
BEBDAE
D7D9A7

Tritanopia

747976
5B9190
88A3A4
BAB2B4
DCAEB1

Achromatopsia

676767
7C7C7C
9E9E9E
BEBEBE
CCCCCC

Shades & Tints Shades & Tints

#765693

Dark
Light

#588A96

Dark
Light

#86AB9D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #765693;
  --color-2: #588a96;
  --color-3: #86ab9d;
  --color-4: #b9c6a3;
  --color-5: #ddce96;
}

SCSS

$color-1: #765693;
$color-2: #588a96;
$color-3: #86ab9d;
$color-4: #b9c6a3;
$color-5: #ddce96;

TAILWIND

colors: {
  'brand-1': '#765693',
  'brand-2': '#588a96',
  'brand-3': '#86ab9d',
  'brand-4': '#b9c6a3',
  'brand-5': '#ddce96',
}

RGB Array

[118, 86, 147], [88, 138, 150], [134, 171, 157], [185, 198, 163], [221, 206, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #765693, #588A96, #86AB9D, #B9C6A3, #DDCE96 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #765693; --color-2: #588a96; --color-3: #86ab9d; --color-4: #b9c6a3; --color-5: #ddce96. 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. Restrained colors convey professionalism and trust. 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