← Back to Editor

#57615F · #655350 · #7D4E4A · #A84941 · #E34B3D

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 Library

Color Details Color Details

#57615F

Ink Gray · DimGray · Charcoal

HEX
#57615F
RGB
rgb(87, 97, 95)
HSL
hsl(168, 5%, 36%)
HSB
hsb(168, 10%, 38%)
CMYK
cmyk(10%, 0%, 2%, 62%)
Oklch
oklch(48.3% 0.013 182.4)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#655350

Crimson · DimGray · Wine Red

HEX
#655350
RGB
rgb(101, 83, 80)
HSL
hsl(9, 12%, 35%)
HSB
hsb(9, 21%, 40%)
CMYK
cmyk(0%, 18%, 21%, 60%)
Oklch
oklch(45.9% 0.025 29.1)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#7D4E4A

Crimson · Sienna · Wine Red

HEX
#7D4E4A
RGB
rgb(125, 78, 74)
HSL
hsl(5, 26%, 39%)
HSB
hsb(5, 41%, 49%)
CMYK
cmyk(0%, 38%, 41%, 51%)
Oklch
oklch(47.6% 0.064 25.1)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#A84941

Crimson · Sienna · Passion Red

HEX
#A84941
RGB
rgb(168, 73, 65)
HSL
hsl(5, 44%, 46%)
HSB
hsb(5, 61%, 66%)
CMYK
cmyk(0%, 57%, 61%, 34%)
Oklch
oklch(52.7% 0.127 27.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#E34B3D

Vermilion · Tomato · Passion Red

HEX
#E34B3D
RGB
rgb(227, 75, 61)
HSL
hsl(5, 75%, 56%)
HSB
hsb(5, 73%, 89%)
CMYK
cmyk(0%, 67%, 73%, 11%)
Oklch
oklch(62.3% 0.191 28.9)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57615F
605759

Analogous

57605A
57615F
575E60

Triadic

57615F
5F5760
605F57

Split-Comp.

57615F
60575E
605A57

Tetradic

57615F
5A5760
605759
5E6057

Contrast Matrix WCAG 2.1 Contrast

57615F
655350
7D4E4A
A84941
E34B3D
—
1.1
Fail
1.1
Fail
1.1
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.8
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.7
Fail
1.1
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
1.6
Fail
1.8
Fail
1.7
Fail
1.4
Fail
—
White BG
6.4AA
7.2AAA
6.9AA
5.7AA
3.9AA Large
Black BG
3.3AA Large
2.9Fail
3.1AA Large
3.7AA Large
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B5F
5D5D51
69684B
7F7E43
A1A040

Deuteranopia

5B5A60
5E6051
6B6F4B
848C43
AAB541

Tritanopia

576060
645151
7B4C4C
A34445
DB4344

Achromatopsia

5E5E5E
585858
5C5C5C
646464
777777

Shades & Tints Shades & Tints

#57615F

Dark
Light

#655350

Dark
Light

#7D4E4A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57615f;
  --color-2: #655350;
  --color-3: #7d4e4a;
  --color-4: #a84941;
  --color-5: #e34b3d;
}

SCSS

$color-1: #57615f;
$color-2: #655350;
$color-3: #7d4e4a;
$color-4: #a84941;
$color-5: #e34b3d;

TAILWIND

colors: {
  'brand-1': '#57615f',
  'brand-2': '#655350',
  'brand-3': '#7d4e4a',
  'brand-4': '#a84941',
  'brand-5': '#e34b3d',
}

RGB Array

[87, 97, 95], [101, 83, 80], [125, 78, 74], [168, 73, 65], [227, 75, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #57615F, #655350, #7D4E4A, #A84941, #E34B3D is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #57615f; --color-2: #655350; --color-3: #7d4e4a; --color-4: #a84941; --color-5: #e34b3d. 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. 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. 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