← Back to Editor

#4A5954 · #5A6555 · #686C55 · #937B55 · #BB8556

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

#4A5954

Mineral Blue · DarkSlateGray · Charcoal

HEX
#4A5954
RGB
rgb(74, 89, 84)
HSL
hsl(160, 9%, 32%)
HSB
hsb(160, 17%, 35%)
CMYK
cmyk(17%, 0%, 6%, 65%)
Oklch
oklch(45.0% 0.020 173.2)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

#5A6555

Celadon · DimGray · Charcoal

HEX
#5A6555
RGB
rgb(90, 101, 85)
HSL
hsl(101, 9%, 36%)
HSB
hsb(101, 16%, 40%)
CMYK
cmyk(11%, 0%, 16%, 60%)
Oklch
oklch(49.2% 0.028 135.8)

Traditional「Celadon」· Paint「Charcoal」· Creative Midnight Shadow

#686C55

Grass Green · DimGray · Forest Green

HEX
#686C55
RGB
rgb(104, 108, 85)
HSL
hsl(70, 12%, 38%)
HSB
hsb(70, 21%, 42%)
CMYK
cmyk(4%, 0%, 21%, 58%)
Oklch
oklch(52.1% 0.035 115.6)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#937B55

Ochre · Gray · Amber Brown

HEX
#937B55
RGB
rgb(147, 123, 85)
HSL
hsl(37, 27%, 45%)
HSB
hsb(37, 42%, 58%)
CMYK
cmyk(0%, 16%, 42%, 42%)
Oklch
oklch(59.6% 0.061 78.6)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#BB8556

Tangerine · DarkSalmon · Warm Sun

HEX
#BB8556
RGB
rgb(187, 133, 86)
HSL
hsl(28, 43%, 54%)
HSB
hsb(28, 54%, 73%)
CMYK
cmyk(0%, 29%, 54%, 27%)
Oklch
oklch(66.0% 0.092 61.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A5954
594A4F

Analogous

4A594D
4A5954
4A5659

Triadic

4A5954
544A59
59544A

Split-Comp.

4A5954
594A56
594D4A

Tetradic

4A5954
4D4A59
594A4F
56594A

Contrast Matrix WCAG 2.1 Contrast

4A5954
5A6555
686C55
937B55
BB8556
—
1.2
Fail
1.4
Fail
1.8
Fail
2.3
Fail
1.2
Fail
—
1.1
Fail
1.5
Fail
1.9
Fail
1.4
Fail
1.1
Fail
—
1.3
Fail
1.7
Fail
1.8
Fail
1.5
Fail
1.3
Fail
—
1.3
Fail
2.3
Fail
1.9
Fail
1.7
Fail
1.3
Fail
—
White BG
7.4AAA
6.1AA
5.4AA
4.0AA Large
3.2AA Large
Black BG
2.8Fail
3.4AA Large
3.9AA Large
5.2AA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

505155
5F5F59
6A6A5B
89885E
A4A361

Deuteranopia

504F56
5E5D5A
6A695C
8A8C60
A7AB64

Tritanopia

4B5656
5B5C5D
685F60
926567
B86A6C

Achromatopsia

545454
606060
686868
7E7E7E
909090

Shades & Tints Shades & Tints

#4A5954

Dark
Light

#5A6555

Dark
Light

#686C55

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a5954;
  --color-2: #5a6555;
  --color-3: #686c55;
  --color-4: #937b55;
  --color-5: #bb8556;
}

SCSS

$color-1: #4a5954;
$color-2: #5a6555;
$color-3: #686c55;
$color-4: #937b55;
$color-5: #bb8556;

TAILWIND

colors: {
  'brand-1': '#4a5954',
  'brand-2': '#5a6555',
  'brand-3': '#686c55',
  'brand-4': '#937b55',
  'brand-5': '#bb8556',
}

RGB Array

[74, 89, 84], [90, 101, 85], [104, 108, 85], [147, 123, 85], [187, 133, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4A5954, #5A6555, #686C55, #937B55, #BB8556 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: #4a5954; --color-2: #5a6555; --color-3: #686c55; --color-4: #937b55; --color-5: #bb8556. 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