← Back to Editor

#577E8C · #507055 · #506143 · #663C4B · #692944

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

#577E8C

Slate Blue · SlateGray · Mint Ice

HEX
#577E8C
RGB
rgb(87, 126, 140)
HSL
hsl(196, 23%, 45%)
HSB
hsb(196, 38%, 55%)
CMYK
cmyk(38%, 10%, 0%, 45%)
Oklch
oklch(56.9% 0.049 222.3)

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

#507055

Celadon · DimGray · Forest Green

HEX
#507055
RGB
rgb(80, 112, 85)
HSL
hsl(129, 17%, 38%)
HSB
hsb(129, 29%, 44%)
CMYK
cmyk(29%, 0%, 24%, 56%)
Oklch
oklch(51.2% 0.056 148.9)

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

#506143

Celadon · DarkOliveGreen · Forest Green

HEX
#506143
RGB
rgb(80, 97, 67)
HSL
hsl(94, 18%, 32%)
HSB
hsb(94, 31%, 38%)
CMYK
cmyk(18%, 0%, 31%, 62%)
Oklch
oklch(47.0% 0.051 132.1)

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

#663C4B

Dark Violet · DimGray · Camellia

HEX
#663C4B
RGB
rgb(102, 60, 75)
HSL
hsl(339, 26%, 32%)
HSB
hsb(339, 41%, 40%)
CMYK
cmyk(0%, 41%, 26%, 60%)
Oklch
oklch(41.1% 0.062 357.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#692944

Dark Violet · Brown · Camellia

HEX
#692944
RGB
rgb(105, 41, 68)
HSL
hsl(335, 44%, 29%)
HSB
hsb(335, 61%, 41%)
CMYK
cmyk(0%, 61%, 35%, 59%)
Oklch
oklch(38.1% 0.097 356.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

577E8C
8D6658

Analogous

588D81
577E8C
58658D

Triadic

577E8C
8D587F
7F8D58

Split-Comp.

577E8C
8D5865
8D8158

Tetradic

577E8C
81588D
8D6658
658D58

Contrast Matrix WCAG 2.1 Contrast

577E8C
507055
506143
663C4B
692944
—
1.3
Fail
1.5
Fail
2.1
Fail
2.4
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
1.4
Fail
1.6
Fail
2.1
Fail
1.6
Fail
1.4
Fail
—
1.2
Fail
2.4
Fail
1.9
Fail
1.6
Fail
1.2
Fail
—
White BG
4.4AA Large
5.5AA
6.7AA
9.1AAA
10.5AAA
Black BG
4.8AA
3.8AA Large
3.1AA Large
2.3Fail
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

686889
5E5E5C
57584A
545347
4D4D3D

Deuteranopia

666388
5C5A5D
56554C
565947
51563C

Tritanopia

598685
526162
515051
644544
663837

Achromatopsia

747474
636363
585858
4A4A4A
3F3F3F

Shades & Tints Shades & Tints

#577E8C

Dark
Light

#507055

Dark
Light

#506143

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #577e8c;
  --color-2: #507055;
  --color-3: #506143;
  --color-4: #663c4b;
  --color-5: #692944;
}

SCSS

$color-1: #577e8c;
$color-2: #507055;
$color-3: #506143;
$color-4: #663c4b;
$color-5: #692944;

TAILWIND

colors: {
  'brand-1': '#577e8c',
  'brand-2': '#507055',
  'brand-3': '#506143',
  'brand-4': '#663c4b',
  'brand-5': '#692944',
}

RGB Array

[87, 126, 140], [80, 112, 85], [80, 97, 67], [102, 60, 75], [105, 41, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #577E8C, #507055, #506143, #663C4B, #692944 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: #577e8c; --color-2: #507055; --color-3: #506143; --color-4: #663c4b; --color-5: #692944. 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