← Back to Editor

#F27E57 · #F70000 · #DB65A8 · #DB6565 · #F2640C

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

#F27E57

Apricot · Coral · Warm Sun

HEX
#F27E57
RGB
rgb(242, 126, 87)
HSL
hsl(15, 86%, 65%)
HSB
hsb(15, 64%, 95%)
CMYK
cmyk(0%, 48%, 64%, 5%)
Oklch
oklch(71.7% 0.152 39.1)

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

#F70000

Vermilion · Red · Passion Red

HEX
#F70000
RGB
rgb(247, 0, 0)
HSL
hsl(0, 100%, 48%)
HSB
hsb(0, 100%, 97%)
CMYK
cmyk(0%, 100%, 100%, 3%)
Oklch
oklch(61.3% 0.252 29.2)

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

#DB65A8

Mauve · Orchid · Rose Pink

HEX
#DB65A8
RGB
rgb(219, 101, 168)
HSL
hsl(326, 62%, 63%)
HSB
hsb(326, 54%, 86%)
CMYK
cmyk(0%, 54%, 23%, 14%)
Oklch
oklch(66.9% 0.165 347.3)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#DB6565

Peach Pink · Salmon · Coral Red

HEX
#DB6565
RGB
rgb(219, 101, 101)
HSL
hsl(0, 62%, 63%)
HSB
hsb(0, 54%, 86%)
CMYK
cmyk(0%, 54%, 54%, 14%)
Oklch
oklch(65.0% 0.149 22.1)

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

#F2640C

Tangerine · OrangeRed · Amber Brown

HEX
#F2640C
RGB
rgb(242, 100, 12)
HSL
hsl(23, 91%, 50%)
HSB
hsb(23, 95%, 95%)
CMYK
cmyk(0%, 59%, 95%, 5%)
Oklch
oklch(67.4% 0.193 44.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F27E57
59CCF3

Analogous

F3597F
F27E57
F3CC59

Triadic

F27E57
59F37F
7F59F3

Split-Comp.

F27E57
59F3CC
597FF3

Tetradic

F27E57
7FF359
59CCF3
CC59F3

Contrast Matrix WCAG 2.1 Contrast

F27E57
F70000
DB65A8
DB6565
F2640C
—
1.6
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.6
Fail
—
1.3
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.3
Fail
—
1.1
Fail
1.0
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.0
Fail
1.1
Fail
—
White BG
2.7Fail
4.2AA Large
3.3AA Large
3.5AA Large
3.2AA Large
Black BG
7.9AAA
5.0AA
6.4AA
6.1AA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BF60
8C8A00
A8A798
A8A765
B5B321

Deuteranopia

C7CF63
9AAD00
AFB894
AFB865
BDC726

Tritanopia

EC686A
EB0000
D58B88
D56565
EB3236

Achromatopsia

9C9C9C
4A4A4A
909090
888888
848484

Shades & Tints Shades & Tints

#F27E57

Dark
Light

#F70000

Dark
Light

#DB65A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f27e57;
  --color-2: #f70000;
  --color-3: #db65a8;
  --color-4: #db6565;
  --color-5: #f2640c;
}

SCSS

$color-1: #f27e57;
$color-2: #f70000;
$color-3: #db65a8;
$color-4: #db6565;
$color-5: #f2640c;

TAILWIND

colors: {
  'brand-1': '#f27e57',
  'brand-2': '#f70000',
  'brand-3': '#db65a8',
  'brand-4': '#db6565',
  'brand-5': '#f2640c',
}

RGB Array

[242, 126, 87], [247, 0, 0], [219, 101, 168], [219, 101, 101], [242, 100, 12]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F27E57, #F70000, #DB65A8, #DB6565, #F2640C 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: #f27e57; --color-2: #f70000; --color-3: #db65a8; --color-4: #db6565; --color-5: #f2640c. 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