← Back to Editor

#E24B5A · #E3B04A · #218293 · #4457C7 · #543B77

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

#E24B5A

Vermilion · Tomato · Passion Red

HEX
#E24B5A
RGB
rgb(226, 75, 90)
HSL
hsl(354, 72%, 59%)
HSB
hsb(354, 67%, 89%)
CMYK
cmyk(0%, 67%, 60%, 11%)
Oklch
oklch(62.6% 0.186 18.8)

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

#E3B04A

Ginger · SandyBrown · Sunflower

HEX
#E3B04A
RGB
rgb(227, 176, 74)
HSL
hsl(40, 73%, 59%)
HSB
hsb(40, 67%, 89%)
CMYK
cmyk(0%, 22%, 67%, 11%)
Oklch
oklch(78.5% 0.131 81.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#218293

Lake Blue · Teal · Mint Ice

HEX
#218293
RGB
rgb(33, 130, 147)
HSL
hsl(189, 63%, 35%)
HSB
hsb(189, 78%, 58%)
CMYK
cmyk(78%, 12%, 0%, 42%)
Oklch
oklch(56.0% 0.089 212.3)

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

#4457C7

Azure · SlateBlue · Navy Blue

HEX
#4457C7
RGB
rgb(68, 87, 199)
HSL
hsl(231, 54%, 52%)
HSB
hsb(231, 66%, 78%)
CMYK
cmyk(66%, 56%, 0%, 22%)
Oklch
oklch(50.7% 0.175 271.5)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#543B77

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#543B77
RGB
rgb(84, 59, 119)
HSL
hsl(265, 34%, 35%)
HSB
hsb(265, 50%, 47%)
CMYK
cmyk(29%, 50%, 0%, 53%)
Oklch
oklch(40.9% 0.100 301.3)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E24B5A
4BE2D3

Analogous

E24BA6
E24B5A
E2874B

Triadic

E24B5A
5AE24B
4B5AE2

Split-Comp.

E24B5A
4BE287
4BA6E2

Tetradic

E24B5A
A6E24B
4BE2D3
874BE2

Contrast Matrix WCAG 2.1 Contrast

E24B5A
E3B04A
218293
4457C7
543B77
—
2.0
Fail
1.2
Fail
1.6
Fail
2.4
Fail
2.0
Fail
—
2.3
Fail
3.1
AA Large
4.7
AA
1.2
Fail
2.3
Fail
—
1.4
Fail
2.1
Fail
1.6
Fail
3.1
AA Large
1.4
Fail
—
1.5
Fail
2.4
Fail
4.7
AA
2.1
Fail
1.5
Fail
—
White BG
3.9AA Large
2.0Fail
4.5AA Large
6.1AA
9.3AAA
Black BG
5.4AA
10.6AAA
4.7AA
3.4AA Large
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A19F56
CDCC63
4B4C8F
4C4CAC
494968

Deuteranopia

A9B556
D0D469
453E8E
4B4AA5
4B4D65

Tritanopia

DA5453
E0767A
268C8B
459792
535D5B

Achromatopsia

7A7A7A
B4B4B4
676767
5E5E5E
494949

Shades & Tints Shades & Tints

#E24B5A

Dark
Light

#E3B04A

Dark
Light

#218293

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e24b5a;
  --color-2: #e3b04a;
  --color-3: #218293;
  --color-4: #4457c7;
  --color-5: #543b77;
}

SCSS

$color-1: #e24b5a;
$color-2: #e3b04a;
$color-3: #218293;
$color-4: #4457c7;
$color-5: #543b77;

TAILWIND

colors: {
  'brand-1': '#e24b5a',
  'brand-2': '#e3b04a',
  'brand-3': '#218293',
  'brand-4': '#4457c7',
  'brand-5': '#543b77',
}

RGB Array

[226, 75, 90], [227, 176, 74], [33, 130, 147], [68, 87, 199], [84, 59, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E24B5A, #E3B04A, #218293, #4457C7, #543B77 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: #e24b5a; --color-2: #e3b04a; --color-3: #218293; --color-4: #4457c7; --color-5: #543b77. 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