← Back to Editor

#543D2D · #837D7D · #A5A8AD · #BDB5A4 · #DBD8CB

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

Color Details Color Details

#543D2D

Tangerine · DarkOliveGreen · Cinnamon

HEX
#543D2D
RGB
rgb(84, 61, 45)
HSL
hsl(25, 30%, 25%)
HSB
hsb(25, 46%, 33%)
CMYK
cmyk(0%, 27%, 46%, 67%)
Oklch
oklch(38.1% 0.041 55.9)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#837D7D

Ink Gray · Gray · Warm Gray

HEX
#837D7D
RGB
rgb(131, 125, 125)
HSL
hsl(0, 2%, 50%)
HSB
hsb(0, 5%, 51%)
CMYK
cmyk(0%, 5%, 5%, 49%)
Oklch
oklch(59.5% 0.007 17.4)

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

#A5A8AD

Ash · DarkGray · Silver Sand

HEX
#A5A8AD
RGB
rgb(165, 168, 173)
HSL
hsl(218, 5%, 66%)
HSB
hsb(218, 5%, 68%)
CMYK
cmyk(5%, 3%, 0%, 32%)
Oklch
oklch(73.1% 0.008 260.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#BDB5A4

Ginger · DarkGray · Sunflower

HEX
#BDB5A4
RGB
rgb(189, 181, 164)
HSL
hsl(41, 16%, 69%)
HSB
hsb(41, 13%, 74%)
CMYK
cmyk(0%, 4%, 13%, 26%)
Oklch
oklch(77.5% 0.025 85.8)

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

#DBD8CB

Goose Yellow · LightGray · Lemon Cream

HEX
#DBD8CB
RGB
rgb(219, 216, 203)
HSL
hsl(49, 18%, 83%)
HSB
hsb(49, 7%, 86%)
CMYK
cmyk(0%, 1%, 7%, 14%)
Oklch
oklch(88.1% 0.018 96.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

543D2D
2D4353

Analogous

532D30
543D2D
53502D

Triadic

543D2D
2D533D
3D2D53

Split-Comp.

543D2D
2D5350
2D3053

Tetradic

543D2D
30532D
2D4353
502D53

Contrast Matrix WCAG 2.1 Contrast

543D2D
837D7D
A5A8AD
BDB5A4
DBD8CB
—
2.5
Fail
4.2
AA Large
5.0
AA
7.1
AAA
2.5
Fail
—
1.7
Fail
2.0
Fail
2.8
Fail
4.2
AA Large
1.7
Fail
—
1.2
Fail
1.7
Fail
5.0
AA
2.0
Fail
1.2
Fail
—
1.4
Fail
7.1
AAA
2.8
Fail
1.7
Fail
1.4
Fail
—
White BG
10.1AAA
4.0AA Large
2.4Fail
2.0Fail
1.4Fail
Black BG
2.1Fail
5.2AA
8.8AAA
10.3AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A31
80807D
A6A6AC
BAB9A8
DADACE

Deuteranopia

4B4D32
81817D
A6A6AC
BABBA9
DADACF

Tritanopia

533435
837D7D
A5ABAB
BDABAC
DBD1D1

Achromatopsia

424242
7F7F7F
A8A8A8
B5B5B5
D7D7D7

Shades & Tints Shades & Tints

#543D2D

Dark
Light

#837D7D

Dark
Light

#A5A8AD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #543d2d;
  --color-2: #837d7d;
  --color-3: #a5a8ad;
  --color-4: #bdb5a4;
  --color-5: #dbd8cb;
}

SCSS

$color-1: #543d2d;
$color-2: #837d7d;
$color-3: #a5a8ad;
$color-4: #bdb5a4;
$color-5: #dbd8cb;

TAILWIND

colors: {
  'brand-1': '#543d2d',
  'brand-2': '#837d7d',
  'brand-3': '#a5a8ad',
  'brand-4': '#bdb5a4',
  'brand-5': '#dbd8cb',
}

RGB Array

[84, 61, 45], [131, 125, 125], [165, 168, 173], [189, 181, 164], [219, 216, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #543D2D, #837D7D, #A5A8AD, #BDB5A4, #DBD8CB 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: #543d2d; --color-2: #837d7d; --color-3: #a5a8ad; --color-4: #bdb5a4; --color-5: #dbd8cb. 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