← Back to Editor

#AB7B84 · #A3A095 · #9CBAA0 · #B5C49D · #CCCC99

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AB7B84

Crimson · Gray · Passion Red

HEX
#AB7B84
RGB
rgb(171, 123, 132)
HSL
hsl(349, 22%, 58%)
HSB
hsb(349, 28%, 67%)
CMYK
cmyk(0%, 28%, 23%, 33%)
Oklch
oklch(63.3% 0.061 6.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#A3A095

Ash · DarkGray · Silver Sand

HEX
#A3A095
RGB
rgb(163, 160, 149)
HSL
hsl(47, 7%, 61%)
HSB
hsb(47, 9%, 64%)
CMYK
cmyk(0%, 2%, 9%, 36%)
Oklch
oklch(70.5% 0.016 94.3)

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

#9CBAA0

Celadon · DarkSeaGreen · Apple Green

HEX
#9CBAA0
RGB
rgb(156, 186, 160)
HSL
hsl(128, 18%, 67%)
HSB
hsb(128, 16%, 73%)
CMYK
cmyk(16%, 0%, 14%, 27%)
Oklch
oklch(75.9% 0.049 148.8)

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

#B5C49D

Willow Green · DarkGray · Apple Green

HEX
#B5C49D
RGB
rgb(181, 196, 157)
HSL
hsl(83, 25%, 69%)
HSB
hsb(83, 20%, 77%)
CMYK
cmyk(8%, 0%, 20%, 23%)
Oklch
oklch(79.8% 0.056 124.8)

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

#CCCC99

Fresh Green · Tan · Sunflower

HEX
#CCCC99
RGB
rgb(204, 204, 153)
HSL
hsl(60, 33%, 70%)
HSB
hsb(60, 25%, 80%)
CMYK
cmyk(0%, 0%, 25%, 20%)
Oklch
oklch(83.3% 0.068 107.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB7B84
7CABA3

Analogous

AB7C9D
AB7B84
AB8B7C

Triadic

AB7B84
85AB7C
7C85AB

Split-Comp.

AB7B84
7CAB8B
7C9DAB

Tetradic

AB7B84
9DAB7C
7CABA3
8B7CAB

Contrast Matrix WCAG 2.1 Contrast

AB7B84
A3A095
9CBAA0
B5C49D
CCCC99
—
1.4
Fail
1.7
Fail
1.9
Fail
2.1
Fail
1.4
Fail
—
1.2
Fail
1.4
Fail
1.6
Fail
1.7
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
1.9
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
2.1
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
White BG
3.6AA Large
2.6Fail
2.1Fail
1.9Fail
1.7Fail
Black BG
5.9AA
8.0AAA
9.9AAA
11.3AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

969682
A2A298
A9A9A6
BBBCA6
CCCCA5

Deuteranopia

999D81
A2A298
A7A5A8
BBBAA9
CCCCA8

Tritanopia

A98080
A39A9A
9EABAC
B6AEB0
CCAFB1

Achromatopsia

8A8A8A
A0A0A0
AEAEAE
BBBBBB
C6C6C6

Shades & Tints Shades & Tints

#AB7B84

Dark
Light

#A3A095

Dark
Light

#9CBAA0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab7b84;
  --color-2: #a3a095;
  --color-3: #9cbaa0;
  --color-4: #b5c49d;
  --color-5: #cccc99;
}

SCSS

$color-1: #ab7b84;
$color-2: #a3a095;
$color-3: #9cbaa0;
$color-4: #b5c49d;
$color-5: #cccc99;

TAILWIND

colors: {
  'brand-1': '#ab7b84',
  'brand-2': '#a3a095',
  'brand-3': '#9cbaa0',
  'brand-4': '#b5c49d',
  'brand-5': '#cccc99',
}

RGB Array

[171, 123, 132], [163, 160, 149], [156, 186, 160], [181, 196, 157], [204, 204, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB7B84, #A3A095, #9CBAA0, #B5C49D, #CCCC99 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: #ab7b84; --color-2: #a3a095; --color-3: #9cbaa0; --color-4: #b5c49d; --color-5: #cccc99. 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