← Back to Editor

#F84C4C · #C41C0C · #3F0808 · #87BCA0 · #63CAC3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F84C4C

Peach Pink · Tomato · Coral Red

HEX
#F84C4C
RGB
rgb(248, 76, 76)
HSL
hsl(0, 92%, 64%)
HSB
hsb(0, 69%, 97%)
CMYK
cmyk(0%, 69%, 69%, 3%)
Oklch
oklch(66.0% 0.209 24.9)

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

#C41C0C

Vermilion · FireBrick · Passion Red

HEX
#C41C0C
RGB
rgb(196, 28, 12)
HSL
hsl(5, 88%, 41%)
HSB
hsb(5, 94%, 77%)
CMYK
cmyk(0%, 86%, 94%, 23%)
Oklch
oklch(52.5% 0.202 30.2)

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

#3F0808

Vermilion · Black · Deep Berry

HEX
#3F0808
RGB
rgb(63, 8, 8)
HSL
hsl(0, 77%, 14%)
HSB
hsb(0, 87%, 25%)
CMYK
cmyk(0%, 87%, 87%, 75%)
Oklch
oklch(24.2% 0.084 26.1)

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

#87BCA0

Celadon · DarkSeaGreen · Apple Green

HEX
#87BCA0
RGB
rgb(135, 188, 160)
HSL
hsl(148, 28%, 63%)
HSB
hsb(148, 28%, 74%)
CMYK
cmyk(28%, 0%, 15%, 26%)
Oklch
oklch(75.0% 0.069 161.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#63CAC3

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#63CAC3
RGB
rgb(99, 202, 195)
HSL
hsl(176, 49%, 59%)
HSB
hsb(176, 51%, 79%)
CMYK
cmyk(51%, 0%, 3%, 21%)
Oklch
oklch(77.6% 0.097 189.5)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F84C4C
4FF8F8

Analogous

F84FA3
F84C4C
F8A34F

Triadic

F84C4C
4FF84F
4F4FF8

Split-Comp.

F84C4C
4FF8A3
4FA3F8

Tetradic

F84C4C
A3F84F
4FF8F8
A34FF8

Contrast Matrix WCAG 2.1 Contrast

F84C4C
C41C0C
3F0808
87BCA0
63CAC3
—
1.7
Fail
4.9
AA
1.6
Fail
1.8
Fail
1.7
Fail
—
2.8
Fail
2.8
Fail
3.1
AA Large
4.9
AA
2.8
Fail
—
7.8
AAA
8.6
AAA
1.6
Fail
2.8
Fail
7.8
AAA
—
1.1
Fail
1.8
Fail
3.1
AA Large
8.6
AAA
1.1
Fail
—
White BG
3.4AA Large
6.0AA
16.8AAA
2.2Fail
2.0Fail
Black BG
6.1AA
3.5AA Large
1.2Fail
9.7AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAC4C
7B7A10
272708
9E9EA7
9091C5

Deuteranopia

B8C44C
859211
2A2E08
9B97A8
8A82C5

Tritanopia

EF4C4C
BC1314
3C0808
8AACAD
68C6C6

Achromatopsia

7F7F7F
4C4C4C
181818
A9A9A9
AAAAAA

Shades & Tints Shades & Tints

#F84C4C

Dark
Light

#C41C0C

Dark
Light

#3F0808

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f84c4c;
  --color-2: #c41c0c;
  --color-3: #3f0808;
  --color-4: #87bca0;
  --color-5: #63cac3;
}

SCSS

$color-1: #f84c4c;
$color-2: #c41c0c;
$color-3: #3f0808;
$color-4: #87bca0;
$color-5: #63cac3;

TAILWIND

colors: {
  'brand-1': '#f84c4c',
  'brand-2': '#c41c0c',
  'brand-3': '#3f0808',
  'brand-4': '#87bca0',
  'brand-5': '#63cac3',
}

RGB Array

[248, 76, 76], [196, 28, 12], [63, 8, 8], [135, 188, 160], [99, 202, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F84C4C, #C41C0C, #3F0808, #87BCA0, #63CAC3 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: #f84c4c; --color-2: #c41c0c; --color-3: #3f0808; --color-4: #87bca0; --color-5: #63cac3. 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