← Back to Editor

#404891 · #FF3434 · #EC6000 · #F51B1B · #747AB0

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#404891

Indigo · DarkSlateBlue · Navy Blue

HEX
#404891
RGB
rgb(64, 72, 145)
HSL
hsl(234, 39%, 41%)
HSB
hsb(234, 56%, 57%)
CMYK
cmyk(56%, 50%, 0%, 43%)
Oklch
oklch(43.4% 0.119 275.6)

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

#FF3434

Vermilion · Crimson · Passion Red

HEX
#FF3434
RGB
rgb(255, 52, 52)
HSL
hsl(0, 100%, 60%)
HSB
hsb(0, 80%, 100%)
CMYK
cmyk(0%, 80%, 80%, 0%)
Oklch
oklch(65.0% 0.236 26.9)

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

#EC6000

Tangerine · OrangeRed · Amber Brown

HEX
#EC6000
RGB
rgb(236, 96, 0)
HSL
hsl(24, 100%, 46%)
HSB
hsb(24, 100%, 93%)
CMYK
cmyk(0%, 59%, 100%, 7%)
Oklch
oklch(65.9% 0.191 44.2)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#F51B1B

Vermilion · Red · Passion Red

HEX
#F51B1B
RGB
rgb(245, 27, 27)
HSL
hsl(0, 92%, 53%)
HSB
hsb(0, 89%, 96%)
CMYK
cmyk(0%, 89%, 89%, 4%)
Oklch
oklch(61.7% 0.242 28.3)

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

#747AB0

Azure · LightSlateGray · Navy Blue

HEX
#747AB0
RGB
rgb(116, 122, 176)
HSL
hsl(234, 28%, 57%)
HSB
hsb(234, 34%, 69%)
CMYK
cmyk(34%, 31%, 0%, 31%)
Oklch
oklch(59.6% 0.083 278.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

404891
918940

Analogous

407191
404891
604091

Triadic

404891
914048
489140

Split-Comp.

404891
916040
719140

Tetradic

404891
914071
918940
409160

Contrast Matrix WCAG 2.1 Contrast

404891
FF3434
EC6000
F51B1B
747AB0
—
2.3
Fail
2.4
Fail
2.0
Fail
2.0
Fail
2.3
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
2.4
Fail
1.1
Fail
—
1.2
Fail
1.2
Fail
2.0
Fail
1.1
Fail
1.2
Fail
—
1.0
Fail
2.0
Fail
1.1
Fail
1.2
Fail
1.0
Fail
—
White BG
8.2AAA
3.6AA Large
3.4AA Large
4.2AA Large
4.1AA Large
Black BG
2.6Fail
5.8AA
6.2AA
5.1AA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43447F
A7A534
AFAE17
97951B
7777A3

Deuteranopia

43427B
B3C234
B8C21D
A3B41B
7676A0

Tritanopia

40716E
F53434
E52A2E
EA1B1B
749996

Achromatopsia

4E4E4E
717171
7F7F7F
5C5C5C
7E7E7E

Shades & Tints Shades & Tints

#404891

Dark
Light

#FF3434

Dark
Light

#EC6000

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #404891;
  --color-2: #ff3434;
  --color-3: #ec6000;
  --color-4: #f51b1b;
  --color-5: #747ab0;
}

SCSS

$color-1: #404891;
$color-2: #ff3434;
$color-3: #ec6000;
$color-4: #f51b1b;
$color-5: #747ab0;

TAILWIND

colors: {
  'brand-1': '#404891',
  'brand-2': '#ff3434',
  'brand-3': '#ec6000',
  'brand-4': '#f51b1b',
  'brand-5': '#747ab0',
}

RGB Array

[64, 72, 145], [255, 52, 52], [236, 96, 0], [245, 27, 27], [116, 122, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #404891, #FF3434, #EC6000, #F51B1B, #747AB0 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #404891; --color-2: #ff3434; --color-3: #ec6000; --color-4: #f51b1b; --color-5: #747ab0. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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