← Back to Editor

#371F1E · #4E5144 · #576452 · #2A0C15 · #5A8F77

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

#371F1E

Crimson · DarkSlateGray · Deep Berry

HEX
#371F1E
RGB
rgb(55, 31, 30)
HSL
hsl(2, 29%, 17%)
HSB
hsb(2, 45%, 22%)
CMYK
cmyk(0%, 44%, 45%, 78%)
Oklch
oklch(27.1% 0.038 22.4)

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

#4E5144

Grass Green · DarkSlateGray · Charcoal

HEX
#4E5144
RGB
rgb(78, 81, 68)
HSL
hsl(74, 9%, 29%)
HSB
hsb(74, 16%, 32%)
CMYK
cmyk(4%, 0%, 16%, 68%)
Oklch
oklch(42.8% 0.021 117.9)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#576452

Celadon · DimGray · Forest Green

HEX
#576452
RGB
rgb(87, 100, 82)
HSL
hsl(103, 10%, 36%)
HSB
hsb(103, 18%, 39%)
CMYK
cmyk(13%, 0%, 18%, 61%)
Oklch
oklch(48.7% 0.032 137.0)

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

#2A0C15

Dark Violet · Black · Raspberry

HEX
#2A0C15
RGB
rgb(42, 12, 21)
HSL
hsl(342, 56%, 11%)
HSB
hsb(342, 71%, 16%)
CMYK
cmyk(0%, 71%, 50%, 84%)
Oklch
oklch(20.7% 0.051 3.9)

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

#5A8F77

Mineral Blue · SlateGray · Olive Green

HEX
#5A8F77
RGB
rgb(90, 143, 119)
HSL
hsl(153, 23%, 46%)
HSB
hsb(153, 37%, 56%)
CMYK
cmyk(37%, 0%, 17%, 44%)
Oklch
oklch(60.6% 0.068 164.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

371F1E
1F3738

Analogous

381F2B
371F1E
382C1F

Triadic

371F1E
1F3820
201F38

Split-Comp.

371F1E
1F382C
1F2B38

Tetradic

371F1E
2B381F
1F3738
2C1F38

Contrast Matrix WCAG 2.1 Contrast

371F1E
4E5144
576452
2A0C15
5A8F77
—
1.9
Fail
2.4
Fail
1.2
Fail
4.1
AA Large
1.9
Fail
—
1.3
Fail
2.2
Fail
2.2
Fail
2.4
Fail
1.3
Fail
—
2.9
Fail
1.7
Fail
1.2
Fail
2.2
Fail
2.9
Fail
—
4.8
AA
4.1
AA Large
2.2
Fail
1.7
Fail
4.8
AA
—
White BG
15.2AAA
8.1AAA
6.3AA
18.1AAA
3.7AA Large
Black BG
1.4Fail
2.6Fail
3.3AA Large
1.2Fail
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2C1E
4F4F47
5D5D56
1D1D13
71717D

Deuteranopia

2E301E
4F4F48
5C5B57
1F2112
6E6A7E

Tritanopia

361E1E
4E4A4A
585A5B
291111
5D8182

Achromatopsia

262626
4F4F4F
5E5E5E
161616
7C7C7C

Shades & Tints Shades & Tints

#371F1E

Dark
Light

#4E5144

Dark
Light

#576452

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #371f1e;
  --color-2: #4e5144;
  --color-3: #576452;
  --color-4: #2a0c15;
  --color-5: #5a8f77;
}

SCSS

$color-1: #371f1e;
$color-2: #4e5144;
$color-3: #576452;
$color-4: #2a0c15;
$color-5: #5a8f77;

TAILWIND

colors: {
  'brand-1': '#371f1e',
  'brand-2': '#4e5144',
  'brand-3': '#576452',
  'brand-4': '#2a0c15',
  'brand-5': '#5a8f77',
}

RGB Array

[55, 31, 30], [78, 81, 68], [87, 100, 82], [42, 12, 21], [90, 143, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #371F1E, #4E5144, #576452, #2A0C15, #5A8F77 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: #371f1e; --color-2: #4e5144; --color-3: #576452; --color-4: #2a0c15; --color-5: #5a8f77. 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