← Back to Editor

#E4572C · #33A567 · #3B7E91 · #3D5764 · #00080A

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

#E4572C

Vermilion · Chocolate · Passion Red

HEX
#E4572C
RGB
rgb(228, 87, 44)
HSL
hsl(14, 77%, 53%)
HSB
hsb(14, 81%, 89%)
CMYK
cmyk(0%, 62%, 81%, 11%)
Oklch
oklch(63.7% 0.184 36.9)

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

#33A567

Pine Green · MediumSeaGreen · Olive Green

HEX
#33A567
RGB
rgb(51, 165, 103)
HSL
hsl(147, 53%, 42%)
HSB
hsb(147, 69%, 65%)
CMYK
cmyk(69%, 0%, 38%, 35%)
Oklch
oklch(64.3% 0.138 155.1)

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

#3B7E91

Slate Blue · SteelBlue · Mint Ice

HEX
#3B7E91
RGB
rgb(59, 126, 145)
HSL
hsl(193, 42%, 40%)
HSB
hsb(193, 59%, 57%)
CMYK
cmyk(59%, 13%, 0%, 43%)
Oklch
oklch(55.7% 0.074 219.0)

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

#3D5764

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#3D5764
RGB
rgb(61, 87, 100)
HSL
hsl(200, 24%, 32%)
HSB
hsb(200, 39%, 39%)
CMYK
cmyk(39%, 13%, 0%, 61%)
Oklch
oklch(44.1% 0.038 230.3)

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

#00080A

Lake Blue · Black · Peacock Green

HEX
#00080A
RGB
rgb(0, 8, 10)
HSL
hsl(192, 100%, 2%)
HSB
hsb(192, 100%, 4%)
CMYK
cmyk(100%, 20%, 0%, 96%)
Oklch
oklch(12.3% 0.021 208.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4572C
2BB8E3

Analogous

E32B5C
E4572C
E3B22B

Triadic

E4572C
2BE356
562BE3

Split-Comp.

E4572C
2BE3B2
2B5CE3

Tetradic

E4572C
5CE32B
2BB8E3
B22BE3

Contrast Matrix WCAG 2.1 Contrast

E4572C
33A567
3B7E91
3D5764
00080A
—
1.2
Fail
1.2
Fail
2.1
Fail
5.5
AA
1.2
Fail
—
1.5
Fail
2.4
Fail
6.5
AA
1.2
Fail
1.5
Fail
—
1.7
Fail
4.4
AA Large
2.1
Fail
2.4
Fail
1.7
Fail
—
2.6
Fail
5.5
AA
6.5
AA
4.4
AA Large
2.6
Fail
—
White BG
3.7AA Large
3.1AA Large
4.6AA
7.6AAA
20.2AAA
Black BG
5.7AA
6.7AA
4.6AA
2.7Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A636
646576
58598C
484861
03040A

Deuteranopia

AFBA39
5E557A
544F8B
474560
030209

Tritanopia

DD3F40
398284
3E8988
3E5E5E
000909

Achromatopsia

7C7C7C
7C7C7C
6C6C6C
515151
060606

Shades & Tints Shades & Tints

#E4572C

Dark
Light

#33A567

Dark
Light

#3B7E91

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4572c;
  --color-2: #33a567;
  --color-3: #3b7e91;
  --color-4: #3d5764;
  --color-5: #00080a;
}

SCSS

$color-1: #e4572c;
$color-2: #33a567;
$color-3: #3b7e91;
$color-4: #3d5764;
$color-5: #00080a;

TAILWIND

colors: {
  'brand-1': '#e4572c',
  'brand-2': '#33a567',
  'brand-3': '#3b7e91',
  'brand-4': '#3d5764',
  'brand-5': '#00080a',
}

RGB Array

[228, 87, 44], [51, 165, 103], [59, 126, 145], [61, 87, 100], [0, 8, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4572C, #33A567, #3B7E91, #3D5764, #00080A 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: #e4572c; --color-2: #33a567; --color-3: #3b7e91; --color-4: #3d5764; --color-5: #00080a. 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