← Back to Editor

#FCE78A · #F3CB69 · #E4BE51 · #C4A066 · #83746D

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#FCE78A

Goose Yellow · Khaki · Lemon Cream

HEX
#FCE78A
RGB
rgb(252, 231, 138)
HSL
hsl(49, 95%, 76%)
HSB
hsb(49, 45%, 99%)
CMYK
cmyk(0%, 8%, 45%, 1%)
Oklch
oklch(92.5% 0.116 97.0)

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

#F3CB69

Ginger · SandyBrown · Sunflower

HEX
#F3CB69
RGB
rgb(243, 203, 105)
HSL
hsl(43, 85%, 68%)
HSB
hsb(43, 57%, 95%)
CMYK
cmyk(0%, 16%, 57%, 5%)
Oklch
oklch(85.7% 0.125 87.4)

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

#E4BE51

Ginger · SandyBrown · Sunflower

HEX
#E4BE51
RGB
rgb(228, 190, 81)
HSL
hsl(44, 73%, 61%)
HSB
hsb(44, 64%, 89%)
CMYK
cmyk(0%, 17%, 64%, 11%)
Oklch
oklch(81.5% 0.133 89.8)

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

#C4A066

Ginger · DarkSalmon · Warm Sun

HEX
#C4A066
RGB
rgb(196, 160, 102)
HSL
hsl(37, 44%, 58%)
HSB
hsb(37, 48%, 77%)
CMYK
cmyk(0%, 18%, 48%, 23%)
Oklch
oklch(72.5% 0.087 78.7)

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

#83746D

Tangerine · Gray · Warm Gray

HEX
#83746D
RGB
rgb(131, 116, 109)
HSL
hsl(19, 9%, 47%)
HSB
hsb(19, 17%, 51%)
CMYK
cmyk(0%, 11%, 17%, 49%)
Oklch
oklch(57.1% 0.022 46.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCE78A
889DFC

Analogous

FCAC88
FCE78A
D7FC88

Triadic

FCE78A
88FCE7
E788FC

Split-Comp.

FCE78A
88D7FC
AC88FC

Tetradic

FCE78A
88FCAC
889DFC
FC88D7

Contrast Matrix WCAG 2.1 Contrast

FCE78A
F3CB69
E4BE51
C4A066
83746D
—
1.2
Fail
1.4
Fail
2.0
Fail
3.6
AA Large
1.2
Fail
—
1.2
Fail
1.6
Fail
2.9
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
2.5
Fail
2.0
Fail
1.6
Fail
1.4
Fail
—
1.8
Fail
3.6
AA Large
2.9
Fail
2.5
Fail
1.8
Fail
—
White BG
1.2Fail
1.5Fail
1.8Fail
2.5Fail
4.5AA Large
Black BG
16.9AAA
13.6AAA
11.8AAA
8.6AAA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3A1
E2E181
D4D36B
B4B474
7D7C6F

Deuteranopia

F4F6A6
E4E786
D6D972
B7B977
7D7E6F

Tritanopia

FBB2B6
F19398
E28085
C27F82
827070

Achromatopsia

E3E3E3
CCCCCC
BDBDBD
A4A4A4
787878

Shades & Tints Shades & Tints

#FCE78A

Dark
Light

#F3CB69

Dark
Light

#E4BE51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fce78a;
  --color-2: #f3cb69;
  --color-3: #e4be51;
  --color-4: #c4a066;
  --color-5: #83746d;
}

SCSS

$color-1: #fce78a;
$color-2: #f3cb69;
$color-3: #e4be51;
$color-4: #c4a066;
$color-5: #83746d;

TAILWIND

colors: {
  'brand-1': '#fce78a',
  'brand-2': '#f3cb69',
  'brand-3': '#e4be51',
  'brand-4': '#c4a066',
  'brand-5': '#83746d',
}

RGB Array

[252, 231, 138], [243, 203, 105], [228, 190, 81], [196, 160, 102], [131, 116, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FCE78A, #F3CB69, #E4BE51, #C4A066, #83746D is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #fce78a; --color-2: #f3cb69; --color-3: #e4be51; --color-4: #c4a066; --color-5: #83746d. 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. 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 cool-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