← Back to Editor

#F3D774 · #FFEA8D · #FFFBE9 · #B2C6CD · #86A3B7

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

#F3D774

Ginger · Khaki · Sunflower

HEX
#F3D774
RGB
rgb(243, 215, 116)
HSL
hsl(47, 84%, 70%)
HSB
hsb(47, 52%, 95%)
CMYK
cmyk(0%, 12%, 52%, 5%)
Oklch
oklch(88.3% 0.123 93.9)

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

#FFEA8D

Goose Yellow · Khaki · Lemon Cream

HEX
#FFEA8D
RGB
rgb(255, 234, 141)
HSL
hsl(49, 100%, 78%)
HSB
hsb(49, 45%, 100%)
CMYK
cmyk(0%, 8%, 45%, 0%)
Oklch
oklch(93.4% 0.116 97.0)

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

#FFFBE9

Goose Yellow · SeaShell · Lemon Cream

HEX
#FFFBE9
RGB
rgb(255, 251, 233)
HSL
hsl(49, 100%, 96%)
HSB
hsb(49, 9%, 100%)
CMYK
cmyk(0%, 2%, 9%, 0%)
Oklch
oklch(98.6% 0.024 96.6)

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

#B2C6CD

Sky Blue · LightSteelBlue · Lake Green

HEX
#B2C6CD
RGB
rgb(178, 198, 205)
HSL
hsl(196, 21%, 75%)
HSB
hsb(196, 13%, 80%)
CMYK
cmyk(13%, 3%, 0%, 20%)
Oklch
oklch(81.4% 0.024 220.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#86A3B7

Sky Blue · DarkGray · Cobalt Blue

HEX
#86A3B7
RGB
rgb(134, 163, 183)
HSL
hsl(204, 25%, 62%)
HSB
hsb(204, 27%, 72%)
CMYK
cmyk(27%, 11%, 0%, 28%)
Oklch
oklch(70.0% 0.044 238.4)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3D774
728EF3

Analogous

F39772
F3D774
CEF372

Triadic

F3D774
72F3D7
D772F3

Split-Comp.

F3D774
72CEF3
9772F3

Tetradic

F3D774
72F397
728EF3
F372CE

Contrast Matrix WCAG 2.1 Contrast

F3D774
FFEA8D
FFFBE9
B2C6CD
86A3B7
—
1.2
Fail
1.4
Fail
1.2
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
2.2
Fail
1.4
Fail
1.2
Fail
—
1.7
Fail
2.5
Fail
1.2
Fail
1.5
Fail
1.7
Fail
—
1.5
Fail
1.9
Fail
2.2
Fail
2.5
Fail
1.5
Fail
—
White BG
1.4Fail
1.2Fail
1.0Fail
1.8Fail
2.6Fail
Black BG
14.8AAA
17.4AAA
20.2AAA
11.9AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E78C
F6F6A4
FDFDED
BBBBCB
9393B2

Deuteranopia

E9EB92
F7F9A9
FEFEEE
BAB8CB
918FB1

Tritanopia

F29FA3
FEB5B9
FFF1F2
B3CACA
87AEAE

Achromatopsia

D4D4D4
E6E6E6
FAFAFA
C1C1C1
9D9D9D

Shades & Tints Shades & Tints

#F3D774

Dark
Light

#FFEA8D

Dark
Light

#FFFBE9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3d774;
  --color-2: #ffea8d;
  --color-3: #fffbe9;
  --color-4: #b2c6cd;
  --color-5: #86a3b7;
}

SCSS

$color-1: #f3d774;
$color-2: #ffea8d;
$color-3: #fffbe9;
$color-4: #b2c6cd;
$color-5: #86a3b7;

TAILWIND

colors: {
  'brand-1': '#f3d774',
  'brand-2': '#ffea8d',
  'brand-3': '#fffbe9',
  'brand-4': '#b2c6cd',
  'brand-5': '#86a3b7',
}

RGB Array

[243, 215, 116], [255, 234, 141], [255, 251, 233], [178, 198, 205], [134, 163, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3D774, #FFEA8D, #FFFBE9, #B2C6CD, #86A3B7 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. 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: #f3d774; --color-2: #ffea8d; --color-3: #fffbe9; --color-4: #b2c6cd; --color-5: #86a3b7. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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