← Back to Editor

#BAB9AE · #98AF94 · #66988C · #507C88 · #505769

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 Library

Color Details Color Details

#BAB9AE

Fresh Green · Silver · Pearl Gray

HEX
#BAB9AE
RGB
rgb(186, 185, 174)
HSL
hsl(55, 8%, 71%)
HSB
hsb(55, 6%, 73%)
CMYK
cmyk(0%, 1%, 6%, 27%)
Oklch
oklch(78.3% 0.015 102.5)

Traditional「Fresh Green」· Paint「Pearl Gray」· Creative Silver Lining

#98AF94

Celadon · DarkSeaGreen · Apple Green

HEX
#98AF94
RGB
rgb(152, 175, 148)
HSL
hsl(111, 14%, 63%)
HSB
hsb(111, 15%, 69%)
CMYK
cmyk(13%, 0%, 15%, 31%)
Oklch
oklch(72.9% 0.046 141.0)

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

#66988C

Mineral Blue · CadetBlue · Mint Ice

HEX
#66988C
RGB
rgb(102, 152, 140)
HSL
hsl(166, 20%, 50%)
HSB
hsb(166, 33%, 60%)
CMYK
cmyk(33%, 0%, 8%, 40%)
Oklch
oklch(64.1% 0.057 177.7)

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

#507C88

Slate Blue · SlateGray · Mint Ice

HEX
#507C88
RGB
rgb(80, 124, 136)
HSL
hsl(193, 26%, 42%)
HSB
hsb(193, 41%, 53%)
CMYK
cmyk(41%, 9%, 0%, 47%)
Oklch
oklch(55.9% 0.052 216.9)

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

#505769

Indigo · DimGray · Prussian Blue

HEX
#505769
RGB
rgb(80, 87, 105)
HSL
hsl(223, 14%, 36%)
HSB
hsb(223, 24%, 41%)
CMYK
cmyk(24%, 17%, 0%, 59%)
Oklch
oklch(45.7% 0.031 268.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAB9AE
AFB0BB

Analogous

BBB4AF
BAB9AE
B6BBAF

Triadic

BAB9AE
AFBBBA
BAAFBB

Split-Comp.

BAB9AE
AFB6BB
B4AFBB

Tetradic

BAB9AE
AFBBB4
AFB0BB
BBAFB6

Contrast Matrix WCAG 2.1 Contrast

BAB9AE
98AF94
66988C
507C88
505769
—
1.2
Fail
1.7
Fail
2.3
Fail
3.7
AA Large
1.2
Fail
—
1.4
Fail
1.9
Fail
3.1
AA Large
1.7
Fail
1.4
Fail
—
1.4
Fail
2.2
Fail
2.3
Fail
1.9
Fail
1.4
Fail
—
1.6
Fail
3.7
AA Large
3.1
AA Large
2.2
Fail
1.6
Fail
—
White BG
2.0Fail
2.4Fail
3.3AA Large
4.6AA
7.2AAA
Black BG
10.6AAA
8.9AAA
6.4AA
4.6AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABAB1
A2A29B
7C7C8F
636385
535365

Deuteranopia

BABAB1
A19F9C
797590
615D84
535264

Tritanopia

BAB3B3
99A0A1
689192
528382
506160

Achromatopsia

B8B8B8
A5A5A5
888888
707070
575757

Shades & Tints Shades & Tints

#BAB9AE

Dark
Light

#98AF94

Dark
Light

#66988C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bab9ae;
  --color-2: #98af94;
  --color-3: #66988c;
  --color-4: #507c88;
  --color-5: #505769;
}

SCSS

$color-1: #bab9ae;
$color-2: #98af94;
$color-3: #66988c;
$color-4: #507c88;
$color-5: #505769;

TAILWIND

colors: {
  'brand-1': '#bab9ae',
  'brand-2': '#98af94',
  'brand-3': '#66988c',
  'brand-4': '#507c88',
  'brand-5': '#505769',
}

RGB Array

[186, 185, 174], [152, 175, 148], [102, 152, 140], [80, 124, 136], [80, 87, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAB9AE, #98AF94, #66988C, #507C88, #505769 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: #bab9ae; --color-2: #98af94; --color-3: #66988c; --color-4: #507c88; --color-5: #505769. 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