← Back to Editor

#D8D8C0 · #9FC4B2 · #81B0B0 · #668D9D · #4E6189

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

#D8D8C0

Fresh Green · LightGray · Lemon Cream

HEX
#D8D8C0
RGB
rgb(216, 216, 192)
HSL
hsl(60, 24%, 80%)
HSB
hsb(60, 11%, 85%)
CMYK
cmyk(0%, 0%, 11%, 15%)
Oklch
oklch(87.6% 0.032 107.0)

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

#9FC4B2

Jade · DarkGray · Apple Green

HEX
#9FC4B2
RGB
rgb(159, 196, 178)
HSL
hsl(151, 24%, 70%)
HSB
hsb(151, 19%, 77%)
CMYK
cmyk(19%, 0%, 9%, 23%)
Oklch
oklch(78.8% 0.047 164.1)

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

#81B0B0

Slate Blue · DarkSeaGreen · Lake Green

HEX
#81B0B0
RGB
rgb(129, 176, 176)
HSL
hsl(180, 23%, 60%)
HSB
hsb(180, 27%, 69%)
CMYK
cmyk(27%, 0%, 0%, 31%)
Oklch
oklch(72.4% 0.050 196.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#668D9D

Slate Blue · LightSlateGray · Lake Green

HEX
#668D9D
RGB
rgb(102, 141, 157)
HSL
hsl(197, 22%, 51%)
HSB
hsb(197, 35%, 62%)
CMYK
cmyk(35%, 10%, 0%, 38%)
Oklch
oklch(62.0% 0.049 225.3)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#4E6189

Indigo · DarkSlateBlue · Navy Blue

HEX
#4E6189
RGB
rgb(78, 97, 137)
HSL
hsl(221, 27%, 42%)
HSB
hsb(221, 43%, 54%)
CMYK
cmyk(43%, 29%, 0%, 46%)
Oklch
oklch(49.4% 0.069 264.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8D8C0
C0C0D8

Analogous

D8CCC0
D8D8C0
CCD8C0

Triadic

D8D8C0
C0D8D8
D8C0D8

Split-Comp.

D8D8C0
C0CCD8
CCC0D8

Tetradic

D8D8C0
C0D8CC
C0C0D8
D8C0CC

Contrast Matrix WCAG 2.1 Contrast

D8D8C0
9FC4B2
81B0B0
668D9D
4E6189
—
1.3
Fail
1.7
Fail
2.5
Fail
4.3
AA Large
1.3
Fail
—
1.3
Fail
1.9
Fail
3.2
AA Large
1.7
Fail
1.3
Fail
—
1.5
Fail
2.6
Fail
2.5
Fail
1.9
Fail
1.5
Fail
—
1.7
Fail
4.3
AA Large
3.2
AA Large
2.6
Fail
1.7
Fail
—
White BG
1.4Fail
1.9Fail
2.4Fail
3.6AA Large
6.2AA
Black BG
14.5AAA
11.0AAA
8.8AAA
5.9AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D8C6
AFAFB6
9596B0
777799
56567F

Deuteranopia

D8D8C7
ADAAB7
938FB0
757298
55547D

Tritanopia

D8CACB
A1BABB
83B0B0
689695
4F7876

Achromatopsia

D5D5D5
B7B7B7
A2A2A2
838383
606060

Shades & Tints Shades & Tints

#D8D8C0

Dark
Light

#9FC4B2

Dark
Light

#81B0B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8d8c0;
  --color-2: #9fc4b2;
  --color-3: #81b0b0;
  --color-4: #668d9d;
  --color-5: #4e6189;
}

SCSS

$color-1: #d8d8c0;
$color-2: #9fc4b2;
$color-3: #81b0b0;
$color-4: #668d9d;
$color-5: #4e6189;

TAILWIND

colors: {
  'brand-1': '#d8d8c0',
  'brand-2': '#9fc4b2',
  'brand-3': '#81b0b0',
  'brand-4': '#668d9d',
  'brand-5': '#4e6189',
}

RGB Array

[216, 216, 192], [159, 196, 178], [129, 176, 176], [102, 141, 157], [78, 97, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8D8C0, #9FC4B2, #81B0B0, #668D9D, #4E6189 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: #d8d8c0; --color-2: #9fc4b2; --color-3: #81b0b0; --color-4: #668d9d; --color-5: #4e6189. 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