← Back to Editor

#A9D3B8 · #8C9C88 · #707566 · #B7B792 · #D1E5C2

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A9D3B8

Celadon · Silver · Apple Green

HEX
#A9D3B8
RGB
rgb(169, 211, 184)
HSL
hsl(141, 32%, 75%)
HSB
hsb(141, 20%, 83%)
CMYK
cmyk(20%, 0%, 13%, 17%)
Oklch
oklch(82.9% 0.058 156.7)

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

#8C9C88

Celadon · Gray · Silver Sand

HEX
#8C9C88
RGB
rgb(140, 156, 136)
HSL
hsl(108, 9%, 57%)
HSB
hsb(108, 13%, 61%)
CMYK
cmyk(10%, 0%, 13%, 39%)
Oklch
oklch(67.4% 0.034 139.4)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#707566

Ink Gray · DimGray · Warm Gray

HEX
#707566
RGB
rgb(112, 117, 102)
HSL
hsl(80, 7%, 43%)
HSB
hsb(80, 13%, 46%)
CMYK
cmyk(4%, 0%, 13%, 54%)
Oklch
oklch(55.4% 0.023 122.2)

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

#B7B792

Fresh Green · Tan · Sunflower

HEX
#B7B792
RGB
rgb(183, 183, 146)
HSL
hsl(60, 20%, 65%)
HSB
hsb(60, 20%, 72%)
CMYK
cmyk(0%, 0%, 20%, 28%)
Oklch
oklch(77.0% 0.051 107.5)

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

#D1E5C2

Celadon · LightGray · Mint Green

HEX
#D1E5C2
RGB
rgb(209, 229, 194)
HSL
hsl(94, 40%, 83%)
HSB
hsb(94, 15%, 90%)
CMYK
cmyk(9%, 0%, 15%, 10%)
Oklch
oklch(89.8% 0.051 131.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A9D3B8
D4ABC5

Analogous

B1D4AB
A9D3B8
ABD4CE

Triadic

A9D3B8
B9ABD4
D4B9AB

Split-Comp.

A9D3B8
CEABD4
D4ABB1

Tetradic

A9D3B8
ABB1D4
D4ABC5
D4CEAB

Contrast Matrix WCAG 2.1 Contrast

A9D3B8
8C9C88
707566
B7B792
D1E5C2
—
1.8
Fail
2.9
Fail
1.2
Fail
1.2
Fail
1.8
Fail
—
1.6
Fail
1.4
Fail
2.2
Fail
2.9
Fail
1.6
Fail
—
2.3
Fail
3.5
AA Large
1.2
Fail
1.4
Fail
2.3
Fail
—
1.5
Fail
1.2
Fail
2.2
Fail
3.5
AA Large
1.5
Fail
—
White BG
1.7Fail
2.9Fail
4.7AA
2.1Fail
1.3Fail
Black BG
12.7AAA
7.2AAA
4.4AA Large
10.2AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBCBF
93938D
72726A
B7B79B
DADACA

Deuteranopia

B9B6C0
92918E
72726B
B7B79D
D9D7CD

Tritanopia

ABC4C5
8D9192
706C6D
B7A2A4
D2D1D3

Achromatopsia

C3C3C3
959595
727272
B3B3B3
DBDBDB

Shades & Tints Shades & Tints

#A9D3B8

Dark
Light

#8C9C88

Dark
Light

#707566

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a9d3b8;
  --color-2: #8c9c88;
  --color-3: #707566;
  --color-4: #b7b792;
  --color-5: #d1e5c2;
}

SCSS

$color-1: #a9d3b8;
$color-2: #8c9c88;
$color-3: #707566;
$color-4: #b7b792;
$color-5: #d1e5c2;

TAILWIND

colors: {
  'brand-1': '#a9d3b8',
  'brand-2': '#8c9c88',
  'brand-3': '#707566',
  'brand-4': '#b7b792',
  'brand-5': '#d1e5c2',
}

RGB Array

[169, 211, 184], [140, 156, 136], [112, 117, 102], [183, 183, 146], [209, 229, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A9D3B8, #8C9C88, #707566, #B7B792, #D1E5C2 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: #a9d3b8; --color-2: #8c9c88; --color-3: #707566; --color-4: #b7b792; --color-5: #d1e5c2. 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