← Back to Editor

#ABA2AF · #63506D · #647E7D · #52A972 · #9CCC3B

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

#ABA2AF

Lilac · DarkGray · Silver Sand

HEX
#ABA2AF
RGB
rgb(171, 162, 175)
HSL
hsl(282, 8%, 66%)
HSB
hsb(282, 7%, 69%)
CMYK
cmyk(2%, 7%, 0%, 31%)
Oklch
oklch(72.4% 0.021 315.6)

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

#63506D

Dark Plum · DimGray · Eggplant

HEX
#63506D
RGB
rgb(99, 80, 109)
HSL
hsl(279, 15%, 37%)
HSB
hsb(279, 27%, 43%)
CMYK
cmyk(9%, 27%, 0%, 57%)
Oklch
oklch(46.2% 0.052 313.8)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#647E7D

Mineral Blue · SlateGray · Mint Ice

HEX
#647E7D
RGB
rgb(100, 126, 125)
HSL
hsl(178, 12%, 44%)
HSB
hsb(178, 21%, 49%)
CMYK
cmyk(21%, 0%, 1%, 51%)
Oklch
oklch(57.2% 0.030 193.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#52A972

Celadon · MediumSeaGreen · Olive Green

HEX
#52A972
RGB
rgb(82, 169, 114)
HSL
hsl(142, 35%, 49%)
HSB
hsb(142, 51%, 66%)
CMYK
cmyk(51%, 0%, 33%, 34%)
Oklch
oklch(66.6% 0.118 153.9)

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

#9CCC3B

Grass Green · GreenYellow · Olive Green

HEX
#9CCC3B
RGB
rgb(156, 204, 59)
HSL
hsl(80, 59%, 52%)
HSB
hsb(80, 71%, 80%)
CMYK
cmyk(24%, 0%, 71%, 20%)
Oklch
oklch(78.4% 0.176 126.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABA2AF
A6AFA1

Analogous

A4A1AF
ABA2AF
AFA1AC

Triadic

ABA2AF
AFABA1
A1AFAB

Split-Comp.

ABA2AF
ACAFA1
A1AFA4

Tetradic

ABA2AF
AFA4A1
A6AFA1
A1ACAF

Contrast Matrix WCAG 2.1 Contrast

ABA2AF
63506D
647E7D
52A972
9CCC3B
—
2.9
Fail
1.8
Fail
1.2
Fail
1.3
Fail
2.9
Fail
—
1.7
Fail
2.5
Fail
3.8
AA Large
1.8
Fail
1.7
Fail
—
1.5
Fail
2.3
Fail
1.2
Fail
2.5
Fail
1.5
Fail
—
1.5
Fail
1.3
Fail
3.8
AA Large
2.3
Fail
1.5
Fail
—
White BG
2.5Fail
7.2AAA
4.4AA Large
2.9Fail
1.9Fail
Black BG
8.5AAA
2.9Fail
4.8AA
7.3AAA
11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A7AC
5B5B66
6F6F7D
78787F
B1B15E

Deuteranopia

A8A8AB
5C5D64
6E6C7D
736C83
AEAA67

Tritanopia

ABA9A9
62605F
657D7D
568A8C
9E7A80

Achromatopsia

A6A6A6
595959
767676
898989
ADADAD

Shades & Tints Shades & Tints

#ABA2AF

Dark
Light

#63506D

Dark
Light

#647E7D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aba2af;
  --color-2: #63506d;
  --color-3: #647e7d;
  --color-4: #52a972;
  --color-5: #9ccc3b;
}

SCSS

$color-1: #aba2af;
$color-2: #63506d;
$color-3: #647e7d;
$color-4: #52a972;
$color-5: #9ccc3b;

TAILWIND

colors: {
  'brand-1': '#aba2af',
  'brand-2': '#63506d',
  'brand-3': '#647e7d',
  'brand-4': '#52a972',
  'brand-5': '#9ccc3b',
}

RGB Array

[171, 162, 175], [99, 80, 109], [100, 126, 125], [82, 169, 114], [156, 204, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABA2AF, #63506D, #647E7D, #52A972, #9CCC3B 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: #aba2af; --color-2: #63506d; --color-3: #647e7d; --color-4: #52a972; --color-5: #9ccc3b. 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