← Back to Editor

#988CB1 · #7989AB · #8D8D83 · #969684 · #A1A60B

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

#988CB1

Wisteria · DarkGray · Cobalt Blue

HEX
#988CB1
RGB
rgb(152, 140, 177)
HSL
hsl(259, 19%, 62%)
HSB
hsb(259, 21%, 69%)
CMYK
cmyk(14%, 21%, 0%, 31%)
Oklch
oklch(66.3% 0.056 299.7)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#7989AB

Azure · LightSlateGray · Navy Blue

HEX
#7989AB
RGB
rgb(121, 137, 171)
HSL
hsl(221, 23%, 57%)
HSB
hsb(221, 29%, 67%)
CMYK
cmyk(29%, 20%, 0%, 33%)
Oklch
oklch(63.0% 0.055 265.1)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#8D8D83

Ash · Gray · Warm Gray

HEX
#8D8D83
RGB
rgb(141, 141, 131)
HSL
hsl(60, 4%, 53%)
HSB
hsb(60, 7%, 55%)
CMYK
cmyk(0%, 0%, 7%, 45%)
Oklch
oklch(64.0% 0.015 106.8)

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

#969684

Autumn Sage · Gray · Warm Gray

HEX
#969684
RGB
rgb(150, 150, 132)
HSL
hsl(60, 8%, 55%)
HSB
hsb(60, 12%, 59%)
CMYK
cmyk(0%, 0%, 12%, 41%)
Oklch
oklch(66.8% 0.026 107.1)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#A1A60B

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A1A60B
RGB
rgb(161, 166, 11)
HSL
hsl(62, 88%, 35%)
HSB
hsb(62, 93%, 65%)
CMYK
cmyk(3%, 0%, 93%, 35%)
Oklch
oklch(69.8% 0.152 111.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

988CB1
A5B18C

Analogous

8C92B1
988CB1
AA8CB1

Triadic

988CB1
B1978C
8CB197

Split-Comp.

988CB1
B1AA8C
92B18C

Tetradic

988CB1
B18C92
A5B18C
8CB1AA

Contrast Matrix WCAG 2.1 Contrast

988CB1
7989AB
8D8D83
969684
A1A60B
—
1.1
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.2
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
White BG
3.1AA Large
3.5AA Large
3.3AA Large
3.0AA Large
2.6Fail
Black BG
6.7AA
6.0AA
6.3AA
7.0AA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9393A8
8080A3
8D8D85
969688
A3A331

Deuteranopia

9494A6
7F7EA1
8D8D86
969689
A3A33A

Tritanopia

97A19F
7A9C9B
8D8788
968C8D
A14E55

Achromatopsia

949494
888888
8C8C8C
949494
939393

Shades & Tints Shades & Tints

#988CB1

Dark
Light

#7989AB

Dark
Light

#8D8D83

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #988cb1;
  --color-2: #7989ab;
  --color-3: #8d8d83;
  --color-4: #969684;
  --color-5: #a1a60b;
}

SCSS

$color-1: #988cb1;
$color-2: #7989ab;
$color-3: #8d8d83;
$color-4: #969684;
$color-5: #a1a60b;

TAILWIND

colors: {
  'brand-1': '#988cb1',
  'brand-2': '#7989ab',
  'brand-3': '#8d8d83',
  'brand-4': '#969684',
  'brand-5': '#a1a60b',
}

RGB Array

[152, 140, 177], [121, 137, 171], [141, 141, 131], [150, 150, 132], [161, 166, 11]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #988CB1, #7989AB, #8D8D83, #969684, #A1A60B 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: #988cb1; --color-2: #7989ab; --color-3: #8d8d83; --color-4: #969684; --color-5: #a1a60b. 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