← Back to Editor

#A7D6C1 · #ABD9D3 · #A5DDDD · #91E6E6 · #202528

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 LibraryData Visualization

Color Details Color Details

#A7D6C1

Jade · Silver · Apple Green

HEX
#A7D6C1
RGB
rgb(167, 214, 193)
HSL
hsl(153, 36%, 75%)
HSB
hsb(153, 22%, 84%)
CMYK
cmyk(22%, 0%, 10%, 16%)
Oklch
oklch(83.7% 0.057 165.9)

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

#ABD9D3

Jade · LightBlue · Glacier Blue

HEX
#ABD9D3
RGB
rgb(171, 217, 211)
HSL
hsl(172, 38%, 76%)
HSB
hsb(172, 21%, 85%)
CMYK
cmyk(21%, 0%, 3%, 15%)
Oklch
oklch(85.1% 0.049 186.5)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#A5DDDD

Sky Blue · LightBlue · Glacier Blue

HEX
#A5DDDD
RGB
rgb(165, 221, 221)
HSL
hsl(180, 45%, 76%)
HSB
hsb(180, 25%, 87%)
CMYK
cmyk(25%, 0%, 0%, 13%)
Oklch
oklch(85.9% 0.057 196.1)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#91E6E6

Sky Blue · SkyBlue · Lake Green

HEX
#91E6E6
RGB
rgb(145, 230, 230)
HSL
hsl(180, 63%, 74%)
HSB
hsb(180, 37%, 90%)
CMYK
cmyk(37%, 0%, 0%, 10%)
Oklch
oklch(87.1% 0.082 195.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#202528

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#202528
RGB
rgb(32, 37, 40)
HSL
hsl(202, 11%, 14%)
HSB
hsb(202, 20%, 16%)
CMYK
cmyk(20%, 7%, 0%, 84%)
Oklch
oklch(26.1% 0.009 234.1)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7D6C1
D6A8BD

Analogous

A8D6AB
A7D6C1
A8D4D6

Triadic

A7D6C1
C2A8D6
D6C2A8

Split-Comp.

A7D6C1
D6A8D4
D6ABA8

Tetradic

A7D6C1
ABA8D6
D6A8BD
D4D6A8

Contrast Matrix WCAG 2.1 Contrast

A7D6C1
ABD9D3
A5DDDD
91E6E6
202528
—
1.0
Fail
1.1
Fail
1.1
Fail
9.6
AAA
1.0
Fail
—
1.0
Fail
1.1
Fail
10.0
AAA
1.1
Fail
1.0
Fail
—
1.0
Fail
10.3
AAA
1.1
Fail
1.1
Fail
1.0
Fail
—
10.8
AAA
9.6
AAA
10.0
AAA
10.3
AAA
10.8
AAA
—
White BG
1.6Fail
1.5Fail
1.5Fail
1.4Fail
15.5AAA
Black BG
13.0AAA
13.6AAA
14.0AAA
14.7AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBCC6
BFBFD4
BDBEDD
B6B7E6
222227

Deuteranopia

B9B5C7
BCB9D5
BAB6DD
B1ABE6
222227

Tritanopia

A9CACB
ADD6D6
A8DDDD
95E6E6
202727

Achromatopsia

C6C6C6
CBCBCB
CCCCCC
CDCDCD
242424

Shades & Tints Shades & Tints

#A7D6C1

Dark
Light

#ABD9D3

Dark
Light

#A5DDDD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7d6c1;
  --color-2: #abd9d3;
  --color-3: #a5dddd;
  --color-4: #91e6e6;
  --color-5: #202528;
}

SCSS

$color-1: #a7d6c1;
$color-2: #abd9d3;
$color-3: #a5dddd;
$color-4: #91e6e6;
$color-5: #202528;

TAILWIND

colors: {
  'brand-1': '#a7d6c1',
  'brand-2': '#abd9d3',
  'brand-3': '#a5dddd',
  'brand-4': '#91e6e6',
  'brand-5': '#202528',
}

RGB Array

[167, 214, 193], [171, 217, 211], [165, 221, 221], [145, 230, 230], [32, 37, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7D6C1, #ABD9D3, #A5DDDD, #91E6E6, #202528 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a7d6c1; --color-2: #abd9d3; --color-3: #a5dddd; --color-4: #91e6e6; --color-5: #202528. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. 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