← Back to Editor

#524A4D · #963957 · #389C97 · #9CAD86 · #B8B389

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

#524A4D

Ink Gray · DarkSlateGray · Charcoal

HEX
#524A4D
RGB
rgb(82, 74, 77)
HSL
hsl(338, 5%, 31%)
HSB
hsb(338, 10%, 32%)
CMYK
cmyk(0%, 10%, 6%, 68%)
Oklch
oklch(41.8% 0.012 352.9)

TraditionalInk Gray」· PaintCharcoal」· Creative Midnight Shadow

#963957

Dark Violet · Brown · Camellia

HEX
#963957
RGB
rgb(150, 57, 87)
HSL
hsl(341, 45%, 41%)
HSB
hsb(341, 62%, 59%)
CMYK
cmyk(0%, 62%, 42%, 41%)
Oklch
oklch(48.2% 0.128 3.1)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

#389C97

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#389C97
RGB
rgb(56, 156, 151)
HSL
hsl(177, 47%, 42%)
HSB
hsb(177, 64%, 61%)
CMYK
cmyk(64%, 0%, 3%, 39%)
Oklch
oklch(63.4% 0.091 190.4)

TraditionalMineral Blue」· PaintMint Ice」· Creative Blush Sunrise

#9CAD86

Grass Green · DarkSeaGreen · Olive Green

HEX
#9CAD86
RGB
rgb(156, 173, 134)
HSL
hsl(86, 19%, 60%)
HSB
hsb(86, 23%, 68%)
CMYK
cmyk(10%, 0%, 23%, 32%)
Oklch
oklch(72.4% 0.058 126.9)

TraditionalGrass Green」· PaintOlive Green」· Creative Blush Sunrise

#B8B389

Fresh Green · Tan · Sunflower

HEX
#B8B389
RGB
rgb(184, 179, 137)
HSL
hsl(54, 25%, 63%)
HSB
hsb(54, 26%, 72%)
CMYK
cmyk(0%, 3%, 26%, 28%)
Oklch
oklch(76.0% 0.057 102.0)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

524A4D
4B5350

Analogous

534B52
524A4D
534C4B

Triadic

524A4D
4E534B
4B4E53

Split-Comp.

524A4D
4B534C
4B5253

Tetradic

524A4D
52534B
4B5350
4C4B53

Contrast Matrix WCAG 2.1 Contrast

524A4D
963957
389C97
9CAD86
B8B389
1.2
Fail
2.6
Fail
3.6
AA Large
4.0
AA Large
1.2
Fail
2.1
Fail
2.9
Fail
3.3
AA Large
2.6
Fail
2.1
Fail
1.4
Fail
1.5
Fail
3.6
AA Large
2.9
Fail
1.4
Fail
1.1
Fail
4.0
AA Large
3.3
AA Large
1.5
Fail
1.1
Fail
White BG
8.6AAA
7.0AA
3.3AA Large
2.4Fail
2.1Fail
Black BG
2.4Fail
3.0AA Large
6.4AA
8.7AAA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4E4C
6E6D50
636498
A3A48F
B6B693

Deuteranopia

4F504C
737A4E
5E5699
A2A192
B6B696

Tritanopia

524C4C
914A49
3D9999
9D9799
B89B9D

Achromatopsia

4D4D4D
585858
7E7E7E
A3A3A3
B0B0B0

Shades & Tints Shades & Tints

#524A4D

Dark
Light

#963957

Dark
Light

#389C97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #524a4d;
  --color-2: #963957;
  --color-3: #389c97;
  --color-4: #9cad86;
  --color-5: #b8b389;
}

SCSS

$color-1: #524a4d;
$color-2: #963957;
$color-3: #389c97;
$color-4: #9cad86;
$color-5: #b8b389;

TAILWIND

colors: {
  'brand-1': '#524a4d',
  'brand-2': '#963957',
  'brand-3': '#389c97',
  'brand-4': '#9cad86',
  'brand-5': '#b8b389',
}

RGB Array

[82, 74, 77], [150, 57, 87], [56, 156, 151], [156, 173, 134], [184, 179, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #524A4D, #963957, #389C97, #9CAD86, #B8B389 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: #524a4d; --color-2: #963957; --color-3: #389c97; --color-4: #9cad86; --color-5: #b8b389. 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