← Back to Editor

#FFC564 · #FF9463 · #D87065 · #A54D5D · #562857

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

#FFC564

Ginger · SandyBrown · Warm Sun

HEX
#FFC564
RGB
rgb(255, 197, 100)
HSL
hsl(38, 100%, 70%)
HSB
hsb(38, 61%, 100%)
CMYK
cmyk(0%, 23%, 61%, 0%)
Oklch
oklch(85.7% 0.132 78.3)

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

#FF9463

Apricot · SandyBrown · Warm Sun

HEX
#FF9463
RGB
rgb(255, 148, 99)
HSL
hsl(19, 100%, 69%)
HSB
hsb(19, 61%, 100%)
CMYK
cmyk(0%, 42%, 61%, 0%)
Oklch
oklch(77.0% 0.144 44.7)

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

#D87065

Peach Pink · LightCoral · Coral Red

HEX
#D87065
RGB
rgb(216, 112, 101)
HSL
hsl(6, 60%, 62%)
HSB
hsb(6, 53%, 85%)
CMYK
cmyk(0%, 48%, 53%, 15%)
Oklch
oklch(66.2% 0.132 27.4)

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

#A54D5D

Crimson · Sienna · Passion Red

HEX
#A54D5D
RGB
rgb(165, 77, 93)
HSL
hsl(349, 36%, 47%)
HSB
hsb(349, 53%, 65%)
CMYK
cmyk(0%, 53%, 44%, 35%)
Oklch
oklch(53.5% 0.117 10.5)

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

#562857

Dark Plum · DarkSlateGray · Eggplant

HEX
#562857
RGB
rgb(86, 40, 87)
HSL
hsl(299, 37%, 25%)
HSB
hsb(299, 54%, 34%)
CMYK
cmyk(1%, 54%, 0%, 66%)
Oklch
oklch(35.9% 0.096 326.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFC564
669EFF

Analogous

FF7A66
FFC564
EBFF66

Triadic

FFC564
66FFC7
C766FF

Split-Comp.

FFC564
66EBFF
7A66FF

Tetradic

FFC564
66FF7A
669EFF
FF66EB

Contrast Matrix WCAG 2.1 Contrast

FFC564
FF9463
D87065
A54D5D
562857
—
1.4
Fail
2.1
Fail
3.5
AA Large
7.3
AAA
1.4
Fail
—
1.5
Fail
2.5
Fail
5.3
AA
2.1
Fail
1.5
Fail
—
1.7
Fail
3.5
AA Large
3.5
AA Large
2.5
Fail
1.7
Fail
—
2.1
Fail
7.3
AAA
5.3
AA
3.5
AA Large
2.1
Fail
—
White BG
1.6Fail
2.2Fail
3.3AA Large
5.5AA
11.4AAA
Black BG
13.4AAA
9.7AAA
6.4AA
3.8AA Large
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E57B
D1D06F
ABAA68
7F7E59
42424C

Deuteranopia

E9EE81
D7DF72
B1B968
848B58
454849

Tritanopia

FC8E92
FA787A
D36A6A
A15655
544341

Achromatopsia

CBCBCB
AEAEAE
8E8E8E
696969
3B3B3B

Shades & Tints Shades & Tints

#FFC564

Dark
Light

#FF9463

Dark
Light

#D87065

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffc564;
  --color-2: #ff9463;
  --color-3: #d87065;
  --color-4: #a54d5d;
  --color-5: #562857;
}

SCSS

$color-1: #ffc564;
$color-2: #ff9463;
$color-3: #d87065;
$color-4: #a54d5d;
$color-5: #562857;

TAILWIND

colors: {
  'brand-1': '#ffc564',
  'brand-2': '#ff9463',
  'brand-3': '#d87065',
  'brand-4': '#a54d5d',
  'brand-5': '#562857',
}

RGB Array

[255, 197, 100], [255, 148, 99], [216, 112, 101], [165, 77, 93], [86, 40, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFC564, #FF9463, #D87065, #A54D5D, #562857 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: #ffc564; --color-2: #ff9463; --color-3: #d87065; --color-4: #a54d5d; --color-5: #562857. 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