← Back to Editor

#D8A97B · #BC9E78 · #9F9275 · #828571 · #65796D

muted

A 5-color muted 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

#D8A97B

Ginger · BurlyWood · Warm Sun

HEX
#D8A97B
RGB
rgb(216, 169, 123)
HSL
hsl(30, 54%, 66%)
HSB
hsb(30, 43%, 85%)
CMYK
cmyk(0%, 22%, 43%, 15%)
Oklch
oklch(76.7% 0.082 65.5)

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

#BC9E78

Ginger · Tan · Warm Sun

HEX
#BC9E78
RGB
rgb(188, 158, 120)
HSL
hsl(34, 34%, 60%)
HSB
hsb(34, 36%, 74%)
CMYK
cmyk(0%, 16%, 36%, 26%)
Oklch
oklch(71.7% 0.063 73.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#9F9275

Ginger · Gray · Sunflower

HEX
#9F9275
RGB
rgb(159, 146, 117)
HSL
hsl(41, 18%, 54%)
HSB
hsb(41, 26%, 62%)
CMYK
cmyk(0%, 8%, 26%, 38%)
Oklch
oklch(66.4% 0.044 86.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#828571

Autumn Sage · Gray · Warm Gray

HEX
#828571
RGB
rgb(130, 133, 113)
HSL
hsl(69, 8%, 48%)
HSB
hsb(69, 15%, 52%)
CMYK
cmyk(2%, 0%, 15%, 48%)
Oklch
oklch(60.8% 0.030 114.2)

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

#65796D

Celadon · DimGray · Warm Gray

HEX
#65796D
RGB
rgb(101, 121, 109)
HSL
hsl(144, 9%, 44%)
HSB
hsb(144, 17%, 47%)
CMYK
cmyk(17%, 0%, 10%, 53%)
Oklch
oklch(55.6% 0.030 158.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8A97B
79A8D7

Analogous

D77979
D8A97B
D7D779

Triadic

D8A97B
79D7A8
A879D7

Split-Comp.

D8A97B
79D7D7
7979D7

Tetradic

D8A97B
79D779
79A8D7
D779D7

Contrast Matrix WCAG 2.1 Contrast

D8A97B
BC9E78
9F9275
828571
65796D
—
1.2
Fail
1.4
Fail
1.8
Fail
2.2
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.2
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
White BG
2.1Fail
2.5Fail
3.1AA Large
3.8AA Large
4.7AA
Black BG
9.9AAA
8.3AAA
6.8AA
5.5AA
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C386
AFAF81
99997C
838376
6E6E70

Deuteranopia

C6CA89
B1B383
9A9B7E
838377
6D6B71

Tritanopia

D68F91
BB888A
9E8283
827A7B
667273

Achromatopsia

B2B2B2
A3A3A3
939393
828282
727272

Shades & Tints Shades & Tints

#D8A97B

Dark
Light

#BC9E78

Dark
Light

#9F9275

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8a97b;
  --color-2: #bc9e78;
  --color-3: #9f9275;
  --color-4: #828571;
  --color-5: #65796d;
}

SCSS

$color-1: #d8a97b;
$color-2: #bc9e78;
$color-3: #9f9275;
$color-4: #828571;
$color-5: #65796d;

TAILWIND

colors: {
  'brand-1': '#d8a97b',
  'brand-2': '#bc9e78',
  'brand-3': '#9f9275',
  'brand-4': '#828571',
  'brand-5': '#65796d',
}

RGB Array

[216, 169, 123], [188, 158, 120], [159, 146, 117], [130, 133, 113], [101, 121, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #D8A97B, #BC9E78, #9F9275, #828571, #65796D 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: #d8a97b; --color-2: #bc9e78; --color-3: #9f9275; --color-4: #828571; --color-5: #65796d. 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 muted-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