← Back to Editor

#FF7213 · #F17863 · #30161C · #E82C23 · #7AB18A

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 AppData Visualization

Color Details Color Details

#FF7213

Tangerine · Chocolate · Warm Sun

HEX
#FF7213
RGB
rgb(255, 114, 19)
HSL
hsl(24, 100%, 54%)
HSB
hsb(24, 93%, 100%)
CMYK
cmyk(0%, 55%, 93%, 0%)
Oklch
oklch(71.2% 0.194 46.4)

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

#F17863

Peach Pink · Salmon · Coral Red

HEX
#F17863
RGB
rgb(241, 120, 99)
HSL
hsl(9, 84%, 67%)
HSB
hsb(9, 59%, 95%)
CMYK
cmyk(0%, 50%, 59%, 5%)
Oklch
oklch(70.8% 0.153 31.4)

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

#30161C

Crimson · Black · Deep Berry

HEX
#30161C
RGB
rgb(48, 22, 28)
HSL
hsl(346, 37%, 14%)
HSB
hsb(346, 54%, 19%)
CMYK
cmyk(0%, 54%, 42%, 81%)
Oklch
oklch(24.0% 0.043 6.0)

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

#E82C23

Vermilion · Crimson · Passion Red

HEX
#E82C23
RGB
rgb(232, 44, 35)
HSL
hsl(3, 81%, 52%)
HSB
hsb(3, 85%, 91%)
CMYK
cmyk(0%, 81%, 85%, 9%)
Oklch
oklch(60.2% 0.223 28.8)

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

#7AB18A

Celadon · DarkSeaGreen · Olive Green

HEX
#7AB18A
RGB
rgb(122, 177, 138)
HSL
hsl(137, 26%, 59%)
HSB
hsb(137, 31%, 69%)
CMYK
cmyk(31%, 0%, 22%, 31%)
Oklch
oklch(71.1% 0.081 153.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF7213
14A1FF

Analogous

FF142C
FF7213
FFE814

Triadic

FF7213
14FF72
7214FF

Split-Comp.

FF7213
14FFE8
142CFF

Tetradic

FF7213
2CFF14
14A1FF
E814FF

Contrast Matrix WCAG 2.1 Contrast

FF7213
F17863
30161C
E82C23
7AB18A
—
1.0
Fail
6.1
AA
1.6
Fail
1.1
Fail
1.0
Fail
—
6.1
AA
1.6
Fail
1.1
Fail
6.1
AA
6.1
AA
—
3.8
AA Large
6.7
AA
1.6
Fail
1.6
Fail
3.8
AA Large
—
1.8
Fail
1.1
Fail
1.1
Fail
6.7
AA
1.8
Fail
—
White BG
2.7Fail
2.8Fail
16.7AAA
4.4AA Large
2.5Fail
Black BG
7.7AAA
7.6AAA
1.3Fail
4.8AA
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C12A
BDBC68
25251B
979525
929293

Deuteranopia

CAD52F
C4CD69
26281A
A2B026
8F8B96

Tritanopia

F83C40
EB6C6D
2F1919
DF2727
7D9B9D

Achromatopsia

919191
9A9A9A
1E1E1E
636363
9C9C9C

Shades & Tints Shades & Tints

#FF7213

Dark
Light

#F17863

Dark
Light

#30161C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff7213;
  --color-2: #f17863;
  --color-3: #30161c;
  --color-4: #e82c23;
  --color-5: #7ab18a;
}

SCSS

$color-1: #ff7213;
$color-2: #f17863;
$color-3: #30161c;
$color-4: #e82c23;
$color-5: #7ab18a;

TAILWIND

colors: {
  'brand-1': '#ff7213',
  'brand-2': '#f17863',
  'brand-3': '#30161c',
  'brand-4': '#e82c23',
  'brand-5': '#7ab18a',
}

RGB Array

[255, 114, 19], [241, 120, 99], [48, 22, 28], [232, 44, 35], [122, 177, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF7213, #F17863, #30161C, #E82C23, #7AB18A is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #ff7213; --color-2: #f17863; --color-3: #30161c; --color-4: #e82c23; --color-5: #7ab18a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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