← Back to Editor

#9B9D81 · #B9B192 · #C98D77 · #BC4971 · #772558

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

#9B9D81

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9B9D81
RGB
rgb(155, 157, 129)
HSL
hsl(64, 13%, 56%)
HSB
hsb(64, 18%, 62%)
CMYK
cmyk(1%, 0%, 18%, 38%)
Oklch
oklch(68.7% 0.040 110.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#B9B192

Ginger · Tan · Sunflower

HEX
#B9B192
RGB
rgb(185, 177, 146)
HSL
hsl(48, 22%, 65%)
HSB
hsb(48, 21%, 73%)
CMYK
cmyk(0%, 4%, 21%, 27%)
Oklch
oklch(75.9% 0.044 95.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C98D77

Apricot · DarkSalmon · Warm Sun

HEX
#C98D77
RGB
rgb(201, 141, 119)
HSL
hsl(16, 43%, 63%)
HSB
hsb(16, 41%, 79%)
CMYK
cmyk(0%, 30%, 41%, 21%)
Oklch
oklch(69.7% 0.080 41.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#BC4971

Dark Violet · MediumVioletRed · Rose Pink

HEX
#BC4971
RGB
rgb(188, 73, 113)
HSL
hsl(339, 46%, 51%)
HSB
hsb(339, 61%, 74%)
CMYK
cmyk(0%, 61%, 40%, 26%)
Oklch
oklch(57.0% 0.152 1.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#772558

Rose Purple · Purple · Camellia

HEX
#772558
RGB
rgb(119, 37, 88)
HSL
hsl(323, 53%, 31%)
HSB
hsb(323, 69%, 47%)
CMYK
cmyk(0%, 69%, 26%, 53%)
Oklch
oklch(40.7% 0.128 346.0)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B9D81
82809D

Analogous

9D9180
9B9D81
8D9D80

Triadic

9B9D81
809B9D
9D809B

Split-Comp.

9B9D81
808D9D
91809D

Tetradic

9B9D81
809D91
82809D
9D808D

Contrast Matrix WCAG 2.1 Contrast

9B9D81
B9B192
C98D77
BC4971
772558
—
1.3
Fail
1.0
Fail
1.7
Fail
3.4
AA Large
1.3
Fail
—
1.3
Fail
2.3
Fail
4.5
AA Large
1.0
Fail
1.3
Fail
—
1.7
Fail
3.5
AA Large
1.7
Fail
2.3
Fail
1.7
Fail
—
2.0
Fail
3.4
AA Large
4.5
AA Large
3.5
AA Large
2.0
Fail
—
White BG
2.8Fail
2.2Fail
2.8Fail
4.9AA
9.6AAA
Black BG
7.5AAA
9.8AAA
7.6AAA
4.3AA Large
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9C88
B6B59A
AFAE7C
8A8967
53534C

Deuteranopia

9C9C89
B6B79B
B3B77E
919A65
585E49

Tritanopia

9B8D8E
B99FA1
C68181
B6605E
734240

Achromatopsia

999999
B0B0B0
9C9C9C
707070
434343

Shades & Tints Shades & Tints

#9B9D81

Dark
Light

#B9B192

Dark
Light

#C98D77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b9d81;
  --color-2: #b9b192;
  --color-3: #c98d77;
  --color-4: #bc4971;
  --color-5: #772558;
}

SCSS

$color-1: #9b9d81;
$color-2: #b9b192;
$color-3: #c98d77;
$color-4: #bc4971;
$color-5: #772558;

TAILWIND

colors: {
  'brand-1': '#9b9d81',
  'brand-2': '#b9b192',
  'brand-3': '#c98d77',
  'brand-4': '#bc4971',
  'brand-5': '#772558',
}

RGB Array

[155, 157, 129], [185, 177, 146], [201, 141, 119], [188, 73, 113], [119, 37, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B9D81, #B9B192, #C98D77, #BC4971, #772558 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9b9d81; --color-2: #b9b192; --color-3: #c98d77; --color-4: #bc4971; --color-5: #772558. 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. 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