← Back to Editor

#FCC556 · #ABA485 · #8C877D · #756471 · #57264F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FCC556

Ginger · SandyBrown · Sunflower

HEX
#FCC556
RGB
rgb(252, 197, 86)
HSL
hsl(40, 97%, 66%)
HSB
hsb(40, 66%, 99%)
CMYK
cmyk(0%, 22%, 66%, 1%)
Oklch
oklch(85.3% 0.141 82.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#ABA485

Ginger · DarkGray · Sunflower

HEX
#ABA485
RGB
rgb(171, 164, 133)
HSL
hsl(49, 18%, 60%)
HSB
hsb(49, 22%, 67%)
CMYK
cmyk(0%, 4%, 22%, 33%)
Oklch
oklch(71.6% 0.044 96.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#8C877D

Ash · Gray · Warm Gray

HEX
#8C877D
RGB
rgb(140, 135, 125)
HSL
hsl(40, 6%, 52%)
HSB
hsb(40, 11%, 55%)
CMYK
cmyk(0%, 4%, 11%, 45%)
Oklch
oklch(62.5% 0.016 84.6)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#756471

Rose Purple · DimGray · Warm Gray

HEX
#756471
RGB
rgb(117, 100, 113)
HSL
hsl(314, 8%, 43%)
HSB
hsb(314, 15%, 46%)
CMYK
cmyk(0%, 15%, 3%, 54%)
Oklch
oklch(52.4% 0.029 334.2)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#57264F

Rose Purple · DarkSlateGray · Eggplant

HEX
#57264F
RGB
rgb(87, 38, 79)
HSL
hsl(310, 39%, 25%)
HSB
hsb(310, 56%, 34%)
CMYK
cmyk(0%, 56%, 9%, 66%)
Oklch
oklch(35.3% 0.092 333.9)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCC556
548CFC

Analogous

FC7054
FCC556
E0FC54

Triadic

FCC556
54FCC4
C454FC

Split-Comp.

FCC556
54E0FC
7054FC

Tetradic

FCC556
54FC70
548CFC
FC54E0

Contrast Matrix WCAG 2.1 Contrast

FCC556
ABA485
8C877D
756471
57264F
—
1.6
Fail
2.3
Fail
3.5
AA Large
7.4
AAA
1.6
Fail
—
1.4
Fail
2.2
Fail
4.7
AA
2.3
Fail
1.4
Fail
—
1.5
Fail
3.3
AA Large
3.5
AA Large
2.2
Fail
1.5
Fail
—
2.1
Fail
7.4
AAA
4.7
AA
3.3
AA Large
2.1
Fail
—
White BG
1.6Fail
2.5Fail
3.6AA Large
5.5AA
11.7AAA
Black BG
13.3AAA
8.4AAA
5.9AA
3.8AA Large
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E471
A8A88D
8A8A7F
6E6D6E
424145

Deuteranopia

E7EB77
A8A98E
8A8B80
6F706D
454843

Tritanopia

F9868B
AB9294
8C8182
746B6B
553D3C

Achromatopsia

C9C9C9
A3A3A3
878787
6B6B6B
393939

Shades & Tints Shades & Tints

#FCC556

Dark
Light

#ABA485

Dark
Light

#8C877D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcc556;
  --color-2: #aba485;
  --color-3: #8c877d;
  --color-4: #756471;
  --color-5: #57264f;
}

SCSS

$color-1: #fcc556;
$color-2: #aba485;
$color-3: #8c877d;
$color-4: #756471;
$color-5: #57264f;

TAILWIND

colors: {
  'brand-1': '#fcc556',
  'brand-2': '#aba485',
  'brand-3': '#8c877d',
  'brand-4': '#756471',
  'brand-5': '#57264f',
}

RGB Array

[252, 197, 86], [171, 164, 133], [140, 135, 125], [117, 100, 113], [87, 38, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCC556, #ABA485, #8C877D, #756471, #57264F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fcc556; --color-2: #aba485; --color-3: #8c877d; --color-4: #756471; --color-5: #57264f. 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 tech, SaaS, healthcare, eco industries. 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