← Back to Editor

#4C9F97 · #525A2B · #E0C658 · #FCF2AB · #FFFFD0

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

#4C9F97

Mineral Blue · CadetBlue · Mint Ice

HEX
#4C9F97
RGB
rgb(76, 159, 151)
HSL
hsl(174, 35%, 46%)
HSB
hsb(174, 52%, 62%)
CMYK
cmyk(52%, 0%, 5%, 38%)
Oklch
oklch(64.9% 0.082 187.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#525A2B

Grass Green · DarkOliveGreen · Forest Green

HEX
#525A2B
RGB
rgb(82, 90, 43)
HSL
hsl(70, 35%, 26%)
HSB
hsb(70, 52%, 35%)
CMYK
cmyk(9%, 0%, 52%, 65%)
Oklch
oklch(44.9% 0.069 117.2)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#E0C658

Ginger · SandyBrown · Sunflower

HEX
#E0C658
RGB
rgb(224, 198, 88)
HSL
hsl(49, 69%, 61%)
HSB
hsb(49, 61%, 88%)
CMYK
cmyk(0%, 12%, 61%, 12%)
Oklch
oklch(82.8% 0.132 96.1)

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

#FCF2AB

Fresh Green · Wheat · Lemon Cream

HEX
#FCF2AB
RGB
rgb(252, 242, 171)
HSL
hsl(53, 93%, 83%)
HSB
hsb(53, 32%, 99%)
CMYK
cmyk(0%, 4%, 32%, 1%)
Oklch
oklch(95.3% 0.090 101.1)

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

#FFFFD0

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFD0
RGB
rgb(255, 255, 208)
HSL
hsl(60, 100%, 91%)
HSB
hsb(60, 18%, 100%)
CMYK
cmyk(0%, 0%, 18%, 0%)
Oklch
oklch(98.8% 0.060 107.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C9F97
9E4C54

Analogous

4C9E6D
4C9F97
4C7E9E

Triadic

4C9F97
964C9E
9E964C

Split-Comp.

4C9F97
9E4C7E
9E6D4C

Tetradic

4C9F97
6D4C9E
9E4C54
7E9E4C

Contrast Matrix WCAG 2.1 Contrast

4C9F97
525A2B
E0C658
FCF2AB
FFFFD0
—
2.4
Fail
1.8
Fail
2.7
Fail
3.0
AA Large
2.4
Fail
—
4.3
AA Large
6.5
AA
7.2
AAA
1.8
Fail
4.3
AA Large
—
1.5
Fail
1.7
Fail
2.7
Fail
6.5
AA
1.5
Fail
—
1.1
Fail
3.0
AA Large
7.2
AAA
1.7
Fail
1.1
Fail
—
White BG
3.1AA Large
7.4AAA
1.7Fail
1.1Fail
1.0Fail
Black BG
6.7AA
2.9Fail
12.4AAA
18.4AAA
20.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

707199
555636
D5D573
F8F8BC
FFFFDB

Deuteranopia

6B6599
555439
D6D879
F8F9C0
FFFFDE

Tritanopia

509A9B
523F41
DF888C
FBCACD
FFE4E6

Achromatopsia

858585
525252
C1C1C1
EDEDED
FAFAFA

Shades & Tints Shades & Tints

#4C9F97

Dark
Light

#525A2B

Dark
Light

#E0C658

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c9f97;
  --color-2: #525a2b;
  --color-3: #e0c658;
  --color-4: #fcf2ab;
  --color-5: #ffffd0;
}

SCSS

$color-1: #4c9f97;
$color-2: #525a2b;
$color-3: #e0c658;
$color-4: #fcf2ab;
$color-5: #ffffd0;

TAILWIND

colors: {
  'brand-1': '#4c9f97',
  'brand-2': '#525a2b',
  'brand-3': '#e0c658',
  'brand-4': '#fcf2ab',
  'brand-5': '#ffffd0',
}

RGB Array

[76, 159, 151], [82, 90, 43], [224, 198, 88], [252, 242, 171], [255, 255, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4C9F97, #525A2B, #E0C658, #FCF2AB, #FFFFD0 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: #4c9f97; --color-2: #525a2b; --color-3: #e0c658; --color-4: #fcf2ab; --color-5: #ffffd0. 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