← Back to Editor

#EF8C21 · #A78663 · #F7B56B · #857B70 · #CC7937

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

#EF8C21

Ginger · GoldenRod · Warm Sun

HEX
#EF8C21
RGB
rgb(239, 140, 33)
HSL
hsl(31, 87%, 53%)
HSB
hsb(31, 86%, 94%)
CMYK
cmyk(0%, 41%, 86%, 6%)
Oklch
oklch(73.1% 0.161 60.6)

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

#A78663

Ginger · Gray · Warm Sun

HEX
#A78663
RGB
rgb(167, 134, 99)
HSL
hsl(31, 28%, 52%)
HSB
hsb(31, 41%, 65%)
CMYK
cmyk(0%, 20%, 41%, 35%)
Oklch
oklch(64.3% 0.063 68.0)

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

#F7B56B

Ginger · SandyBrown · Warm Sun

HEX
#F7B56B
RGB
rgb(247, 181, 107)
HSL
hsl(32, 90%, 69%)
HSB
hsb(32, 57%, 97%)
CMYK
cmyk(0%, 27%, 57%, 3%)
Oklch
oklch(82.0% 0.119 68.0)

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

#857B70

Ochre · Gray · Warm Gray

HEX
#857B70
RGB
rgb(133, 123, 112)
HSL
hsl(31, 9%, 48%)
HSB
hsb(31, 16%, 52%)
CMYK
cmyk(0%, 8%, 16%, 48%)
Oklch
oklch(58.9% 0.020 70.1)

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

#CC7937

Tangerine · Chocolate · Warm Sun

HEX
#CC7937
RGB
rgb(204, 121, 55)
HSL
hsl(27, 59%, 51%)
HSB
hsb(27, 73%, 80%)
CMYK
cmyk(0%, 41%, 73%, 20%)
Oklch
oklch(65.5% 0.131 56.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EF8C21
1F84EF

Analogous

EF221F
EF8C21
ECEF1F

Triadic

EF8C21
1FEF8B
8B1FEF

Split-Comp.

EF8C21
1FECEF
221FEF

Tetradic

EF8C21
1FEF22
1F84EF
EF1FEC

Contrast Matrix WCAG 2.1 Contrast

EF8C21
A78663
F7B56B
857B70
CC7937
—
1.4
Fail
1.4
Fail
1.7
Fail
1.3
Fail
1.4
Fail
—
1.9
Fail
1.2
Fail
1.0
Fail
1.4
Fail
1.9
Fail
—
2.3
Fail
1.9
Fail
1.7
Fail
1.2
Fail
2.3
Fail
—
1.3
Fail
1.3
Fail
1.0
Fail
1.9
Fail
1.3
Fail
—
White BG
2.5Fail
3.4AA Large
1.8Fail
4.1AA Large
3.3AA Large
Black BG
8.4AAA
6.2AA
11.8AAA
5.1AA
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C33B
99986B
DADA7D
818173
A8A747

Deuteranopia

CAD141
9B9D6E
DEE381
818273
ADB34B

Tritanopia

EA4F54
A57274
F48B8E
857575
C85456

Achromatopsia

9D9D9D
8C8C8C
C0C0C0
7D7D7D
8A8A8A

Shades & Tints Shades & Tints

#EF8C21

Dark
Light

#A78663

Dark
Light

#F7B56B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ef8c21;
  --color-2: #a78663;
  --color-3: #f7b56b;
  --color-4: #857b70;
  --color-5: #cc7937;
}

SCSS

$color-1: #ef8c21;
$color-2: #a78663;
$color-3: #f7b56b;
$color-4: #857b70;
$color-5: #cc7937;

TAILWIND

colors: {
  'brand-1': '#ef8c21',
  'brand-2': '#a78663',
  'brand-3': '#f7b56b',
  'brand-4': '#857b70',
  'brand-5': '#cc7937',
}

RGB Array

[239, 140, 33], [167, 134, 99], [247, 181, 107], [133, 123, 112], [204, 121, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #EF8C21, #A78663, #F7B56B, #857B70, #CC7937 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: #ef8c21; --color-2: #a78663; --color-3: #f7b56b; --color-4: #857b70; --color-5: #cc7937. 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