← Back to Editor

#B9D1A9 · #A8A996 · #968182 · #4D4653 · #B15062

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

#B9D1A9

Celadon · Silver · Apple Green

HEX
#B9D1A9
RGB
rgb(185, 209, 169)
HSL
hsl(96, 30%, 74%)
HSB
hsb(96, 19%, 82%)
CMYK
cmyk(11%, 0%, 19%, 18%)
Oklch
oklch(83.2% 0.060 132.9)

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

#A8A996

Fresh Green · DarkGray · Sunflower

HEX
#A8A996
RGB
rgb(168, 169, 150)
HSL
hsl(63, 10%, 63%)
HSB
hsb(63, 11%, 66%)
CMYK
cmyk(1%, 0%, 11%, 34%)
Oklch
oklch(72.9% 0.027 109.5)

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

#968182

Crimson · Gray · Warm Gray

HEX
#968182
RGB
rgb(150, 129, 130)
HSL
hsl(357, 9%, 55%)
HSB
hsb(357, 14%, 59%)
CMYK
cmyk(0%, 14%, 13%, 41%)
Oklch
oklch(62.3% 0.026 14.6)

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

#4D4653

Dark Plum · DarkSlateGray · Charcoal

HEX
#4D4653
RGB
rgb(77, 70, 83)
HSL
hsl(272, 8%, 30%)
HSB
hsb(272, 16%, 33%)
CMYK
cmyk(7%, 16%, 0%, 67%)
Oklch
oklch(40.6% 0.023 309.4)

Traditional「Dark Plum」· Paint「Charcoal」· Creative Midnight Shadow

#B15062

Crimson · Sienna · Passion Red

HEX
#B15062
RGB
rgb(177, 80, 98)
HSL
hsl(349, 38%, 50%)
HSB
hsb(349, 55%, 69%)
CMYK
cmyk(0%, 55%, 45%, 31%)
Oklch
oklch(55.9% 0.127 10.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9D1A9
C1A9D1

Analogous

CDD1A9
B9D1A9
A9D1AD

Triadic

B9D1A9
A9B9D1
D1A9B9

Split-Comp.

B9D1A9
ADA9D1
D1A9CD

Tetradic

B9D1A9
A9CDD1
C1A9D1
D1ADA9

Contrast Matrix WCAG 2.1 Contrast

B9D1A9
A8A996
968182
4D4653
B15062
—
1.5
Fail
2.2
Fail
5.5
AA
3.0
AA Large
1.5
Fail
—
1.5
Fail
3.8
AA Large
2.1
Fail
2.2
Fail
1.5
Fail
—
2.5
Fail
1.4
Fail
5.5
AA
3.8
AA Large
2.5
Fail
—
1.8
Fail
3.0
AA Large
2.1
Fail
1.4
Fail
1.8
Fail
—
White BG
1.6Fail
2.4Fail
3.6AA Large
9.1AAA
5.0AA
Black BG
12.8AAA
8.8AAA
5.8AA
2.3Fail
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C4B3
A8A89B
8D8D82
4A4A50
87865E

Deuteranopia

C2C0B5
A8A89C
8E9082
4A4B4F
8D945D

Tritanopia

BABABC
A89E9F
958282
4D4D4D
AC5A59

Achromatopsia

C5C5C5
A7A7A7
878787
4A4A4A
6F6F6F

Shades & Tints Shades & Tints

#B9D1A9

Dark
Light

#A8A996

Dark
Light

#968182

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9d1a9;
  --color-2: #a8a996;
  --color-3: #968182;
  --color-4: #4d4653;
  --color-5: #b15062;
}

SCSS

$color-1: #b9d1a9;
$color-2: #a8a996;
$color-3: #968182;
$color-4: #4d4653;
$color-5: #b15062;

TAILWIND

colors: {
  'brand-1': '#b9d1a9',
  'brand-2': '#a8a996',
  'brand-3': '#968182',
  'brand-4': '#4d4653',
  'brand-5': '#b15062',
}

RGB Array

[185, 209, 169], [168, 169, 150], [150, 129, 130], [77, 70, 83], [177, 80, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9D1A9, #A8A996, #968182, #4D4653, #B15062 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: #b9d1a9; --color-2: #a8a996; --color-3: #968182; --color-4: #4d4653; --color-5: #b15062. 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