← Back to Editor

#C70834 · #DA2C54 · #FD5E4F · #F5BC79 · #FDDEA3

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

#C70834

Vermilion · Crimson · Passion Red

HEX
#C70834
RGB
rgb(199, 8, 52)
HSL
hsl(346, 92%, 41%)
HSB
hsb(346, 96%, 78%)
CMYK
cmyk(0%, 96%, 74%, 22%)
Oklch
oklch(52.7% 0.209 20.0)

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

#DA2C54

Vermilion · Crimson · Passion Red

HEX
#DA2C54
RGB
rgb(218, 44, 84)
HSL
hsl(346, 70%, 51%)
HSB
hsb(346, 80%, 85%)
CMYK
cmyk(0%, 80%, 61%, 15%)
Oklch
oklch(58.4% 0.207 14.3)

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

#FD5E4F

Peach Pink · Tomato · Coral Red

HEX
#FD5E4F
RGB
rgb(253, 94, 79)
HSL
hsl(5, 98%, 65%)
HSB
hsb(5, 69%, 99%)
CMYK
cmyk(0%, 63%, 69%, 1%)
Oklch
oklch(68.8% 0.197 28.6)

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

#F5BC79

Goose Yellow · BurlyWood · Warm Sun

HEX
#F5BC79
RGB
rgb(245, 188, 121)
HSL
hsl(32, 86%, 72%)
HSB
hsb(32, 51%, 96%)
CMYK
cmyk(0%, 23%, 51%, 4%)
Oklch
oklch(83.3% 0.107 70.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#FDDEA3

Goose Yellow · Wheat · Peach Orange

HEX
#FDDEA3
RGB
rgb(253, 222, 163)
HSL
hsl(39, 96%, 82%)
HSB
hsb(39, 36%, 99%)
CMYK
cmyk(0%, 12%, 36%, 1%)
Oklch
oklch(91.3% 0.083 83.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C70834
08C99C

Analogous

C90895
C70834
C93C08

Triadic

C70834
35C908
0835C9

Split-Comp.

C70834
08C93C
0895C9

Tetradic

C70834
95C908
08C99C
3C08C9

Contrast Matrix WCAG 2.1 Contrast

C70834
DA2C54
FD5E4F
F5BC79
FDDEA3
—
1.3
Fail
2.0
Fail
3.5
AA Large
4.6
AA
1.3
Fail
—
1.5
Fail
2.8
Fail
3.6
AA Large
2.0
Fail
1.5
Fail
—
1.8
Fail
2.3
Fail
3.5
AA Large
2.8
Fail
1.8
Fail
—
1.3
Fail
4.6
AA
3.6
AA Large
2.3
Fail
1.3
Fail
—
White BG
6.0AA
4.7AA
3.0AA Large
1.7Fail
1.3Fail
Black BG
3.5AA Large
4.5AA Large
6.9AA
12.4AAA
16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

747329
8F8D4A
B8B753
DCDC89
F0EFB1

Deuteranopia

7F8E27
99A648
C1CD54
E0E48D
F1F4B5

Tritanopia

BD211F
D14341
F55556
F29699
FBBDBF

Achromatopsia

464646
656565
8C8C8C
C5C5C5
E1E1E1

Shades & Tints Shades & Tints

#C70834

Dark
Light

#DA2C54

Dark
Light

#FD5E4F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c70834;
  --color-2: #da2c54;
  --color-3: #fd5e4f;
  --color-4: #f5bc79;
  --color-5: #fddea3;
}

SCSS

$color-1: #c70834;
$color-2: #da2c54;
$color-3: #fd5e4f;
$color-4: #f5bc79;
$color-5: #fddea3;

TAILWIND

colors: {
  'brand-1': '#c70834',
  'brand-2': '#da2c54',
  'brand-3': '#fd5e4f',
  'brand-4': '#f5bc79',
  'brand-5': '#fddea3',
}

RGB Array

[199, 8, 52], [218, 44, 84], [253, 94, 79], [245, 188, 121], [253, 222, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C70834, #DA2C54, #FD5E4F, #F5BC79, #FDDEA3 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: #c70834; --color-2: #da2c54; --color-3: #fd5e4f; --color-4: #f5bc79; --color-5: #fddea3. 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