← Back to Editor

#FCB165 · #FFE4A6 · #F7CC4A · #B3A847 · #686678

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 App

Color Details Color Details

#FCB165

Ginger · SandyBrown · Warm Sun

HEX
#FCB165
RGB
rgb(252, 177, 101)
HSL
hsl(30, 96%, 69%)
HSB
hsb(30, 60%, 99%)
CMYK
cmyk(0%, 30%, 60%, 1%)
Oklch
oklch(81.7% 0.127 64.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FFE4A6

Goose Yellow · Wheat · Lemon Cream

HEX
#FFE4A6
RGB
rgb(255, 228, 166)
HSL
hsl(42, 100%, 83%)
HSB
hsb(42, 35%, 100%)
CMYK
cmyk(0%, 11%, 35%, 0%)
Oklch
oklch(92.7% 0.084 87.1)

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

#F7CC4A

Ginger · SandyBrown · Sunflower

HEX
#F7CC4A
RGB
rgb(247, 204, 74)
HSL
hsl(45, 92%, 63%)
HSB
hsb(45, 70%, 97%)
CMYK
cmyk(0%, 17%, 70%, 3%)
Oklch
oklch(86.0% 0.150 90.2)

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

#B3A847

Autumn Sage · GoldenRod · Honey Gold

HEX
#B3A847
RGB
rgb(179, 168, 71)
HSL
hsl(54, 43%, 49%)
HSB
hsb(54, 60%, 70%)
CMYK
cmyk(0%, 6%, 60%, 30%)
Oklch
oklch(72.2% 0.119 102.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#686678

Deep Indigo · DimGray · Warm Gray

HEX
#686678
RGB
rgb(104, 102, 120)
HSL
hsl(247, 8%, 44%)
HSB
hsb(247, 15%, 47%)
CMYK
cmyk(13%, 15%, 0%, 53%)
Oklch
oklch(51.9% 0.028 290.5)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCB165
64B0FC

Analogous

FC6464
FCB165
FCFC64

Triadic

FCB165
64FCB0
B064FC

Split-Comp.

FCB165
64FCFC
6464FC

Tetradic

FCB165
64FC64
64B0FC
FC64FC

Contrast Matrix WCAG 2.1 Contrast

FCB165
FFE4A6
F7CC4A
B3A847
686678
—
1.5
Fail
1.2
Fail
1.3
Fail
3.1
AA Large
1.5
Fail
—
1.2
Fail
2.0
Fail
4.5
AA Large
1.2
Fail
1.2
Fail
—
1.6
Fail
3.6
AA Large
1.3
Fail
2.0
Fail
1.6
Fail
—
2.3
Fail
3.1
AA Large
4.5
AA Large
3.6
AA Large
2.3
Fail
—
White BG
1.8Fail
1.2Fail
1.5Fail
2.4Fail
5.6AA
Black BG
11.6AAA
16.9AAA
13.7AAA
8.6AAA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDB77
F3F3B5
E4E469
AEAE5E
676774

Deuteranopia

E0E57C
F5F7B9
E7EA71
AFB064
676773

Tritanopia

F88689
FEC1C3
F58288
B27175
68706F

Achromatopsia

BFBFBF
E5E5E5
CACACA
A0A0A0
696969

Shades & Tints Shades & Tints

#FCB165

Dark
Light

#FFE4A6

Dark
Light

#F7CC4A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcb165;
  --color-2: #ffe4a6;
  --color-3: #f7cc4a;
  --color-4: #b3a847;
  --color-5: #686678;
}

SCSS

$color-1: #fcb165;
$color-2: #ffe4a6;
$color-3: #f7cc4a;
$color-4: #b3a847;
$color-5: #686678;

TAILWIND

colors: {
  'brand-1': '#fcb165',
  'brand-2': '#ffe4a6',
  'brand-3': '#f7cc4a',
  'brand-4': '#b3a847',
  'brand-5': '#686678',
}

RGB Array

[252, 177, 101], [255, 228, 166], [247, 204, 74], [179, 168, 71], [104, 102, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCB165, #FFE4A6, #F7CC4A, #B3A847, #686678 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: #fcb165; --color-2: #ffe4a6; --color-3: #f7cc4a; --color-4: #b3a847; --color-5: #686678. 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 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