← Back to Editor

#E66158 · #DF7565 · #CC866C · #85825F · #905D40

warm

A 5-color warm 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

#E66158

Peach Pink · Tomato · Coral Red

HEX
#E66158
RGB
rgb(230, 97, 88)
HSL
hsl(4, 74%, 62%)
HSB
hsb(4, 62%, 90%)
CMYK
cmyk(0%, 58%, 62%, 10%)
Oklch
oklch(65.8% 0.167 26.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DF7565

Peach Pink · Salmon · Coral Red

HEX
#DF7565
RGB
rgb(223, 117, 101)
HSL
hsl(8, 66%, 64%)
HSB
hsb(8, 55%, 87%)
CMYK
cmyk(0%, 48%, 55%, 13%)
Oklch
oklch(68.0% 0.135 29.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CC866C

Apricot · DarkSalmon · Warm Sun

HEX
#CC866C
RGB
rgb(204, 134, 108)
HSL
hsl(16, 48%, 61%)
HSB
hsb(16, 47%, 80%)
CMYK
cmyk(0%, 34%, 47%, 20%)
Oklch
oklch(68.6% 0.094 41.1)

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

#85825F

Autumn Sage · Gray · Honey Gold

HEX
#85825F
RGB
rgb(133, 130, 95)
HSL
hsl(55, 17%, 45%)
HSB
hsb(55, 29%, 52%)
CMYK
cmyk(0%, 2%, 29%, 48%)
Oklch
oklch(60.0% 0.050 103.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#905D40

Tangerine · Sienna · Amber Brown

HEX
#905D40
RGB
rgb(144, 93, 64)
HSL
hsl(22, 38%, 41%)
HSB
hsb(22, 56%, 56%)
CMYK
cmyk(0%, 35%, 56%, 44%)
Oklch
oklch(52.7% 0.079 50.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E66158
56DCE6

Analogous

E65695
E66158
E6A856

Triadic

E66158
56E660
6056E6

Split-Comp.

E66158
56E6A8
5695E6

Tetradic

E66158
95E656
56DCE6
A856E6

Contrast Matrix WCAG 2.1 Contrast

E66158
DF7565
CC866C
85825F
905D40
—
1.1
Fail
1.2
Fail
1.2
Fail
1.6
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
1.8
Fail
1.2
Fail
1.0
Fail
—
1.3
Fail
1.9
Fail
1.2
Fail
1.3
Fail
1.3
Fail
—
1.4
Fail
1.6
Fail
1.8
Fail
1.9
Fail
1.4
Fail
—
White BG
3.4AA Large
3.1AA Large
2.9Fail
3.9AA Large
5.5AA
Black BG
6.2AA
6.9AA
7.2AAA
5.4AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAB5A
B1B069
AEAD72
848467
7A7947

Deuteranopia

B4BE5B
B7BF6A
B2B774
84846A
7D8149

Tritanopia

DF5C5C
DA6C6D
C87778
856E70
8D4D4E

Achromatopsia

888888
939393
989898
7F7F7F
696969

Shades & Tints Shades & Tints

#E66158

Dark
Light

#DF7565

Dark
Light

#CC866C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e66158;
  --color-2: #df7565;
  --color-3: #cc866c;
  --color-4: #85825f;
  --color-5: #905d40;
}

SCSS

$color-1: #e66158;
$color-2: #df7565;
$color-3: #cc866c;
$color-4: #85825f;
$color-5: #905d40;

TAILWIND

colors: {
  'brand-1': '#e66158',
  'brand-2': '#df7565',
  'brand-3': '#cc866c',
  'brand-4': '#85825f',
  'brand-5': '#905d40',
}

RGB Array

[230, 97, 88], [223, 117, 101], [204, 134, 108], [133, 130, 95], [144, 93, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #E66158, #DF7565, #CC866C, #85825F, #905D40 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: #e66158; --color-2: #df7565; --color-3: #cc866c; --color-4: #85825f; --color-5: #905d40. 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 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