← Back to Editor

#EC4149 · #CA252C · #4DACAE · #3A8082 · #B1DADE

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

#EC4149

Vermilion · Tomato · Passion Red

HEX
#EC4149
RGB
rgb(236, 65, 73)
HSL
hsl(357, 82%, 59%)
HSB
hsb(357, 72%, 93%)
CMYK
cmyk(0%, 72%, 69%, 7%)
Oklch
oklch(63.0% 0.207 23.1)

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

#CA252C

Vermilion · FireBrick · Passion Red

HEX
#CA252C
RGB
rgb(202, 37, 44)
HSL
hsl(357, 69%, 47%)
HSB
hsb(357, 82%, 79%)
CMYK
cmyk(0%, 82%, 78%, 21%)
Oklch
oklch(54.4% 0.199 25.3)

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

#4DACAE

Slate Blue · CadetBlue · Mint Ice

HEX
#4DACAE
RGB
rgb(77, 172, 174)
HSL
hsl(181, 39%, 49%)
HSB
hsb(181, 56%, 68%)
CMYK
cmyk(56%, 1%, 0%, 32%)
Oklch
oklch(68.9% 0.089 197.2)

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

#3A8082

Slate Blue · SeaGreen · Mint Ice

HEX
#3A8082
RGB
rgb(58, 128, 130)
HSL
hsl(182, 38%, 37%)
HSB
hsb(182, 55%, 51%)
CMYK
cmyk(55%, 2%, 0%, 49%)
Oklch
oklch(55.6% 0.070 197.9)

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

#B1DADE

Sky Blue · LightBlue · Glacier Blue

HEX
#B1DADE
RGB
rgb(177, 218, 222)
HSL
hsl(185, 41%, 78%)
HSB
hsb(185, 20%, 87%)
CMYK
cmyk(20%, 2%, 0%, 13%)
Oklch
oklch(86.0% 0.043 203.7)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EC4149
41ECE4

Analogous

EC419F
EC4149
EC8E41

Triadic

EC4149
49EC41
4149EC

Split-Comp.

EC4149
41EC8E
419FEC

Tetradic

EC4149
9FEC41
41ECE4
8E41EC

Contrast Matrix WCAG 2.1 Contrast

EC4149
CA252C
4DACAE
3A8082
B1DADE
—
1.4
Fail
1.4
Fail
1.2
Fail
2.6
Fail
1.4
Fail
—
2.1
Fail
1.2
Fail
3.7
AA Large
1.4
Fail
2.1
Fail
—
1.7
Fail
1.8
Fail
1.2
Fail
1.2
Fail
1.7
Fail
—
3.0
AA Large
2.6
Fail
3.7
AA Large
1.8
Fail
3.0
AA Large
—
White BG
3.9AA Large
5.5AA
2.7Fail
4.6AA
1.5Fail
Black BG
5.4AA
3.8AA Large
7.8AAA
4.6AA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A047
83812A
7677AE
585982
C3C3DD

Deuteranopia

ACB947
8C982A
716AAD
544F81
C0BDDD

Tritanopia

E34645
C22929
52ADAD
3D8181
B3DCDC

Achromatopsia

757575
575757
909090
6B6B6B
CECECE

Shades & Tints Shades & Tints

#EC4149

Dark
Light

#CA252C

Dark
Light

#4DACAE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ec4149;
  --color-2: #ca252c;
  --color-3: #4dacae;
  --color-4: #3a8082;
  --color-5: #b1dade;
}

SCSS

$color-1: #ec4149;
$color-2: #ca252c;
$color-3: #4dacae;
$color-4: #3a8082;
$color-5: #b1dade;

TAILWIND

colors: {
  'brand-1': '#ec4149',
  'brand-2': '#ca252c',
  'brand-3': '#4dacae',
  'brand-4': '#3a8082',
  'brand-5': '#b1dade',
}

RGB Array

[236, 65, 73], [202, 37, 44], [77, 172, 174], [58, 128, 130], [177, 218, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EC4149, #CA252C, #4DACAE, #3A8082, #B1DADE 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: #ec4149; --color-2: #ca252c; --color-3: #4dacae; --color-4: #3a8082; --color-5: #b1dade. 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