← Back to Editor

#E1422E · #DD7450 · #CB945A · #B5AE67 · #A5BDA1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E1422E

Vermilion · Chocolate · Passion Red

HEX
#E1422E
RGB
rgb(225, 66, 46)
HSL
hsl(7, 75%, 53%)
HSB
hsb(7, 80%, 88%)
CMYK
cmyk(0%, 71%, 80%, 12%)
Oklch
oklch(60.9% 0.199 30.6)

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

#DD7450

Tangerine · Coral · Warm Sun

HEX
#DD7450
RGB
rgb(221, 116, 80)
HSL
hsl(15, 67%, 59%)
HSB
hsb(15, 64%, 87%)
CMYK
cmyk(0%, 48%, 64%, 13%)
Oklch
oklch(67.2% 0.141 39.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#CB945A

Ginger · DarkSalmon · Warm Sun

HEX
#CB945A
RGB
rgb(203, 148, 90)
HSL
hsl(31, 52%, 57%)
HSB
hsb(31, 56%, 80%)
CMYK
cmyk(0%, 27%, 56%, 20%)
Oklch
oklch(70.7% 0.100 66.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B5AE67

Autumn Sage · Tan · Sunflower

HEX
#B5AE67
RGB
rgb(181, 174, 103)
HSL
hsl(55, 35%, 56%)
HSB
hsb(55, 43%, 71%)
CMYK
cmyk(0%, 4%, 43%, 29%)
Oklch
oklch(74.1% 0.093 103.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#A5BDA1

Celadon · DarkGray · Apple Green

HEX
#A5BDA1
RGB
rgb(165, 189, 161)
HSL
hsl(111, 18%, 69%)
HSB
hsb(111, 15%, 74%)
CMYK
cmyk(13%, 0%, 15%, 26%)
Oklch
oklch(77.2% 0.047 141.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1422E
2DCCE1

Analogous

E12D72
E1422E
E19C2D

Triadic

E1422E
2DE142
422DE1

Split-Comp.

E1422E
2DE19C
2D72E1

Tetradic

E1422E
72E12D
2DCCE1
9C2DE1

Contrast Matrix WCAG 2.1 Contrast

E1422E
DD7450
CB945A
B5AE67
A5BDA1
—
1.3
Fail
1.6
Fail
1.8
Fail
2.1
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
1.6
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
2.1
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
White BG
4.2AA Large
3.1AA Large
2.7Fail
2.3Fail
2.0Fail
Black BG
5.0AA
6.7AA
7.9AAA
9.2AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9B33
B0AF59
B3B368
B2B278
AFB0A8

Deuteranopia

A5B134
B6BE5B
B6BB6B
B2B37C
AEACA9

Tritanopia

D93738
D86061
C87376
B58689
A6ADAE

Achromatopsia

6F6F6F
8F8F8F
9E9E9E
A8A8A8
B3B3B3

Shades & Tints Shades & Tints

#E1422E

Dark
Light

#DD7450

Dark
Light

#CB945A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1422e;
  --color-2: #dd7450;
  --color-3: #cb945a;
  --color-4: #b5ae67;
  --color-5: #a5bda1;
}

SCSS

$color-1: #e1422e;
$color-2: #dd7450;
$color-3: #cb945a;
$color-4: #b5ae67;
$color-5: #a5bda1;

TAILWIND

colors: {
  'brand-1': '#e1422e',
  'brand-2': '#dd7450',
  'brand-3': '#cb945a',
  'brand-4': '#b5ae67',
  'brand-5': '#a5bda1',
}

RGB Array

[225, 66, 46], [221, 116, 80], [203, 148, 90], [181, 174, 103], [165, 189, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E1422E, #DD7450, #CB945A, #B5AE67, #A5BDA1 is ideal for: corporate websites, product showcases, portfolios. 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: #e1422e; --color-2: #dd7450; --color-3: #cb945a; --color-4: #b5ae67; --color-5: #a5bda1. 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 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