← Back to Editor

#E4D3EB · #A9BAB2 · #67A35D · #688DA8 · #76689E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E4D3EB

Lilac · Lavender · Lavender

HEX
#E4D3EB
RGB
rgb(228, 211, 235)
HSL
hsl(283, 37%, 87%)
HSB
hsb(283, 10%, 92%)
CMYK
cmyk(3%, 10%, 0%, 8%)
Oklch
oklch(88.8% 0.037 316.2)

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

#A9BAB2

Jade · DarkGray · Apple Green

HEX
#A9BAB2
RGB
rgb(169, 186, 178)
HSL
hsl(152, 11%, 70%)
HSB
hsb(152, 9%, 73%)
CMYK
cmyk(9%, 0%, 4%, 27%)
Oklch
oklch(77.3% 0.022 165.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#67A35D

Celadon · MediumSeaGreen · Olive Green

HEX
#67A35D
RGB
rgb(103, 163, 93)
HSL
hsl(111, 28%, 50%)
HSB
hsb(111, 43%, 64%)
CMYK
cmyk(37%, 0%, 43%, 36%)
Oklch
oklch(65.7% 0.118 140.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#688DA8

Slate Blue · CadetBlue · Navy Blue

HEX
#688DA8
RGB
rgb(104, 141, 168)
HSL
hsl(205, 27%, 53%)
HSB
hsb(205, 38%, 66%)
CMYK
cmyk(38%, 16%, 0%, 34%)
Oklch
oklch(62.6% 0.058 240.5)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#76689E

Deep Indigo · SlateGray · Navy Blue

HEX
#76689E
RGB
rgb(118, 104, 158)
HSL
hsl(256, 22%, 51%)
HSB
hsb(256, 34%, 62%)
CMYK
cmyk(25%, 34%, 0%, 38%)
Oklch
oklch(55.2% 0.084 295.4)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4D3EB
D9EAD2

Analogous

D7D2EA
E4D3EB
EAD2E5

Triadic

E4D3EB
EAE3D2
D2EAE3

Split-Comp.

E4D3EB
E5EAD2
D2EAD7

Tetradic

E4D3EB
EAD7D2
D9EAD2
D2E5EA

Contrast Matrix WCAG 2.1 Contrast

E4D3EB
A9BAB2
67A35D
688DA8
76689E
—
1.4
Fail
2.1
Fail
2.5
Fail
3.5
AA Large
1.4
Fail
—
1.5
Fail
1.7
Fail
2.4
Fail
2.1
Fail
1.5
Fail
—
1.2
Fail
1.6
Fail
2.5
Fail
1.7
Fail
1.2
Fail
—
1.4
Fail
3.5
AA Large
2.4
Fail
1.6
Fail
1.4
Fail
—
White BG
1.4Fail
2.0Fail
3.0AA Large
3.5AA Large
4.9AA
Black BG
14.8AAA
10.4AAA
7.0AA
6.0AA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDCE5
B0B1B4
81826E
7878A1
707091

Deuteranopia

DEDFE4
AFAEB4
7E7972
7673A0
71728E

Tritanopia

E3E1E0
AAB5B6
6A7B7E
6A9C9B
758784

Achromatopsia

DBDBDB
B4B4B4
898989
858585
727272

Shades & Tints Shades & Tints

#E4D3EB

Dark
Light

#A9BAB2

Dark
Light

#67A35D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4d3eb;
  --color-2: #a9bab2;
  --color-3: #67a35d;
  --color-4: #688da8;
  --color-5: #76689e;
}

SCSS

$color-1: #e4d3eb;
$color-2: #a9bab2;
$color-3: #67a35d;
$color-4: #688da8;
$color-5: #76689e;

TAILWIND

colors: {
  'brand-1': '#e4d3eb',
  'brand-2': '#a9bab2',
  'brand-3': '#67a35d',
  'brand-4': '#688da8',
  'brand-5': '#76689e',
}

RGB Array

[228, 211, 235], [169, 186, 178], [103, 163, 93], [104, 141, 168], [118, 104, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4D3EB, #A9BAB2, #67A35D, #688DA8, #76689E 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: #e4d3eb; --color-2: #a9bab2; --color-3: #67a35d; --color-4: #688da8; --color-5: #76689e. 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