← Back to Editor

#FEC56C · #F9870A · #7C4E37 · #93BA9F · #FFECC5

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

#FEC56C

Goose Yellow · SandyBrown · Warm Sun

HEX
#FEC56C
RGB
rgb(254, 197, 108)
HSL
hsl(37, 99%, 71%)
HSB
hsb(37, 57%, 100%)
CMYK
cmyk(0%, 22%, 57%, 0%)
Oklch
oklch(85.7% 0.125 76.9)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F9870A

Ginger · Orange · Warm Sun

HEX
#F9870A
RGB
rgb(249, 135, 10)
HSL
hsl(31, 95%, 51%)
HSB
hsb(31, 96%, 98%)
CMYK
cmyk(0%, 46%, 96%, 2%)
Oklch
oklch(73.5% 0.176 57.1)

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

#7C4E37

Tangerine · Sienna · Amber Brown

HEX
#7C4E37
RGB
rgb(124, 78, 55)
HSL
hsl(20, 39%, 35%)
HSB
hsb(20, 56%, 49%)
CMYK
cmyk(0%, 37%, 56%, 51%)
Oklch
oklch(47.1% 0.072 47.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#93BA9F

Celadon · DarkSeaGreen · Apple Green

HEX
#93BA9F
RGB
rgb(147, 186, 159)
HSL
hsl(138, 22%, 65%)
HSB
hsb(138, 21%, 73%)
CMYK
cmyk(21%, 0%, 15%, 27%)
Oklch
oklch(75.3% 0.057 154.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#FFECC5

Goose Yellow · Bisque · Lemon Cream

HEX
#FFECC5
RGB
rgb(255, 236, 197)
HSL
hsl(40, 100%, 89%)
HSB
hsb(40, 23%, 100%)
CMYK
cmyk(0%, 7%, 23%, 0%)
Oklch
oklch(94.9% 0.055 85.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEC56C
6CA4FE

Analogous

FE7D6C
FEC56C
EDFE6C

Triadic

FEC56C
6CFEC6
C66CFE

Split-Comp.

FEC56C
6CEDFE
7D6CFE

Tetradic

FEC56C
6CFE7D
6CA4FE
FE6CED

Contrast Matrix WCAG 2.1 Contrast

FEC56C
F9870A
7C4E37
93BA9F
FFECC5
—
1.6
Fail
4.5
AA Large
1.4
Fail
1.3
Fail
1.6
Fail
—
2.8
Fail
1.1
Fail
2.1
Fail
4.5
AA Large
2.8
Fail
—
3.3
AA Large
6.0
AA
1.4
Fail
1.1
Fail
3.3
AA Large
—
1.8
Fail
1.3
Fail
2.1
Fail
6.0
AA
1.8
Fail
—
White BG
1.6Fail
2.5Fail
7.0AA
2.2Fail
1.2Fail
Black BG
13.4AAA
8.5AAA
3.0AA Large
9.8AAA
18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E582
C8C728
68683D
A4A4A6
F7F7CE

Deuteranopia

E9ED87
CED730
6B6E3E
A29FA7
F8F9D1

Tritanopia

FB9396
F34045
7A4142
95ABAC
FED6D8

Achromatopsia

CCCCCC
9B9B9B
595959
ABABAB
EDEDED

Shades & Tints Shades & Tints

#FEC56C

Dark
Light

#F9870A

Dark
Light

#7C4E37

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fec56c;
  --color-2: #f9870a;
  --color-3: #7c4e37;
  --color-4: #93ba9f;
  --color-5: #ffecc5;
}

SCSS

$color-1: #fec56c;
$color-2: #f9870a;
$color-3: #7c4e37;
$color-4: #93ba9f;
$color-5: #ffecc5;

TAILWIND

colors: {
  'brand-1': '#fec56c',
  'brand-2': '#f9870a',
  'brand-3': '#7c4e37',
  'brand-4': '#93ba9f',
  'brand-5': '#ffecc5',
}

RGB Array

[254, 197, 108], [249, 135, 10], [124, 78, 55], [147, 186, 159], [255, 236, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FEC56C, #F9870A, #7C4E37, #93BA9F, #FFECC5 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: #fec56c; --color-2: #f9870a; --color-3: #7c4e37; --color-4: #93ba9f; --color-5: #ffecc5. 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