← Back to Editor

#ACB177 · #FDFDB3 · #FAE578 · #D96450 · #542B4D

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

#ACB177

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ACB177
RGB
rgb(172, 177, 119)
HSL
hsl(65, 27%, 58%)
HSB
hsb(65, 33%, 69%)
CMYK
cmyk(3%, 0%, 33%, 31%)
Oklch
oklch(74.2% 0.078 112.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FDFDB3

Fresh Green · Bisque · Lemon Cream

HEX
#FDFDB3
RGB
rgb(253, 253, 179)
HSL
hsl(60, 95%, 85%)
HSB
hsb(60, 29%, 99%)
CMYK
cmyk(0%, 0%, 29%, 1%)
Oklch
oklch(97.7% 0.093 108.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FAE578

Fresh Green · Khaki · Sunflower

HEX
#FAE578
RGB
rgb(250, 229, 120)
HSL
hsl(50, 93%, 73%)
HSB
hsb(50, 52%, 98%)
CMYK
cmyk(0%, 8%, 52%, 2%)
Oklch
oklch(91.7% 0.132 98.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D96450

Vermilion · Tomato · Passion Red

HEX
#D96450
RGB
rgb(217, 100, 80)
HSL
hsl(9, 64%, 58%)
HSB
hsb(9, 63%, 85%)
CMYK
cmyk(0%, 54%, 63%, 15%)
Oklch
oklch(64.2% 0.151 31.5)

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

#542B4D

Rose Purple · DarkSlateGray · Eggplant

HEX
#542B4D
RGB
rgb(84, 43, 77)
HSL
hsl(310, 32%, 25%)
HSB
hsb(310, 49%, 33%)
CMYK
cmyk(0%, 49%, 8%, 67%)
Oklch
oklch(35.6% 0.078 333.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ACB177
7C77B1

Analogous

B19977
ACB177
8FB177

Triadic

ACB177
77ACB1
B177AC

Split-Comp.

ACB177
778FB1
9977B1

Tetradic

ACB177
77B199
7C77B1
B1778F

Contrast Matrix WCAG 2.1 Contrast

ACB177
FDFDB3
FAE578
D96450
542B4D
—
2.1
Fail
1.8
Fail
1.6
Fail
5.1
AA
2.1
Fail
—
1.2
Fail
3.4
AA Large
10.9
AAA
1.8
Fail
1.2
Fail
—
2.8
Fail
9.0
AAA
1.6
Fail
3.4
AA Large
2.8
Fail
—
3.2
AA Large
5.1
AA
10.9
AAA
9.0
AAA
3.2
AA Large
—
White BG
2.3Fail
1.1Fail
1.3Fail
3.6AA Large
11.5AAA
Black BG
9.3AAA
19.9AAA
16.5AAA
5.9AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAE85
FDFDC5
F1F192
A6A555
424245

Deuteranopia

AEAE88
FDFDC9
F2F499
ADB656
454843

Tritanopia

AC9093
FDD3D6
F9A7AC
D3595A
523E3D

Achromatopsia

A9A9A9
F5F5F5
DFDFDF
858585
3B3B3B

Shades & Tints Shades & Tints

#ACB177

Dark
Light

#FDFDB3

Dark
Light

#FAE578

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #acb177;
  --color-2: #fdfdb3;
  --color-3: #fae578;
  --color-4: #d96450;
  --color-5: #542b4d;
}

SCSS

$color-1: #acb177;
$color-2: #fdfdb3;
$color-3: #fae578;
$color-4: #d96450;
$color-5: #542b4d;

TAILWIND

colors: {
  'brand-1': '#acb177',
  'brand-2': '#fdfdb3',
  'brand-3': '#fae578',
  'brand-4': '#d96450',
  'brand-5': '#542b4d',
}

RGB Array

[172, 177, 119], [253, 253, 179], [250, 229, 120], [217, 100, 80], [84, 43, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ACB177, #FDFDB3, #FAE578, #D96450, #542B4D 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: #acb177; --color-2: #fdfdb3; --color-3: #fae578; --color-4: #d96450; --color-5: #542b4d. 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