← Back to Editor

#F2A711 · #E36702 · #E60230 · #85011C · #301213

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#F2A711

Ginger · Orange · Sunflower

HEX
#F2A711
RGB
rgb(242, 167, 17)
HSL
hsl(40, 90%, 51%)
HSB
hsb(40, 93%, 95%)
CMYK
cmyk(0%, 31%, 93%, 5%)
Oklch
oklch(78.1% 0.161 75.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E36702

Tangerine · Chocolate · Amber Brown

HEX
#E36702
RGB
rgb(227, 103, 2)
HSL
hsl(27, 98%, 45%)
HSB
hsb(27, 99%, 89%)
CMYK
cmyk(0%, 55%, 99%, 11%)
Oklch
oklch(65.5% 0.177 48.3)

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

#E60230

Vermilion · Crimson · Passion Red

HEX
#E60230
RGB
rgb(230, 2, 48)
HSL
hsl(348, 98%, 45%)
HSB
hsb(348, 99%, 90%)
CMYK
cmyk(0%, 99%, 79%, 10%)
Oklch
oklch(58.4% 0.235 23.0)

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

#85011C

Vermilion · Maroon · Wine Red

HEX
#85011C
RGB
rgb(133, 1, 28)
HSL
hsl(348, 99%, 26%)
HSB
hsb(348, 99%, 52%)
CMYK
cmyk(0%, 99%, 79%, 48%)
Oklch
oklch(39.0% 0.156 21.2)

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

#301213

Crimson · Black · Deep Berry

HEX
#301213
RGB
rgb(48, 18, 19)
HSL
hsl(358, 45%, 13%)
HSB
hsb(358, 63%, 19%)
CMYK
cmyk(0%, 63%, 60%, 81%)
Oklch
oklch(22.9% 0.049 19.7)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2A711
125DF3

Analogous

F33712
F2A711
CDF312

Triadic

F2A711
12F3A8
A812F3

Split-Comp.

F2A711
12CDF3
3712F3

Tetradic

F2A711
12F337
125DF3
F312CD

Contrast Matrix WCAG 2.1 Contrast

F2A711
E36702
E60230
85011C
301213
—
1.7
Fail
2.3
Fail
5.1
AA
8.4
AAA
1.7
Fail
—
1.4
Fail
3.1
AA Large
5.1
AA
2.3
Fail
1.4
Fail
—
2.2
Fail
3.6
AA Large
5.1
AA
3.1
AA Large
2.2
Fail
—
1.7
Fail
8.4
AAA
5.1
AA
3.6
AA Large
1.7
Fail
—
White BG
2.0Fail
3.4AA Large
4.8AA
10.4AAA
17.2AAA
Black BG
10.3AAA
6.2AA
4.4AA Large
2.0Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D135
ADAC1A
838125
4C4B15
232313

Deuteranopia

D6DB3E
B5BE20
91A222
545D14
252713

Tritanopia

EE5258
DD2E32
DB1C1A
7E100F
2E1313

Achromatopsia

ACACAC
818181
4B4B4B
2C2C2C
1B1B1B

Shades & Tints Shades & Tints

#F2A711

Dark
Light

#E36702

Dark
Light

#E60230

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2a711;
  --color-2: #e36702;
  --color-3: #e60230;
  --color-4: #85011c;
  --color-5: #301213;
}

SCSS

$color-1: #f2a711;
$color-2: #e36702;
$color-3: #e60230;
$color-4: #85011c;
$color-5: #301213;

TAILWIND

colors: {
  'brand-1': '#f2a711',
  'brand-2': '#e36702',
  'brand-3': '#e60230',
  'brand-4': '#85011c',
  'brand-5': '#301213',
}

RGB Array

[242, 167, 17], [227, 103, 2], [230, 2, 48], [133, 1, 28], [48, 18, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F2A711, #E36702, #E60230, #85011C, #301213 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. 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: #f2a711; --color-2: #e36702; --color-3: #e60230; --color-4: #85011c; --color-5: #301213. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 pastel-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