← Back to Editor

#E02614 · #DE4D1A · #D1A27D · #CCD7A1 · #7A716B

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

#E02614

Vermilion · Crimson · Passion Red

HEX
#E02614
RGB
rgb(224, 38, 20)
HSL
hsl(5, 84%, 48%)
HSB
hsb(5, 91%, 88%)
CMYK
cmyk(0%, 83%, 91%, 12%)
Oklch
oklch(58.3% 0.220 30.2)

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

#DE4D1A

Tangerine · Chocolate · Amber Brown

HEX
#DE4D1A
RGB
rgb(222, 77, 26)
HSL
hsl(16, 79%, 49%)
HSB
hsb(16, 88%, 87%)
CMYK
cmyk(0%, 65%, 88%, 13%)
Oklch
oklch(61.4% 0.190 37.6)

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

#D1A27D

Apricot · Tan · Warm Sun

HEX
#D1A27D
RGB
rgb(209, 162, 125)
HSL
hsl(26, 48%, 65%)
HSB
hsb(26, 40%, 82%)
CMYK
cmyk(0%, 22%, 40%, 18%)
Oklch
oklch(74.7% 0.075 59.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CCD7A1

Willow Green · Silver · Apple Green

HEX
#CCD7A1
RGB
rgb(204, 215, 161)
HSL
hsl(72, 40%, 74%)
HSB
hsb(72, 25%, 84%)
CMYK
cmyk(5%, 0%, 25%, 16%)
Oklch
oklch(85.7% 0.072 117.3)

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

#7A716B

Ink Gray · DimGray · Warm Gray

HEX
#7A716B
RGB
rgb(122, 113, 107)
HSL
hsl(24, 7%, 45%)
HSB
hsb(24, 12%, 48%)
CMYK
cmyk(0%, 7%, 12%, 52%)
Oklch
oklch(55.5% 0.015 56.1)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E02614
14D0E1

Analogous

E11469
E02614
E18C14

Triadic

E02614
14E125
2514E1

Split-Comp.

E02614
14E18C
1469E1

Tetradic

E02614
69E114
14D0E1
8C14E1

Contrast Matrix WCAG 2.1 Contrast

E02614
DE4D1A
D1A27D
CCD7A1
7A716B
—
1.2
Fail
2.1
Fail
3.1
AA Large
1.0
Fail
1.2
Fail
—
1.8
Fail
2.7
Fail
1.2
Fail
2.1
Fail
1.8
Fail
—
1.5
Fail
2.1
Fail
3.1
AA Large
2.7
Fail
1.5
Fail
—
3.1
AA Large
1.0
Fail
1.2
Fail
2.1
Fail
3.1
AA Large
—
White BG
4.7AA
4.1AA Large
2.3Fail
1.5Fail
4.8AA
Black BG
4.5AA Large
5.2AA
9.2AAA
13.8AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8E18
9F9E26
BDBC86
D1D1AE
76766C

Deuteranopia

9AA819
A8B229
BFC388
D0CFB1
77776D

Tritanopia

D71C1D
D73032
CF8D8F
CDB8BB
7A6E6E

Achromatopsia

5C5C5C
737373
ACACAC
CECECE
737373

Shades & Tints Shades & Tints

#E02614

Dark
Light

#DE4D1A

Dark
Light

#D1A27D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e02614;
  --color-2: #de4d1a;
  --color-3: #d1a27d;
  --color-4: #ccd7a1;
  --color-5: #7a716b;
}

SCSS

$color-1: #e02614;
$color-2: #de4d1a;
$color-3: #d1a27d;
$color-4: #ccd7a1;
$color-5: #7a716b;

TAILWIND

colors: {
  'brand-1': '#e02614',
  'brand-2': '#de4d1a',
  'brand-3': '#d1a27d',
  'brand-4': '#ccd7a1',
  'brand-5': '#7a716b',
}

RGB Array

[224, 38, 20], [222, 77, 26], [209, 162, 125], [204, 215, 161], [122, 113, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E02614, #DE4D1A, #D1A27D, #CCD7A1, #7A716B 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: #e02614; --color-2: #de4d1a; --color-3: #d1a27d; --color-4: #ccd7a1; --color-5: #7a716b. 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