← Back to Editor

#E63E5D · #9F4D41 · #533436 · #082D35 · #97AF22

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

#E63E5D

Vermilion · Tomato · Passion Red

HEX
#E63E5D
RGB
rgb(230, 62, 93)
HSL
hsl(349, 77%, 57%)
HSB
hsb(349, 73%, 90%)
CMYK
cmyk(0%, 73%, 60%, 10%)
Oklch
oklch(62.1% 0.203 15.2)

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

#9F4D41

Crimson · Sienna · Passion Red

HEX
#9F4D41
RGB
rgb(159, 77, 65)
HSL
hsl(8, 42%, 44%)
HSB
hsb(8, 59%, 62%)
CMYK
cmyk(0%, 52%, 59%, 38%)
Oklch
oklch(52.0% 0.112 29.9)

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

#533436

Crimson · DarkSlateGray · Wine Red

HEX
#533436
RGB
rgb(83, 52, 54)
HSL
hsl(356, 23%, 26%)
HSB
hsb(356, 37%, 33%)
CMYK
cmyk(0%, 37%, 35%, 67%)
Oklch
oklch(36.3% 0.045 15.3)

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

#082D35

Lake Blue · DarkSlateGray · Peacock Green

HEX
#082D35
RGB
rgb(8, 45, 53)
HSL
hsl(191, 74%, 12%)
HSB
hsb(191, 85%, 21%)
CMYK
cmyk(85%, 15%, 0%, 79%)
Oklch
oklch(27.6% 0.043 215.4)

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

#97AF22

Grass Green · DarkGoldenRod · Olive Green

HEX
#97AF22
RGB
rgb(151, 175, 34)
HSL
hsl(70, 67%, 41%)
HSB
hsb(70, 81%, 69%)
CMYK
cmyk(14%, 0%, 81%, 31%)
Oklch
oklch(71.1% 0.158 119.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E63E5D
3DE6C7

Analogous

E63DB0
E63E5D
E6723D

Triadic

E63E5D
5CE63D
3D5CE6

Split-Comp.

E63E5D
3DE672
3DB0E6

Tetradic

E63E5D
B0E63D
3DE6C7
723DE6

Contrast Matrix WCAG 2.1 Contrast

E63E5D
9F4D41
533436
082D35
97AF22
—
1.4
Fail
2.7
Fail
3.6
AA Large
1.6
Fail
1.4
Fail
—
1.9
Fail
2.5
Fail
2.3
Fail
2.7
Fail
1.9
Fail
—
1.3
Fail
4.4
AA Large
3.6
AA Large
2.5
Fail
1.3
Fail
—
5.9
AA
1.6
Fail
2.3
Fail
4.4
AA Large
5.9
AA
—
White BG
4.0AA Large
5.8AA
11.0AAA
14.6AAA
2.5Fail
Black BG
5.2AA
3.6AA Large
1.9Fail
1.4Fail
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9C55
7B7B44
464536
181833
A1A244

Deuteranopia

A7B454
808645
474A35
161333
A09E4C

Tritanopia

DE504E
9B4647
513535
0A3231
985F65

Achromatopsia

747474
646464
3D3D3D
232323
989898

Shades & Tints Shades & Tints

#E63E5D

Dark
Light

#9F4D41

Dark
Light

#533436

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e63e5d;
  --color-2: #9f4d41;
  --color-3: #533436;
  --color-4: #082d35;
  --color-5: #97af22;
}

SCSS

$color-1: #e63e5d;
$color-2: #9f4d41;
$color-3: #533436;
$color-4: #082d35;
$color-5: #97af22;

TAILWIND

colors: {
  'brand-1': '#e63e5d',
  'brand-2': '#9f4d41',
  'brand-3': '#533436',
  'brand-4': '#082d35',
  'brand-5': '#97af22',
}

RGB Array

[230, 62, 93], [159, 77, 65], [83, 52, 54], [8, 45, 53], [151, 175, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E63E5D, #9F4D41, #533436, #082D35, #97AF22 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #e63e5d; --color-2: #9f4d41; --color-3: #533436; --color-4: #082d35; --color-5: #97af22. 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 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