← Back to Editor

#CF570E · #A11F1F · #CE5216 · #F2A65E · #C23512

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#CF570E

Tangerine · Chocolate · Amber Brown

HEX
#CF570E
RGB
rgb(207, 87, 14)
HSL
hsl(23, 87%, 43%)
HSB
hsb(23, 93%, 81%)
CMYK
cmyk(0%, 58%, 93%, 19%)
Oklch
oklch(60.3% 0.168 44.6)

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

#A11F1F

Vermilion · Brown · Wine Red

HEX
#A11F1F
RGB
rgb(161, 31, 31)
HSL
hsl(0, 68%, 38%)
HSB
hsb(0, 81%, 63%)
CMYK
cmyk(0%, 81%, 81%, 37%)
Oklch
oklch(46.2% 0.166 26.7)

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

#CE5216

Tangerine · Chocolate · Amber Brown

HEX
#CE5216
RGB
rgb(206, 82, 22)
HSL
hsl(20, 81%, 45%)
HSB
hsb(20, 89%, 81%)
CMYK
cmyk(0%, 60%, 89%, 19%)
Oklch
oklch(59.5% 0.170 41.7)

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

#F2A65E

Apricot · SandyBrown · Warm Sun

HEX
#F2A65E
RGB
rgb(242, 166, 94)
HSL
hsl(29, 85%, 66%)
HSB
hsb(29, 61%, 95%)
CMYK
cmyk(0%, 31%, 61%, 5%)
Oklch
oklch(78.5% 0.126 62.7)

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

#C23512

Vermilion · FireBrick · Passion Red

HEX
#C23512
RGB
rgb(194, 53, 18)
HSL
hsl(12, 83%, 42%)
HSB
hsb(12, 91%, 76%)
CMYK
cmyk(0%, 73%, 91%, 24%)
Oklch
oklch(54.1% 0.183 34.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF570E
0E84CD

Analogous

CD0E25
CF570E
CDB70E

Triadic

CF570E
0ECD57
570ECD

Split-Comp.

CF570E
0ECDB7
0E25CD

Tetradic

CF570E
25CD0E
0E84CD
B70ECD

Contrast Matrix WCAG 2.1 Contrast

CF570E
A11F1F
CE5216
F2A65E
C23512
—
1.8
Fail
1.0
Fail
2.1
Fail
1.3
Fail
1.8
Fail
—
1.8
Fail
3.8
AA Large
1.4
Fail
1.0
Fail
1.8
Fail
—
2.1
Fail
1.3
Fail
2.1
Fail
3.8
AA Large
2.1
Fail
—
2.7
Fail
1.3
Fail
1.4
Fail
1.3
Fail
2.7
Fail
—
White BG
4.2AA Large
7.7AAA
4.3AA Large
2.0Fail
5.5AA
Black BG
5.0AA
2.7Fail
4.8AA
10.4AAA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9A20
69681F
989725
D1D06F
85841A

Deuteranopia

A2AB24
707A1F
A0A928
D6DB74
8D981D

Tritanopia

C92E31
9B1F1F
C83033
EE7D80
BB2123

Achromatopsia

737373
464646
707070
B5B5B5
5B5B5B

Shades & Tints Shades & Tints

#CF570E

Dark
Light

#A11F1F

Dark
Light

#CE5216

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf570e;
  --color-2: #a11f1f;
  --color-3: #ce5216;
  --color-4: #f2a65e;
  --color-5: #c23512;
}

SCSS

$color-1: #cf570e;
$color-2: #a11f1f;
$color-3: #ce5216;
$color-4: #f2a65e;
$color-5: #c23512;

TAILWIND

colors: {
  'brand-1': '#cf570e',
  'brand-2': '#a11f1f',
  'brand-3': '#ce5216',
  'brand-4': '#f2a65e',
  'brand-5': '#c23512',
}

RGB Array

[207, 87, 14], [161, 31, 31], [206, 82, 22], [242, 166, 94], [194, 53, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF570E, #A11F1F, #CE5216, #F2A65E, #C23512 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cf570e; --color-2: #a11f1f; --color-3: #ce5216; --color-4: #f2a65e; --color-5: #c23512. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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