← Back to Editor

#EA004B · #F7EDF1 · #1D3854 · #3E5773 · #6D8DB0

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

#EA004B

Dark Violet · Crimson · Camellia

HEX
#EA004B
RGB
rgb(234, 0, 75)
HSL
hsl(341, 100%, 46%)
HSB
hsb(341, 100%, 92%)
CMYK
cmyk(0%, 100%, 68%, 8%)
Oklch
oklch(59.5% 0.238 16.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#F7EDF1

Rouge · SeaShell · Cherry Blossom

HEX
#F7EDF1
RGB
rgb(247, 237, 241)
HSL
hsl(336, 38%, 95%)
HSB
hsb(336, 4%, 97%)
CMYK
cmyk(0%, 4%, 2%, 3%)
Oklch
oklch(95.5% 0.012 351.0)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#1D3854

Indigo · DarkSlateGray · Prussian Blue

HEX
#1D3854
RGB
rgb(29, 56, 84)
HSL
hsl(211, 49%, 22%)
HSB
hsb(211, 65%, 33%)
CMYK
cmyk(65%, 33%, 0%, 67%)
Oklch
oklch(33.4% 0.060 250.8)

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

#3E5773

Indigo · DarkSlateBlue · Prussian Blue

HEX
#3E5773
RGB
rgb(62, 87, 115)
HSL
hsl(212, 30%, 35%)
HSB
hsb(212, 46%, 45%)
CMYK
cmyk(46%, 24%, 0%, 55%)
Oklch
oklch(44.9% 0.055 251.9)

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

#6D8DB0

Azure · LightSlateGray · Navy Blue

HEX
#6D8DB0
RGB
rgb(109, 141, 176)
HSL
hsl(211, 30%, 56%)
HSB
hsb(211, 38%, 69%)
CMYK
cmyk(38%, 20%, 0%, 31%)
Oklch
oklch(63.2% 0.064 251.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EA004B
00EBA0

Analogous

EB00C0
EA004B
EB2B00

Triadic

EA004B
4AEB00
004AEB

Split-Comp.

EA004B
00EB2B
00C0EB

Tetradic

EA004B
C0EB00
00EBA0
2B00EB

Contrast Matrix WCAG 2.1 Contrast

EA004B
F7EDF1
1D3854
3E5773
6D8DB0
—
4.0
AA Large
2.6
Fail
1.6
Fail
1.3
Fail
4.0
AA Large
—
10.5
AAA
6.5
AA
3.0
AA Large
2.6
Fail
10.5
AAA
—
1.6
Fail
3.5
AA Large
1.6
Fail
6.5
AA
1.6
Fail
—
2.2
Fail
1.3
Fail
3.0
AA Large
3.5
AA Large
2.2
Fail
—
White BG
4.6AA
1.1Fail
12.0AAA
7.5AAA
3.4AA Large
Black BG
4.6AA
18.3AAA
1.7Fail
2.8Fail
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858339
F3F3F0
29294D
49496C
7B7BA8

Deuteranopia

92A435
F3F4F0
27254C
47466B
7977A6

Tritanopia

DE2B27
F6EFEF
1E4847
3F6766
6FA19F

Achromatopsia

4F4F4F
F0F0F0
333333
535353
878787

Shades & Tints Shades & Tints

#EA004B

Dark
Light

#F7EDF1

Dark
Light

#1D3854

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ea004b;
  --color-2: #f7edf1;
  --color-3: #1d3854;
  --color-4: #3e5773;
  --color-5: #6d8db0;
}

SCSS

$color-1: #ea004b;
$color-2: #f7edf1;
$color-3: #1d3854;
$color-4: #3e5773;
$color-5: #6d8db0;

TAILWIND

colors: {
  'brand-1': '#ea004b',
  'brand-2': '#f7edf1',
  'brand-3': '#1d3854',
  'brand-4': '#3e5773',
  'brand-5': '#6d8db0',
}

RGB Array

[234, 0, 75], [247, 237, 241], [29, 56, 84], [62, 87, 115], [109, 141, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EA004B, #F7EDF1, #1D3854, #3E5773, #6D8DB0 is ideal for: 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: #ea004b; --color-2: #f7edf1; --color-3: #1d3854; --color-4: #3e5773; --color-5: #6d8db0. 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. 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