← Back to Editor

#341F2F · #3F394D · #576B75 · #798F82 · #A6B590

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

Color Details Color Details

#341F2F

Rose Purple · DarkSlateGray · Dark Purple

HEX
#341F2F
RGB
rgb(52, 31, 47)
HSL
hsl(314, 25%, 16%)
HSB
hsb(314, 40%, 20%)
CMYK
cmyk(0%, 40%, 10%, 80%)
Oklch
oklch(27.3% 0.042 335.8)

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

#3F394D

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3F394D
RGB
rgb(63, 57, 77)
HSL
hsl(258, 15%, 26%)
HSB
hsb(258, 26%, 30%)
CMYK
cmyk(18%, 26%, 0%, 70%)
Oklch
oklch(35.9% 0.035 298.4)

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

#576B75

Slate Blue · DimGray · Prussian Blue

HEX
#576B75
RGB
rgb(87, 107, 117)
HSL
hsl(200, 15%, 40%)
HSB
hsb(200, 26%, 46%)
CMYK
cmyk(26%, 9%, 0%, 54%)
Oklch
oklch(51.5% 0.029 229.6)

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

#798F82

Celadon · Gray · Warm Gray

HEX
#798F82
RGB
rgb(121, 143, 130)
HSL
hsl(145, 9%, 52%)
HSB
hsb(145, 15%, 56%)
CMYK
cmyk(15%, 0%, 9%, 44%)
Oklch
oklch(62.9% 0.032 159.4)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#A6B590

Willow Green · DarkSeaGreen · Apple Green

HEX
#A6B590
RGB
rgb(166, 181, 144)
HSL
hsl(84, 20%, 64%)
HSB
hsb(84, 20%, 71%)
CMYK
cmyk(8%, 0%, 20%, 29%)
Oklch
oklch(75.2% 0.054 125.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

341F2F
1F3323

Analogous

2E1F33
341F2F
331F24

Triadic

341F2F
2E331F
1F2E33

Split-Comp.

341F2F
24331F
1F332E

Tetradic

341F2F
332E1F
1F3323
1F2433

Contrast Matrix WCAG 2.1 Contrast

341F2F
3F394D
576B75
798F82
A6B590
—
1.4
Fail
2.7
Fail
4.4
AA Large
7.0
AA
1.4
Fail
—
2.0
Fail
3.2
AA Large
5.1
AA
2.7
Fail
2.0
Fail
—
1.6
Fail
2.6
Fail
4.4
AA Large
3.2
AA Large
1.6
Fail
—
1.6
Fail
7.0
AA
5.1
AA
2.6
Fail
1.6
Fail
—
White BG
15.2AAA
11.0AAA
5.6AA
3.5AA Large
2.2Fail
Black BG
1.4Fail
1.9Fail
3.8AA Large
6.1AA
9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B2B
3C3C48
606073
838385
ACAD99

Deuteranopia

2C2E2A
3D3D47
5F5D72
818086
ACAB9B

Tritanopia

332827
3F4444
587170
7A8888
A7A0A2

Achromatopsia

272727
3D3D3D
666666
878787
ACACAC

Shades & Tints Shades & Tints

#341F2F

Dark
Light

#3F394D

Dark
Light

#576B75

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #341f2f;
  --color-2: #3f394d;
  --color-3: #576b75;
  --color-4: #798f82;
  --color-5: #a6b590;
}

SCSS

$color-1: #341f2f;
$color-2: #3f394d;
$color-3: #576b75;
$color-4: #798f82;
$color-5: #a6b590;

TAILWIND

colors: {
  'brand-1': '#341f2f',
  'brand-2': '#3f394d',
  'brand-3': '#576b75',
  'brand-4': '#798f82',
  'brand-5': '#a6b590',
}

RGB Array

[52, 31, 47], [63, 57, 77], [87, 107, 117], [121, 143, 130], [166, 181, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #341F2F, #3F394D, #576B75, #798F82, #A6B590 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #341f2f; --color-2: #3f394d; --color-3: #576b75; --color-4: #798f82; --color-5: #a6b590. 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. 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 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