← Back to Editor

#577BAD · #353956 · #323035 · #6D5A6D · #B3995C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#577BAD

Azure · SteelBlue · Navy Blue

HEX
#577BAD
RGB
rgb(87, 123, 173)
HSL
hsl(215, 34%, 51%)
HSB
hsb(215, 50%, 68%)
CMYK
cmyk(50%, 29%, 0%, 32%)
Oklch
oklch(57.7% 0.088 256.7)

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

#353956

Indigo · DarkSlateGray · Prussian Blue

HEX
#353956
RGB
rgb(53, 57, 86)
HSL
hsl(233, 24%, 27%)
HSB
hsb(233, 38%, 34%)
CMYK
cmyk(38%, 34%, 0%, 66%)
Oklch
oklch(35.4% 0.051 277.5)

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

#323035

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#323035
RGB
rgb(50, 48, 53)
HSL
hsl(264, 5%, 20%)
HSB
hsb(264, 9%, 21%)
CMYK
cmyk(6%, 9%, 0%, 79%)
Oklch
oklch(31.3% 0.009 303.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#6D5A6D

Rose Purple · DimGray · Eggplant

HEX
#6D5A6D
RGB
rgb(109, 90, 109)
HSL
hsl(300, 10%, 39%)
HSB
hsb(300, 17%, 43%)
CMYK
cmyk(0%, 17%, 0%, 57%)
Oklch
oklch(49.3% 0.038 326.1)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#B3995C

Ginger · DarkSalmon · Sunflower

HEX
#B3995C
RGB
rgb(179, 153, 92)
HSL
hsl(42, 36%, 53%)
HSB
hsb(42, 49%, 70%)
CMYK
cmyk(0%, 15%, 49%, 30%)
Oklch
oklch(69.3% 0.086 87.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

577BAD
AD8958

Analogous

58A5AD
577BAD
5F58AD

Triadic

577BAD
AD587B
7BAD58

Split-Comp.

577BAD
AD5F58
A5AD58

Tetradic

577BAD
AD58A5
AD8958
58AD5F

Contrast Matrix WCAG 2.1 Contrast

577BAD
353956
323035
6D5A6D
B3995C
—
2.6
Fail
3.0
AA Large
1.5
Fail
1.6
Fail
2.6
Fail
—
1.2
Fail
1.8
Fail
4.1
AA Large
3.0
AA Large
1.2
Fail
—
2.1
Fail
4.7
AA
1.5
Fail
1.8
Fail
2.1
Fail
—
2.3
Fail
1.6
Fail
4.1
AA Large
4.7
AA
2.3
Fail
—
White BG
4.3AA Large
11.2AAA
13.0AAA
6.3AA
2.8Fail
Black BG
4.8AA
1.9Fail
1.6Fail
3.3AA Large
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6767A1
37374F
313134
656568
A8A86B

Deuteranopia

65629E
37364D
313133
666767
A9AB6E

Tritanopia

599795
354948
323333
6C6564
B27679

Achromatopsia

767676
3B3B3B
313131
626262
9A9A9A

Shades & Tints Shades & Tints

#577BAD

Dark
Light

#353956

Dark
Light

#323035

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #577bad;
  --color-2: #353956;
  --color-3: #323035;
  --color-4: #6d5a6d;
  --color-5: #b3995c;
}

SCSS

$color-1: #577bad;
$color-2: #353956;
$color-3: #323035;
$color-4: #6d5a6d;
$color-5: #b3995c;

TAILWIND

colors: {
  'brand-1': '#577bad',
  'brand-2': '#353956',
  'brand-3': '#323035',
  'brand-4': '#6d5a6d',
  'brand-5': '#b3995c',
}

RGB Array

[87, 123, 173], [53, 57, 86], [50, 48, 53], [109, 90, 109], [179, 153, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #577BAD, #353956, #323035, #6D5A6D, #B3995C is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. 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: #577bad; --color-2: #353956; --color-3: #323035; --color-4: #6d5a6d; --color-5: #b3995c. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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