← Back to Editor

#A88CA6 · #A3A6B3 · #A3BBB8 · #C3D5C9 · #5A6264

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

#A88CA6

Rose Purple · DarkGray · Violet

HEX
#A88CA6
RGB
rgb(168, 140, 166)
HSL
hsl(304, 14%, 60%)
HSB
hsb(304, 17%, 66%)
CMYK
cmyk(0%, 17%, 1%, 34%)
Oklch
oklch(67.4% 0.050 328.4)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#A3A6B3

Azure · DarkGray · Cobalt Blue

HEX
#A3A6B3
RGB
rgb(163, 166, 179)
HSL
hsl(229, 10%, 67%)
HSB
hsb(229, 9%, 70%)
CMYK
cmyk(9%, 7%, 0%, 30%)
Oklch
oklch(72.7% 0.019 275.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#A3BBB8

Jade · DarkGray · Lake Green

HEX
#A3BBB8
RGB
rgb(163, 187, 184)
HSL
hsl(173, 15%, 69%)
HSB
hsb(173, 13%, 73%)
CMYK
cmyk(13%, 0%, 2%, 27%)
Oklch
oklch(77.3% 0.027 187.5)

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

#C3D5C9

Celadon · LightGray · Apple Green

HEX
#C3D5C9
RGB
rgb(195, 213, 201)
HSL
hsl(140, 18%, 80%)
HSB
hsb(140, 8%, 84%)
CMYK
cmyk(8%, 0%, 6%, 16%)
Oklch
oklch(85.6% 0.025 156.6)

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

#5A6264

Ink Gray · DimGray · Charcoal

HEX
#5A6264
RGB
rgb(90, 98, 100)
HSL
hsl(192, 5%, 37%)
HSB
hsb(192, 10%, 39%)
CMYK
cmyk(10%, 2%, 0%, 61%)
Oklch
oklch(49.0% 0.010 214.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A88CA6
8BA78D

Analogous

9B8BA7
A88CA6
A78B97

Triadic

A88CA6
A5A78B
8BA5A7

Split-Comp.

A88CA6
97A78B
8BA79B

Tetradic

A88CA6
A79B8B
8BA78D
8B97A7

Contrast Matrix WCAG 2.1 Contrast

A88CA6
A3A6B3
A3BBB8
C3D5C9
5A6264
—
1.2
Fail
1.5
Fail
2.0
Fail
2.1
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
2.6
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
3.1
AA Large
2.0
Fail
1.6
Fail
1.3
Fail
—
4.1
AA Large
2.1
Fail
2.6
Fail
3.1
AA Large
4.1
AA Large
—
White BG
3.0AA Large
2.4Fail
2.0Fail
1.5Fail
6.2AA
Black BG
7.0AA
8.7AAA
10.4AAA
13.7AAA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CA0
A4A4B0
ADAEB9
CBCBCC
5D5E64

Deuteranopia

9EA09E
A4A4AF
ACAAB9
CAC8CD
5D5C63

Tritanopia

A79B9A
A3ADAD
A4B9B9
C4CECF
5A6363

Achromatopsia

979797
A7A7A7
B3B3B3
CECECE
606060

Shades & Tints Shades & Tints

#A88CA6

Dark
Light

#A3A6B3

Dark
Light

#A3BBB8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a88ca6;
  --color-2: #a3a6b3;
  --color-3: #a3bbb8;
  --color-4: #c3d5c9;
  --color-5: #5a6264;
}

SCSS

$color-1: #a88ca6;
$color-2: #a3a6b3;
$color-3: #a3bbb8;
$color-4: #c3d5c9;
$color-5: #5a6264;

TAILWIND

colors: {
  'brand-1': '#a88ca6',
  'brand-2': '#a3a6b3',
  'brand-3': '#a3bbb8',
  'brand-4': '#c3d5c9',
  'brand-5': '#5a6264',
}

RGB Array

[168, 140, 166], [163, 166, 179], [163, 187, 184], [195, 213, 201], [90, 98, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A88CA6, #A3A6B3, #A3BBB8, #C3D5C9, #5A6264 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: #a88ca6; --color-2: #a3a6b3; --color-3: #a3bbb8; --color-4: #c3d5c9; --color-5: #5a6264. 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