#EE3219 + #DE0D12 + #AE1F25 + #5E3636 + #2C2223 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#EE3219

Vermilion · OrangeRed · Passion Red

HEX

#EE3219

RGB

rgb(238, 50, 25)

HSL

hsl(7, 86%, 52%)

HSB

hsb(7, 89%, 93%)

CMYK

cmyk(0%, 79%, 89%, 7%)

Oklch

oklch(61.6% 0.225 31.0)

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

#DE0D12

Vermilion · Red · Passion Red

HEX

#DE0D12

RGB

rgb(222, 13, 18)

HSL

hsl(359, 89%, 46%)

HSB

hsb(359, 94%, 87%)

CMYK

cmyk(0%, 94%, 92%, 13%)

Oklch

oklch(56.9% 0.229 28.3)

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

#AE1F25

Vermilion · FireBrick · Wine Red

HEX

#AE1F25

RGB

rgb(174, 31, 37)

HSL

hsl(357, 70%, 40%)

HSB

hsb(357, 82%, 68%)

CMYK

cmyk(0%, 82%, 79%, 32%)

Oklch

oklch(48.8% 0.178 25.2)

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

#5E3636

Crimson · DarkOliveGreen · Wine Red

HEX

#5E3636

RGB

rgb(94, 54, 54)

HSL

hsl(0, 27%, 29%)

HSB

hsb(0, 43%, 37%)

CMYK

cmyk(0%, 43%, 43%, 63%)

Oklch

oklch(38.2% 0.058 20.1)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#2C2223

Crimson · DarkSlateGray · Deep Berry

HEX

#2C2223

RGB

rgb(44, 34, 35)

HSL

hsl(354, 13%, 15%)

HSB

hsb(354, 23%, 17%)

CMYK

cmyk(0%, 23%, 20%, 83%)

Oklch

oklch(26.4% 0.015 11.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EE3219

1BD5EE

Analogous

EE1B6C

EE3219

EE9D1B

Triadic

EE3219

1BEE34

341BEE

Split-Comp.

EE3219

1BEE9D

1B6CEE

Tetradic

EE3219

6CEE1B

1BD5EE

9D1BEE

Contrast Matrix WCAG 2.1 Contrast

EE3219	DE0D12	AE1F25	5E3636	2C2223
—	1.2 Fail	1.7 Fail	2.5 Fail	3.8 AA Large
1.2 Fail	—	1.4 Fail	2.0 Fail	3.1 AA Large
1.7 Fail	1.4 Fail	—	1.5 Fail	2.2 Fail
2.5 Fail	2.0 Fail	1.5 Fail	—	1.5 Fail
3.8 AA Large	3.1 AA Large	2.2 Fail	1.5 Fail	—

White BG

4.1AA Large

5.0AA

6.9AA

10.2AAA

15.4AAA

Black BG

5.1AA

4.2AA Large

3.0AA Large

2.1Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9B1F

848211

706F24

4D4C36

282823

Deuteranopia

A8B621

909F11

788323

4F5236

282923

Tritanopia

E52425

D41010

A72222

5C3636

2C2323

Achromatopsia

676767

4C4C4C

4A4A4A

424242

252525

Shades & Tints Shades & Tints

#EE3219

Dark

Light

#DE0D12

Dark

Light

#AE1F25

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ee3219;
  --color-2: #de0d12;
  --color-3: #ae1f25;
  --color-4: #5e3636;
  --color-5: #2c2223;
}

SCSS

$color-1: #ee3219;
$color-2: #de0d12;
$color-3: #ae1f25;
$color-4: #5e3636;
$color-5: #2c2223;

TAILWIND

colors: {
  'brand-1': '#ee3219',
  'brand-2': '#de0d12',
  'brand-3': '#ae1f25',
  'brand-4': '#5e3636',
  'brand-5': '#2c2223',
}

RGB Array

[238, 50, 25], [222, 13, 18], [174, 31, 37], [94, 54, 54], [44, 34, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #EE3219, #DE0D12, #AE1F25, #5E3636, #2C2223 is ideal for: tech websites, dark mode UIs, game UIs. 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: #ee3219; --color-2: #de0d12; --color-3: #ae1f25; --color-4: #5e3636; --color-5: #2c2223. 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. 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 warm-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