← Back to Editor

#522626 · #E61321 · #EB8F26 · #7B874A · #4E6961

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

#522626

Crimson · DarkSlateGray · Wine Red

HEX
#522626
RGB
rgb(82, 38, 38)
HSL
hsl(0, 37%, 24%)
HSB
hsb(0, 54%, 32%)
CMYK
cmyk(0%, 54%, 54%, 68%)
Oklch
oklch(32.9% 0.066 21.3)

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

#E61321

Vermilion · Crimson · Passion Red

HEX
#E61321
RGB
rgb(230, 19, 33)
HSL
hsl(356, 85%, 49%)
HSB
hsb(356, 92%, 90%)
CMYK
cmyk(0%, 92%, 86%, 10%)
Oklch
oklch(58.7% 0.232 26.7)

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

#EB8F26

Ginger · GoldenRod · Warm Sun

HEX
#EB8F26
RGB
rgb(235, 143, 38)
HSL
hsl(32, 83%, 54%)
HSB
hsb(32, 84%, 92%)
CMYK
cmyk(0%, 39%, 84%, 8%)
Oklch
oklch(73.1% 0.155 62.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#7B874A

Grass Green · DimGray · Olive Green

HEX
#7B874A
RGB
rgb(123, 135, 74)
HSL
hsl(72, 29%, 41%)
HSB
hsb(72, 45%, 53%)
CMYK
cmyk(9%, 0%, 45%, 47%)
Oklch
oklch(59.9% 0.086 118.2)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#4E6961

Mineral Blue · DimGray · Mint Ice

HEX
#4E6961
RGB
rgb(78, 105, 97)
HSL
hsl(162, 15%, 36%)
HSB
hsb(162, 26%, 41%)
CMYK
cmyk(26%, 0%, 8%, 59%)
Oklch
oklch(49.7% 0.034 174.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

522626
275454

Analogous

54273D
522626
543D27

Triadic

522626
275427
272754

Split-Comp.

522626
27543D
273D54

Tetradic

522626
3D5427
275454
3D2754

Contrast Matrix WCAG 2.1 Contrast

522626
E61321
EB8F26
7B874A
4E6961
—
2.7
Fail
5.1
AA
3.2
AA Large
2.1
Fail
2.7
Fail
—
1.9
Fail
1.2
Fail
1.3
Fail
5.1
AA
1.9
Fail
—
1.6
Fail
2.4
Fail
3.2
AA Large
1.2
Fail
1.6
Fail
—
1.5
Fail
2.1
Fail
1.3
Fail
2.4
Fail
1.5
Fail
—
White BG
12.6AAA
4.7AA
2.5Fail
3.9AA Large
6.0AA
Black BG
1.7Fail
4.5AA Large
8.5AAA
5.4AA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F26
8B891E
C3C23F
808059
5A5A63

Deuteranopia

424526
97A71D
C9CF46
807F5C
585663

Tritanopia

502626
DB1B1A
E65358
7C6467
4F6465

Achromatopsia

333333
545454
9F9F9F
7C7C7C
606060

Shades & Tints Shades & Tints

#522626

Dark
Light

#E61321

Dark
Light

#EB8F26

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #522626;
  --color-2: #e61321;
  --color-3: #eb8f26;
  --color-4: #7b874a;
  --color-5: #4e6961;
}

SCSS

$color-1: #522626;
$color-2: #e61321;
$color-3: #eb8f26;
$color-4: #7b874a;
$color-5: #4e6961;

TAILWIND

colors: {
  'brand-1': '#522626',
  'brand-2': '#e61321',
  'brand-3': '#eb8f26',
  'brand-4': '#7b874a',
  'brand-5': '#4e6961',
}

RGB Array

[82, 38, 38], [230, 19, 33], [235, 143, 38], [123, 135, 74], [78, 105, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #522626, #E61321, #EB8F26, #7B874A, #4E6961 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: #522626; --color-2: #e61321; --color-3: #eb8f26; --color-4: #7b874a; --color-5: #4e6961. 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