← Back to Editor

#AFD0BB · #95B1A5 · #8B8C8E · #826E7A · #6A4356

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#AFD0BB

Celadon · Silver · Apple Green

HEX
#AFD0BB
RGB
rgb(175, 208, 187)
HSL
hsl(142, 26%, 75%)
HSB
hsb(142, 16%, 82%)
CMYK
cmyk(16%, 0%, 10%, 18%)
Oklch
oklch(82.8% 0.046 157.3)

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

#95B1A5

Jade · DarkGray · Apple Green

HEX
#95B1A5
RGB
rgb(149, 177, 165)
HSL
hsl(154, 15%, 64%)
HSB
hsb(154, 16%, 69%)
CMYK
cmyk(16%, 0%, 7%, 31%)
Oklch
oklch(73.6% 0.035 167.6)

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

#8B8C8E

Ash · Gray · Warm Gray

HEX
#8B8C8E
RGB
rgb(139, 140, 142)
HSL
hsl(220, 1%, 55%)
HSB
hsb(220, 2%, 56%)
CMYK
cmyk(2%, 1%, 0%, 44%)
Oklch
oklch(64.0% 0.003 264.5)

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

#826E7A

Rose Purple · Gray · Warm Gray

HEX
#826E7A
RGB
rgb(130, 110, 122)
HSL
hsl(324, 8%, 47%)
HSB
hsb(324, 15%, 51%)
CMYK
cmyk(0%, 15%, 6%, 49%)
Oklch
oklch(56.1% 0.031 341.4)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#6A4356

Dark Violet · DimGray · Camellia

HEX
#6A4356
RGB
rgb(106, 67, 86)
HSL
hsl(331, 23%, 34%)
HSB
hsb(331, 37%, 42%)
CMYK
cmyk(0%, 37%, 19%, 58%)
Oklch
oklch(43.4% 0.060 349.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFD0BB
D0AFC4

Analogous

B3D0AF
AFD0BB
AFD0CB

Triadic

AFD0BB
BBAFD0
D0BBAF

Split-Comp.

AFD0BB
CBAFD0
D0AFB3

Tetradic

AFD0BB
AFB3D0
D0AFC4
D0CBAF

Contrast Matrix WCAG 2.1 Contrast

AFD0BB
95B1A5
8B8C8E
826E7A
6A4356
—
1.4
Fail
2.0
Fail
2.8
Fail
4.9
AA
1.4
Fail
—
1.5
Fail
2.0
Fail
3.6
AA Large
2.0
Fail
1.5
Fail
—
1.4
Fail
2.4
Fail
2.8
Fail
2.0
Fail
1.4
Fail
—
1.7
Fail
4.9
AA
3.6
AA Large
2.4
Fail
1.7
Fail
—
White BG
1.7Fail
2.3Fail
3.4AA Large
4.7AA
8.2AAA
Black BG
12.6AAA
9.1AAA
6.2AA
4.5AA Large
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBEC0
A1A1A8
8B8B8E
797977
595951

Deuteranopia

BBB9C1
A09DA9
8B8B8D
7B7C76
5B5E50

Tritanopia

B1C4C5
96AAAB
8B8D8D
817574
684E4D

Achromatopsia

C4C4C4
A7A7A7
8C8C8C
757575
515151

Shades & Tints Shades & Tints

#AFD0BB

Dark
Light

#95B1A5

Dark
Light

#8B8C8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afd0bb;
  --color-2: #95b1a5;
  --color-3: #8b8c8e;
  --color-4: #826e7a;
  --color-5: #6a4356;
}

SCSS

$color-1: #afd0bb;
$color-2: #95b1a5;
$color-3: #8b8c8e;
$color-4: #826e7a;
$color-5: #6a4356;

TAILWIND

colors: {
  'brand-1': '#afd0bb',
  'brand-2': '#95b1a5',
  'brand-3': '#8b8c8e',
  'brand-4': '#826e7a',
  'brand-5': '#6a4356',
}

RGB Array

[175, 208, 187], [149, 177, 165], [139, 140, 142], [130, 110, 122], [106, 67, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFD0BB, #95B1A5, #8B8C8E, #826E7A, #6A4356 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #afd0bb; --color-2: #95b1a5; --color-3: #8b8c8e; --color-4: #826e7a; --color-5: #6a4356. 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. 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