← Back to Editor

#535547 · #998F76 · #2B1C21 · #E6D9B6 · #5B7F7F

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

#535547

Autumn Sage · DarkOliveGreen · Charcoal

HEX
#535547
RGB
rgb(83, 85, 71)
HSL
hsl(69, 9%, 31%)
HSB
hsb(69, 16%, 33%)
CMYK
cmyk(2%, 0%, 16%, 67%)
Oklch
oklch(44.3% 0.022 113.9)

Traditional「Autumn Sage」· Paint「Charcoal」· Creative Midnight Shadow

#998F76

Ginger · Gray · Sunflower

HEX
#998F76
RGB
rgb(153, 143, 118)
HSL
hsl(43, 15%, 53%)
HSB
hsb(43, 23%, 60%)
CMYK
cmyk(0%, 7%, 23%, 40%)
Oklch
oklch(65.2% 0.038 88.8)

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

#2B1C21

Dark Violet · Black · Raspberry

HEX
#2B1C21
RGB
rgb(43, 28, 33)
HSL
hsl(340, 21%, 14%)
HSB
hsb(340, 35%, 17%)
CMYK
cmyk(0%, 35%, 23%, 83%)
Oklch
oklch(24.7% 0.025 357.4)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#E6D9B6

Goose Yellow · Wheat · Lemon Cream

HEX
#E6D9B6
RGB
rgb(230, 217, 182)
HSL
hsl(44, 49%, 81%)
HSB
hsb(44, 21%, 90%)
CMYK
cmyk(0%, 6%, 21%, 10%)
Oklch
oklch(88.7% 0.048 90.1)

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

#5B7F7F

Slate Blue · SlateGray · Mint Ice

HEX
#5B7F7F
RGB
rgb(91, 127, 127)
HSL
hsl(180, 17%, 43%)
HSB
hsb(180, 28%, 50%)
CMYK
cmyk(28%, 0%, 0%, 50%)
Oklch
oklch(56.9% 0.041 196.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

535547
4A4856

Analogous

565148
535547
4D5648

Triadic

535547
485456
564854

Split-Comp.

535547
484D56
514856

Tetradic

535547
485651
4A4856
56484D

Contrast Matrix WCAG 2.1 Contrast

535547
998F76
2B1C21
E6D9B6
5B7F7F
—
2.4
Fail
2.1
Fail
5.4
AA
1.7
Fail
2.4
Fail
—
5.1
AA
2.3
Fail
1.4
Fail
2.1
Fail
5.1
AA
—
11.6
AAA
3.7
AA Large
5.4
AA
2.3
Fail
11.6
AAA
—
3.1
AA Large
1.7
Fail
1.4
Fail
3.7
AA Large
3.1
AA Large
—
White BG
7.6AAA
3.2AA Large
16.3AAA
1.4Fail
4.4AA Large
Black BG
2.8Fail
6.5AA
1.3Fail
15.0AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

54544A
95957C
252420
E0E0BE
6B6B7F

Deuteranopia

54544B
95967E
252720
E1E2C1
69667F

Tritanopia

534D4E
998182
2A1F1F
E5C5C7
5D7F7F

Achromatopsia

535353
8F8F8F
212121
D9D9D9
747474

Shades & Tints Shades & Tints

#535547

Dark
Light

#998F76

Dark
Light

#2B1C21

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #535547;
  --color-2: #998f76;
  --color-3: #2b1c21;
  --color-4: #e6d9b6;
  --color-5: #5b7f7f;
}

SCSS

$color-1: #535547;
$color-2: #998f76;
$color-3: #2b1c21;
$color-4: #e6d9b6;
$color-5: #5b7f7f;

TAILWIND

colors: {
  'brand-1': '#535547',
  'brand-2': '#998f76',
  'brand-3': '#2b1c21',
  'brand-4': '#e6d9b6',
  'brand-5': '#5b7f7f',
}

RGB Array

[83, 85, 71], [153, 143, 118], [43, 28, 33], [230, 217, 182], [91, 127, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #535547, #998F76, #2B1C21, #E6D9B6, #5B7F7F 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: #535547; --color-2: #998f76; --color-3: #2b1c21; --color-4: #e6d9b6; --color-5: #5b7f7f. 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