← Back to Editor

#5E5B73 · #737479 · #878C7F · #A3A08A · #BFB394

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 Library

Color Details Color Details

#5E5B73

Deep Indigo · DimGray · Prussian Blue

HEX
#5E5B73
RGB
rgb(94, 91, 115)
HSL
hsl(248, 12%, 40%)
HSB
hsb(248, 21%, 45%)
CMYK
cmyk(18%, 21%, 0%, 55%)
Oklch
oklch(48.3% 0.038 290.6)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#737479

Ink Gray · Gray · Warm Gray

HEX
#737479
RGB
rgb(115, 116, 121)
HSL
hsl(230, 3%, 46%)
HSB
hsb(230, 5%, 47%)
CMYK
cmyk(5%, 4%, 0%, 53%)
Oklch
oklch(56.0% 0.008 277.1)

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

#878C7F

Ash · Gray · Warm Gray

HEX
#878C7F
RGB
rgb(135, 140, 127)
HSL
hsl(83, 5%, 52%)
HSB
hsb(83, 9%, 55%)
CMYK
cmyk(4%, 0%, 9%, 45%)
Oklch
oklch(63.2% 0.020 124.2)

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

#A3A08A

Autumn Sage · DarkGray · Sunflower

HEX
#A3A08A
RGB
rgb(163, 160, 138)
HSL
hsl(53, 12%, 59%)
HSB
hsb(53, 15%, 64%)
CMYK
cmyk(0%, 2%, 15%, 36%)
Oklch
oklch(70.2% 0.031 100.8)

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

#BFB394

Ginger · Tan · Sunflower

HEX
#BFB394
RGB
rgb(191, 179, 148)
HSL
hsl(43, 25%, 66%)
HSB
hsb(43, 23%, 75%)
CMYK
cmyk(0%, 6%, 23%, 25%)
Oklch
oklch(76.9% 0.045 89.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E5B73
6F725A

Analogous

5A6372
5E5B73
695A72

Triadic

5E5B73
725D5A
5A725D

Split-Comp.

5E5B73
72695A
63725A

Tetradic

5E5B73
725A63
6F725A
5A7269

Contrast Matrix WCAG 2.1 Contrast

5E5B73
737479
878C7F
A3A08A
BFB394
—
1.4
Fail
1.9
Fail
2.5
Fail
3.1
AA Large
1.4
Fail
—
1.4
Fail
1.8
Fail
2.2
Fail
1.9
Fail
1.4
Fail
—
1.3
Fail
1.7
Fail
2.5
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
3.1
AA Large
2.2
Fail
1.7
Fail
1.3
Fail
—
White BG
6.5AA
4.7AA
3.4AA Large
2.6Fail
2.1Fail
Black BG
3.2AA Large
4.5AA
6.1AA
8.0AAA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5D5D6D
737378
898982
A2A28F
BABA9C

Deuteranopia

5D5D6C
737377
898983
A2A291
BBBB9D

Tritanopia

5E6968
737777
878585
A39494
BEA1A3

Achromatopsia

5F5F5F
747474
898989
9E9E9E
B3B3B3

Shades & Tints Shades & Tints

#5E5B73

Dark
Light

#737479

Dark
Light

#878C7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e5b73;
  --color-2: #737479;
  --color-3: #878c7f;
  --color-4: #a3a08a;
  --color-5: #bfb394;
}

SCSS

$color-1: #5e5b73;
$color-2: #737479;
$color-3: #878c7f;
$color-4: #a3a08a;
$color-5: #bfb394;

TAILWIND

colors: {
  'brand-1': '#5e5b73',
  'brand-2': '#737479',
  'brand-3': '#878c7f',
  'brand-4': '#a3a08a',
  'brand-5': '#bfb394',
}

RGB Array

[94, 91, 115], [115, 116, 121], [135, 140, 127], [163, 160, 138], [191, 179, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5E5B73, #737479, #878C7F, #A3A08A, #BFB394 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: #5e5b73; --color-2: #737479; --color-3: #878c7f; --color-4: #a3a08a; --color-5: #bfb394. 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. 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