← Back to Editor

#EF3C9A · #E86829 · #CB8418 · #899B8D · #85A799

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#EF3C9A

Rose Purple · DeepPink · Rose Pink

HEX
#EF3C9A
RGB
rgb(239, 60, 154)
HSL
hsl(328, 85%, 59%)
HSB
hsb(328, 75%, 94%)
CMYK
cmyk(0%, 75%, 36%, 6%)
Oklch
oklch(65.1% 0.227 353.5)

TraditionalRose Purple」· PaintRose Pink」· Creative Blush Sunrise

#E86829

Tangerine · Chocolate · Warm Sun

HEX
#E86829
RGB
rgb(232, 104, 41)
HSL
hsl(20, 81%, 54%)
HSB
hsb(20, 82%, 91%)
CMYK
cmyk(0%, 55%, 82%, 9%)
Oklch
oklch(66.5% 0.175 43.4)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#CB8418

Ochre · DarkGoldenRod · Amber Brown

HEX
#CB8418
RGB
rgb(203, 132, 24)
HSL
hsl(36, 79%, 45%)
HSB
hsb(36, 88%, 80%)
CMYK
cmyk(0%, 35%, 88%, 20%)
Oklch
oklch(67.1% 0.139 70.1)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#899B8D

Celadon · LightSlateGray · Silver Sand

HEX
#899B8D
RGB
rgb(137, 155, 141)
HSL
hsl(133, 8%, 57%)
HSB
hsb(133, 12%, 61%)
CMYK
cmyk(12%, 0%, 9%, 39%)
Oklch
oklch(67.1% 0.029 152.1)

TraditionalCeladon」· PaintSilver Sand」· Creative Urban Concrete

#85A799

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#85A799
RGB
rgb(133, 167, 153)
HSL
hsl(155, 16%, 59%)
HSB
hsb(155, 20%, 65%)
CMYK
cmyk(20%, 0%, 8%, 35%)
Oklch
oklch(69.9% 0.043 168.1)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EF3C9A
3EEF91

Analogous

E93EEF
EF3C9A
EF3E44

Triadic

EF3C9A
9CEF3E
3E9CEF

Split-Comp.

EF3C9A
44EF3E
3EEFE9

Tetradic

EF3C9A
EFE93E
3EEF91
3E44EF

Contrast Matrix WCAG 2.1 Contrast

EF3C9A
E86829
CB8418
899B8D
85A799
1.1
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.4
Fail
1.2
Fail
1.2
Fail
1.1
Fail
White BG
3.6AA Large
3.3AA Large
3.1AA Large
2.9Fail
2.6Fail
Black BG
5.8AA
6.4AA
6.9AA
7.1AAA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A083
B1AF38
ACAC32
919190
94949C

Deuteranopia

ACB97E
B8C23C
B0B638
908E91
928F9D

Tritanopia

E6716D
E24447
C7474B
8A9394
879FA0

Achromatopsia

7C7C7C
878787
8D8D8D
949494
9B9B9B

Shades & Tints Shades & Tints

#EF3C9A

Dark
Light

#E86829

Dark
Light

#CB8418

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ef3c9a;
  --color-2: #e86829;
  --color-3: #cb8418;
  --color-4: #899b8d;
  --color-5: #85a799;
}

SCSS

$color-1: #ef3c9a;
$color-2: #e86829;
$color-3: #cb8418;
$color-4: #899b8d;
$color-5: #85a799;

TAILWIND

colors: {
  'brand-1': '#ef3c9a',
  'brand-2': '#e86829',
  'brand-3': '#cb8418',
  'brand-4': '#899b8d',
  'brand-5': '#85a799',
}

RGB Array

[239, 60, 154], [232, 104, 41], [203, 132, 24], [137, 155, 141], [133, 167, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #EF3C9A, #E86829, #CB8418, #899B8D, #85A799 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: #ef3c9a; --color-2: #e86829; --color-3: #cb8418; --color-4: #899b8d; --color-5: #85a799. 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