← Back to Editor

#5A5664 · #6C7B8B · #CBC8B5 · #779F9F · #3F2929

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 LibraryData Visualization

Color Details Color Details

#5A5664

Deep Indigo · DimGray · Charcoal

HEX
#5A5664
RGB
rgb(90, 86, 100)
HSL
hsl(257, 8%, 36%)
HSB
hsb(257, 14%, 39%)
CMYK
cmyk(10%, 14%, 0%, 61%)
Oklch
oklch(46.2% 0.023 298.6)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#6C7B8B

Indigo · SlateGray · Navy Blue

HEX
#6C7B8B
RGB
rgb(108, 123, 139)
HSL
hsl(211, 13%, 48%)
HSB
hsb(211, 22%, 55%)
CMYK
cmyk(22%, 12%, 0%, 45%)
Oklch
oklch(57.6% 0.030 250.1)

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

#CBC8B5

Fresh Green · Silver · Sunflower

HEX
#CBC8B5
RGB
rgb(203, 200, 181)
HSL
hsl(52, 17%, 75%)
HSB
hsb(52, 11%, 80%)
CMYK
cmyk(0%, 1%, 11%, 20%)
Oklch
oklch(83.0% 0.026 99.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#779F9F

Slate Blue · LightSlateGray · Lake Green

HEX
#779F9F
RGB
rgb(119, 159, 159)
HSL
hsl(180, 17%, 55%)
HSB
hsb(180, 25%, 62%)
CMYK
cmyk(25%, 0%, 0%, 38%)
Oklch
oklch(67.3% 0.044 196.2)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#3F2929

Crimson · DarkSlateGray · Deep Berry

HEX
#3F2929
RGB
rgb(63, 41, 41)
HSL
hsl(0, 21%, 20%)
HSB
hsb(0, 35%, 25%)
CMYK
cmyk(0%, 35%, 35%, 75%)
Oklch
oklch(30.8% 0.033 19.1)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A5664
5F6354

Analogous

545863
5A5664
605463

Triadic

5A5664
635954
546359

Split-Comp.

5A5664
636054
586354

Tetradic

5A5664
635458
5F6354
546360

Contrast Matrix WCAG 2.1 Contrast

5A5664
6C7B8B
CBC8B5
779F9F
3F2929
—
1.6
Fail
4.2
AA Large
2.5
Fail
1.9
Fail
1.6
Fail
—
2.6
Fail
1.5
Fail
3.1
AA Large
4.2
AA Large
2.6
Fail
—
1.7
Fail
8.0
AAA
2.5
Fail
1.5
Fail
1.7
Fail
—
4.6
AA
1.9
Fail
3.1
AA Large
8.0
AAA
4.6
AA
—
White BG
7.1AAA
4.3AA Large
1.7Fail
2.9Fail
13.5AAA
Black BG
2.9Fail
4.8AA
12.5AAA
7.2AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

585861
727387
CACABA
88899F
353529

Deuteranopia

595960
727186
CACABB
86839F
373829

Tritanopia

5A5E5D
6D8483
CBBDBE
799F9F
3E2929

Achromatopsia

595959
787878
C7C7C7
939393
303030

Shades & Tints Shades & Tints

#5A5664

Dark
Light

#6C7B8B

Dark
Light

#CBC8B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a5664;
  --color-2: #6c7b8b;
  --color-3: #cbc8b5;
  --color-4: #779f9f;
  --color-5: #3f2929;
}

SCSS

$color-1: #5a5664;
$color-2: #6c7b8b;
$color-3: #cbc8b5;
$color-4: #779f9f;
$color-5: #3f2929;

TAILWIND

colors: {
  'brand-1': '#5a5664',
  'brand-2': '#6c7b8b',
  'brand-3': '#cbc8b5',
  'brand-4': '#779f9f',
  'brand-5': '#3f2929',
}

RGB Array

[90, 86, 100], [108, 123, 139], [203, 200, 181], [119, 159, 159], [63, 41, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A5664, #6C7B8B, #CBC8B5, #779F9F, #3F2929 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #5a5664; --color-2: #6c7b8b; --color-3: #cbc8b5; --color-4: #779f9f; --color-5: #3f2929. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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