#EE4030 + #AB541F + #875713 + #3D5C66 + #2E454D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#EE4030

Vermilion · Tomato · Passion Red

HEX

#EE4030

RGB

rgb(238, 64, 48)

HSL

hsl(5, 85%, 56%)

HSB

hsb(5, 80%, 93%)

CMYK

cmyk(0%, 73%, 80%, 7%)

Oklch

oklch(62.9% 0.213 29.6)

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

#AB541F

Tangerine · Sienna · Amber Brown

HEX

#AB541F

RGB

rgb(171, 84, 31)

HSL

hsl(23, 69%, 40%)

HSB

hsb(23, 82%, 67%)

CMYK

cmyk(0%, 51%, 82%, 33%)

Oklch

oklch(54.5% 0.131 48.0)

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

#875713

Ochre · Sienna · Amber Brown

HEX

#875713

RGB

rgb(135, 87, 19)

HSL

hsl(35, 75%, 30%)

HSB

hsb(35, 86%, 53%)

CMYK

cmyk(0%, 36%, 86%, 47%)

Oklch

oklch(49.9% 0.100 69.5)

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

#3D5C66

Slate Blue · DarkSlateGray · Mint Ice

HEX

#3D5C66

RGB

rgb(61, 92, 102)

HSL

hsl(195, 25%, 32%)

HSB

hsb(195, 40%, 40%)

CMYK

cmyk(40%, 10%, 0%, 60%)

Oklch

oklch(45.5% 0.040 220.1)

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

#2E454D

Slate Blue · DarkSlateGray · Peacock Green

HEX

#2E454D

RGB

rgb(46, 69, 77)

HSL

hsl(195, 25%, 24%)

HSB

hsb(195, 40%, 30%)

CMYK

cmyk(40%, 10%, 0%, 70%)

Oklch

oklch(37.5% 0.032 221.6)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EE4030

2FDEEE

Analogous

EE2F7F

EE4030

EE9F2F

Triadic

EE4030

2FEE3F

3F2FEE

Split-Comp.

EE4030

2FEE9F

2F7FEE

Tetradic

EE4030

7FEE2F

2FDEEE

9F2FEE

Contrast Matrix WCAG 2.1 Contrast

EE4030	AB541F	875713	3D5C66	2E454D
—	1.3 Fail	1.6 Fail	1.9 Fail	2.6 Fail
1.3 Fail	—	1.2 Fail	1.4 Fail	1.9 Fail
1.6 Fail	1.2 Fail	—	1.2 Fail	1.6 Fail
1.9 Fail	1.4 Fail	1.2 Fail	—	1.4 Fail
2.6 Fail	1.9 Fail	1.6 Fail	1.4 Fail	—

White BG

3.9AA Large

5.2AA

6.2AA

7.2AAA

10.1AAA

Black BG

5.4AA

4.0AA Large

3.4AA Large

2.9Fail

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A134

85852C

727223

4A4B64

38384B

Deuteranopia

ADBA35

8A912F

757927

494663

37354B

Tritanopia

E53738

A73638

853033

3F6261

2F4A49

Achromatopsia

727272

686868

5E5E5E

545454

3F3F3F

Shades & Tints Shades & Tints

#EE4030

Dark

Light

#AB541F

Dark

Light

#875713

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ee4030;
  --color-2: #ab541f;
  --color-3: #875713;
  --color-4: #3d5c66;
  --color-5: #2e454d;
}

SCSS

$color-1: #ee4030;
$color-2: #ab541f;
$color-3: #875713;
$color-4: #3d5c66;
$color-5: #2e454d;

TAILWIND

colors: {
  'brand-1': '#ee4030',
  'brand-2': '#ab541f',
  'brand-3': '#875713',
  'brand-4': '#3d5c66',
  'brand-5': '#2e454d',
}

RGB Array

[238, 64, 48], [171, 84, 31], [135, 87, 19], [61, 92, 102], [46, 69, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EE4030, #AB541F, #875713, #3D5C66, #2E454D 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: #ee4030; --color-2: #ab541f; --color-3: #875713; --color-4: #3d5c66; --color-5: #2e454d. 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 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