← Back to Editor

#61595E · #BAB8A8 · #AABAA8 · #B9A7B2 · #D1BAC8

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 LibraryData Visualization

Color Details Color Details

#61595E

Ink Gray · DimGray · Charcoal

HEX
#61595E
RGB
rgb(97, 89, 94)
HSL
hsl(322, 4%, 36%)
HSB
hsb(322, 8%, 38%)
CMYK
cmyk(0%, 8%, 3%, 62%)
Oklch
oklch(47.3% 0.013 339.7)

TraditionalInk Gray」· PaintCharcoal」· Creative Midnight Shadow

#BAB8A8

Fresh Green · DarkGray · Sunflower

HEX
#BAB8A8
RGB
rgb(186, 184, 168)
HSL
hsl(53, 12%, 69%)
HSB
hsb(53, 10%, 73%)
CMYK
cmyk(0%, 1%, 10%, 27%)
Oklch
oklch(78.0% 0.022 101.1)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#AABAA8

Celadon · DarkGray · Apple Green

HEX
#AABAA8
RGB
rgb(170, 186, 168)
HSL
hsl(113, 12%, 69%)
HSB
hsb(113, 10%, 73%)
CMYK
cmyk(9%, 0%, 10%, 27%)
Oklch
oklch(77.1% 0.031 142.1)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

#B9A7B2

Mauve · DarkGray · Rose Pink

HEX
#B9A7B2
RGB
rgb(185, 167, 178)
HSL
hsl(323, 11%, 69%)
HSB
hsb(323, 10%, 73%)
CMYK
cmyk(0%, 10%, 4%, 27%)
Oklch
oklch(74.7% 0.026 340.5)

TraditionalMauve」· PaintRose Pink」· Creative Rose Petal

#D1BAC8

Mauve · Silver · Cherry Blossom

HEX
#D1BAC8
RGB
rgb(209, 186, 200)
HSL
hsl(323, 20%, 77%)
HSB
hsb(323, 11%, 82%)
CMYK
cmyk(0%, 11%, 4%, 18%)
Oklch
oklch(81.2% 0.032 340.7)

TraditionalMauve」· PaintCherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

61595E
585F5B

Analogous

5E585F
61595E
5F5859

Triadic

61595E
5D5F58
585D5F

Split-Comp.

61595E
595F58
585F5E

Tetradic

61595E
5F5E58
585F5B
58595F

Contrast Matrix WCAG 2.1 Contrast

61595E
BAB8A8
AABAA8
B9A7B2
D1BAC8
3.4
AA Large
3.3
AA Large
3.0
Fail
3.7
AA Large
3.4
AA Large
1.0
Fail
1.1
Fail
1.1
Fail
3.3
AA Large
1.0
Fail
1.1
Fail
1.1
Fail
3.0
Fail
1.1
Fail
1.1
Fail
1.3
Fail
3.7
AA Large
1.1
Fail
1.1
Fail
1.3
Fail
White BG
6.8AA
2.0Fail
2.0Fail
2.3Fail
1.8Fail
Black BG
3.1AA Large
10.5AAA
10.3AAA
9.2AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5D5D
B9B9AC
B1B1AC
B1B1AF
C7C7C5

Deuteranopia

5E5F5D
B9B9AD
B0AFAD
B2B4AF
C8CAC4

Tritanopia

615C5C
BAAFB0
ABB0B1
B8ADAD
D0C2C1

Achromatopsia

5C5C5C
B7B7B7
B3B3B3
AEAEAE
C2C2C2

Shades & Tints Shades & Tints

#61595E

Dark
Light

#BAB8A8

Dark
Light

#AABAA8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #61595e;
  --color-2: #bab8a8;
  --color-3: #aabaa8;
  --color-4: #b9a7b2;
  --color-5: #d1bac8;
}

SCSS

$color-1: #61595e;
$color-2: #bab8a8;
$color-3: #aabaa8;
$color-4: #b9a7b2;
$color-5: #d1bac8;

TAILWIND

colors: {
  'brand-1': '#61595e',
  'brand-2': '#bab8a8',
  'brand-3': '#aabaa8',
  'brand-4': '#b9a7b2',
  'brand-5': '#d1bac8',
}

RGB Array

[97, 89, 94], [186, 184, 168], [170, 186, 168], [185, 167, 178], [209, 186, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #61595E, #BAB8A8, #AABAA8, #B9A7B2, #D1BAC8 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: #61595e; --color-2: #bab8a8; --color-3: #aabaa8; --color-4: #b9a7b2; --color-5: #d1bac8. 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