← Back to Editor

#D0DDB1 · #ABBFA2 · #86A192 · #73847E · #5F676A

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

#D0DDB1

Willow Green · LightGray · Apple Green

HEX
#D0DDB1
RGB
rgb(208, 221, 177)
HSL
hsl(78, 39%, 78%)
HSB
hsb(78, 20%, 87%)
CMYK
cmyk(6%, 0%, 20%, 13%)
Oklch
oklch(87.6% 0.060 121.0)

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

#ABBFA2

Celadon · DarkGray · Apple Green

HEX
#ABBFA2
RGB
rgb(171, 191, 162)
HSL
hsl(101, 18%, 69%)
HSB
hsb(101, 15%, 75%)
CMYK
cmyk(10%, 0%, 15%, 25%)
Oklch
oklch(78.1% 0.046 135.9)

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

#86A192

Celadon · DarkSeaGreen · Olive Green

HEX
#86A192
RGB
rgb(134, 161, 146)
HSL
hsl(147, 13%, 58%)
HSB
hsb(147, 17%, 63%)
CMYK
cmyk(17%, 0%, 9%, 37%)
Oklch
oklch(68.4% 0.037 160.9)

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

#73847E

Ink Gray · Gray · Warm Gray

HEX
#73847E
RGB
rgb(115, 132, 126)
HSL
hsl(159, 7%, 48%)
HSB
hsb(159, 13%, 52%)
CMYK
cmyk(13%, 0%, 5%, 48%)
Oklch
oklch(59.8% 0.022 172.3)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#5F676A

Ink Gray · DimGray · Charcoal

HEX
#5F676A
RGB
rgb(95, 103, 106)
HSL
hsl(196, 5%, 39%)
HSB
hsb(196, 10%, 42%)
CMYK
cmyk(10%, 3%, 0%, 58%)
Oklch
oklch(50.8% 0.011 222.2)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0DDB1
BEB1DD

Analogous

DDD4B1
D0DDB1
BADDB1

Triadic

D0DDB1
B1D0DD
DDB1D0

Split-Comp.

D0DDB1
B1BADD
D4B1DD

Tetradic

D0DDB1
B1DDD4
BEB1DD
DDB1BA

Contrast Matrix WCAG 2.1 Contrast

D0DDB1
ABBFA2
86A192
73847E
5F676A
—
1.4
Fail
1.9
Fail
2.7
Fail
4.0
AA Large
1.4
Fail
—
1.4
Fail
2.0
Fail
2.9
Fail
1.9
Fail
1.4
Fail
—
1.4
Fail
2.1
Fail
2.7
Fail
2.0
Fail
1.4
Fail
—
1.5
Fail
4.0
AA Large
2.9
Fail
2.1
Fail
1.5
Fail
—
White BG
1.4Fail
2.0Fail
2.8Fail
3.9AA Large
5.8AA
Black BG
14.7AAA
10.7AAA
7.5AAA
5.3AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6BC
B4B4A9
929296
7A7B7F
626369

Deuteranopia

D5D4BE
B3B1AB
908E97
797880
626169

Tritanopia

D1C4C6
ACAFB0
879899
748181
5F6969

Achromatopsia

D4D4D4
B6B6B6
979797
7E7E7E
656565

Shades & Tints Shades & Tints

#D0DDB1

Dark
Light

#ABBFA2

Dark
Light

#86A192

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0ddb1;
  --color-2: #abbfa2;
  --color-3: #86a192;
  --color-4: #73847e;
  --color-5: #5f676a;
}

SCSS

$color-1: #d0ddb1;
$color-2: #abbfa2;
$color-3: #86a192;
$color-4: #73847e;
$color-5: #5f676a;

TAILWIND

colors: {
  'brand-1': '#d0ddb1',
  'brand-2': '#abbfa2',
  'brand-3': '#86a192',
  'brand-4': '#73847e',
  'brand-5': '#5f676a',
}

RGB Array

[208, 221, 177], [171, 191, 162], [134, 161, 146], [115, 132, 126], [95, 103, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0DDB1, #ABBFA2, #86A192, #73847E, #5F676A 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: #d0ddb1; --color-2: #abbfa2; --color-3: #86a192; --color-4: #73847e; --color-5: #5f676a. 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