← Back to Editor

#576C7F · #5A8389 · #BBA887 · #DDB790 · #9C8B7B

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

#576C7F

Slate Blue · DimGray · Navy Blue

HEX
#576C7F
RGB
rgb(87, 108, 127)
HSL
hsl(209, 19%, 42%)
HSB
hsb(209, 31%, 50%)
CMYK
cmyk(31%, 15%, 0%, 50%)
Oklch
oklch(52.1% 0.039 246.0)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#5A8389

Slate Blue · SlateGray · Mint Ice

HEX
#5A8389
RGB
rgb(90, 131, 137)
HSL
hsl(188, 21%, 45%)
HSB
hsb(188, 34%, 54%)
CMYK
cmyk(34%, 4%, 0%, 46%)
Oklch
oklch(58.2% 0.046 207.4)

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

#BBA887

Ginger · Tan · Warm Sun

HEX
#BBA887
RGB
rgb(187, 168, 135)
HSL
hsl(38, 28%, 63%)
HSB
hsb(38, 28%, 73%)
CMYK
cmyk(0%, 10%, 28%, 27%)
Oklch
oklch(73.9% 0.050 81.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#DDB790

Goose Yellow · BurlyWood · Warm Sun

HEX
#DDB790
RGB
rgb(221, 183, 144)
HSL
hsl(30, 53%, 72%)
HSB
hsb(30, 35%, 87%)
CMYK
cmyk(0%, 17%, 35%, 13%)
Oklch
oklch(80.3% 0.068 67.3)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#9C8B7B

Tangerine · Gray · Warm Sun

HEX
#9C8B7B
RGB
rgb(156, 139, 123)
HSL
hsl(29, 14%, 55%)
HSB
hsb(29, 21%, 61%)
CMYK
cmyk(0%, 11%, 21%, 39%)
Oklch
oklch(64.7% 0.031 65.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

576C7F
7F6A57

Analogous

577F7F
576C7F
57577F

Triadic

576C7F
7F576C
6C7F57

Split-Comp.

576C7F
7F5757
7F7F57

Tetradic

576C7F
7F577F
7F6A57
577F57

Contrast Matrix WCAG 2.1 Contrast

576C7F
5A8389
BBA887
DDB790
9C8B7B
—
1.3
Fail
2.4
Fail
2.9
Fail
1.7
Fail
1.3
Fail
—
1.8
Fail
2.2
Fail
1.3
Fail
2.4
Fail
1.8
Fail
—
1.2
Fail
1.4
Fail
2.9
Fail
2.2
Fail
1.2
Fail
—
1.8
Fail
1.7
Fail
1.3
Fail
1.4
Fail
1.8
Fail
—
White BG
5.4AA
4.2AA Large
2.3Fail
1.9Fail
3.3AA Large
Black BG
3.9AA Large
5.0AA
9.1AAA
11.3AAA
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

60607A
6C6C88
B3B38F
CDCC99
95947F

Deuteranopia

5F5D79
696687
B4B591
CFD29C
969780

Tritanopia

587776
5C8686
BA9597
DBA1A3
9B8283

Achromatopsia

686868
777777
AAAAAA
BEBEBE
8E8E8E

Shades & Tints Shades & Tints

#576C7F

Dark
Light

#5A8389

Dark
Light

#BBA887

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #576c7f;
  --color-2: #5a8389;
  --color-3: #bba887;
  --color-4: #ddb790;
  --color-5: #9c8b7b;
}

SCSS

$color-1: #576c7f;
$color-2: #5a8389;
$color-3: #bba887;
$color-4: #ddb790;
$color-5: #9c8b7b;

TAILWIND

colors: {
  'brand-1': '#576c7f',
  'brand-2': '#5a8389',
  'brand-3': '#bba887',
  'brand-4': '#ddb790',
  'brand-5': '#9c8b7b',
}

RGB Array

[87, 108, 127], [90, 131, 137], [187, 168, 135], [221, 183, 144], [156, 139, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #576C7F, #5A8389, #BBA887, #DDB790, #9C8B7B 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: #576c7f; --color-2: #5a8389; --color-3: #bba887; --color-4: #ddb790; --color-5: #9c8b7b. 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