← Back to Editor

#FC503D · #CC5266 · #AB5959 · #BA9463 · #FFB75C

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

#FC503D

Peach Pink · Tomato · Coral Red

HEX
#FC503D
RGB
rgb(252, 80, 61)
HSL
hsl(6, 97%, 61%)
HSB
hsb(6, 76%, 99%)
CMYK
cmyk(0%, 68%, 76%, 1%)
Oklch
oklch(66.9% 0.211 29.9)

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

#CC5266

Crimson · Tomato · Passion Red

HEX
#CC5266
RGB
rgb(204, 82, 102)
HSL
hsl(350, 54%, 56%)
HSB
hsb(350, 60%, 80%)
CMYK
cmyk(0%, 60%, 50%, 20%)
Oklch
oklch(60.3% 0.155 13.1)

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

#AB5959

Crimson · Sienna · Passion Red

HEX
#AB5959
RGB
rgb(171, 89, 89)
HSL
hsl(0, 33%, 51%)
HSB
hsb(0, 48%, 67%)
CMYK
cmyk(0%, 48%, 48%, 33%)
Oklch
oklch(56.2% 0.107 21.1)

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

#BA9463

Ginger · DarkSalmon · Warm Sun

HEX
#BA9463
RGB
rgb(186, 148, 99)
HSL
hsl(34, 39%, 56%)
HSB
hsb(34, 47%, 73%)
CMYK
cmyk(0%, 20%, 47%, 27%)
Oklch
oklch(69.1% 0.080 72.9)

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

#FFB75C

Ginger · SandyBrown · Warm Sun

HEX
#FFB75C
RGB
rgb(255, 183, 92)
HSL
hsl(33, 100%, 68%)
HSB
hsb(33, 64%, 100%)
CMYK
cmyk(0%, 28%, 64%, 0%)
Oklch
oklch(83.0% 0.136 70.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC503D
3BE9FC

Analogous

FC3B88
FC503D
FCAF3B

Triadic

FC503D
3BFC4E
4E3BFC

Split-Comp.

FC503D
3BFCAF
3B88FC

Tetradic

FC503D
88FC3B
3BE9FC
AF3BFC

Contrast Matrix WCAG 2.1 Contrast

FC503D
CC5266
AB5959
BA9463
FFB75C
—
1.3
Fail
1.5
Fail
1.2
Fail
1.9
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
2.5
Fail
1.5
Fail
1.2
Fail
—
1.7
Fail
2.8
Fail
1.2
Fail
1.5
Fail
1.7
Fail
—
1.6
Fail
1.9
Fail
2.5
Fail
2.8
Fail
1.6
Fail
—
White BG
3.3AA Large
4.2AA Large
4.9AA
2.8Fail
1.7Fail
Black BG
6.4AA
5.0AA
4.3AA Large
7.5AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B042
979661
878759
AAA96F
E0DF72

Deuteranopia

BCC843
9EA760
8C9259
ACAF72
E4E977

Tritanopia

F34546
C65D5D
A75959
B8787A
FB8387

Achromatopsia

818181
797979
727272
9A9A9A
C2C2C2

Shades & Tints Shades & Tints

#FC503D

Dark
Light

#CC5266

Dark
Light

#AB5959

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc503d;
  --color-2: #cc5266;
  --color-3: #ab5959;
  --color-4: #ba9463;
  --color-5: #ffb75c;
}

SCSS

$color-1: #fc503d;
$color-2: #cc5266;
$color-3: #ab5959;
$color-4: #ba9463;
$color-5: #ffb75c;

TAILWIND

colors: {
  'brand-1': '#fc503d',
  'brand-2': '#cc5266',
  'brand-3': '#ab5959',
  'brand-4': '#ba9463',
  'brand-5': '#ffb75c',
}

RGB Array

[252, 80, 61], [204, 82, 102], [171, 89, 89], [186, 148, 99], [255, 183, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC503D, #CC5266, #AB5959, #BA9463, #FFB75C 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: #fc503d; --color-2: #cc5266; --color-3: #ab5959; --color-4: #ba9463; --color-5: #ffb75c. 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