← Back to Editor

#FFF5B7 · #FFC56F · #DC8E77 · #BBBD8C · #9FB99E

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 App

Color Details Color Details

#FFF5B7

Fresh Green · Bisque · Lemon Cream

HEX
#FFF5B7
RGB
rgb(255, 245, 183)
HSL
hsl(52, 100%, 86%)
HSB
hsb(52, 28%, 100%)
CMYK
cmyk(0%, 4%, 28%, 0%)
Oklch
oklch(96.3% 0.080 100.0)

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

#FFC56F

Goose Yellow · SandyBrown · Warm Sun

HEX
#FFC56F
RGB
rgb(255, 197, 111)
HSL
hsl(36, 100%, 72%)
HSB
hsb(36, 56%, 100%)
CMYK
cmyk(0%, 23%, 56%, 0%)
Oklch
oklch(85.8% 0.123 75.7)

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

#DC8E77

Peach Pink · DarkSalmon · Coral Red

HEX
#DC8E77
RGB
rgb(220, 142, 119)
HSL
hsl(14, 59%, 66%)
HSB
hsb(14, 46%, 86%)
CMYK
cmyk(0%, 35%, 46%, 14%)
Oklch
oklch(72.1% 0.101 37.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#BBBD8C

Fresh Green · Tan · Sunflower

HEX
#BBBD8C
RGB
rgb(187, 189, 140)
HSL
hsl(62, 27%, 65%)
HSB
hsb(62, 26%, 74%)
CMYK
cmyk(1%, 0%, 26%, 26%)
Oklch
oklch(78.5% 0.066 109.8)

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

#9FB99E

Celadon · DarkGray · Apple Green

HEX
#9FB99E
RGB
rgb(159, 185, 158)
HSL
hsl(118, 16%, 67%)
HSB
hsb(118, 15%, 73%)
CMYK
cmyk(14%, 0%, 15%, 27%)
Oklch
oklch(75.9% 0.048 144.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF5B7
B8C1FF

Analogous

FFD2B8
FFF5B7
E5FFB8

Triadic

FFF5B7
B8FFF5
F5B8FF

Split-Comp.

FFF5B7
B8E5FF
D2B8FF

Tetradic

FFF5B7
B8FFD2
B8C1FF
FFB8E5

Contrast Matrix WCAG 2.1 Contrast

FFF5B7
FFC56F
DC8E77
BBBD8C
9FB99E
—
1.4
Fail
2.3
Fail
1.8
Fail
1.9
Fail
1.4
Fail
—
1.6
Fail
1.3
Fail
1.4
Fail
2.3
Fail
1.6
Fail
—
1.3
Fail
1.2
Fail
1.8
Fail
1.3
Fail
1.3
Fail
—
1.1
Fail
1.9
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
White BG
1.1Fail
1.6Fail
2.6Fail
1.9Fail
2.1Fail
Black BG
19.0AAA
13.5AAA
8.2AAA
10.8AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBC6
E6E584
BABA7D
BCBC98
AAAAA5

Deuteranopia

FBFCCA
E9EE89
BFC57E
BCBC9B
A9A7A6

Tritanopia

FFD2D4
FC9498
D88182
BBA1A3
A0AAAB

Achromatopsia

F1F1F1
CDCDCD
A3A3A3
B7B7B7
AEAEAE

Shades & Tints Shades & Tints

#FFF5B7

Dark
Light

#FFC56F

Dark
Light

#DC8E77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff5b7;
  --color-2: #ffc56f;
  --color-3: #dc8e77;
  --color-4: #bbbd8c;
  --color-5: #9fb99e;
}

SCSS

$color-1: #fff5b7;
$color-2: #ffc56f;
$color-3: #dc8e77;
$color-4: #bbbd8c;
$color-5: #9fb99e;

TAILWIND

colors: {
  'brand-1': '#fff5b7',
  'brand-2': '#ffc56f',
  'brand-3': '#dc8e77',
  'brand-4': '#bbbd8c',
  'brand-5': '#9fb99e',
}

RGB Array

[255, 245, 183], [255, 197, 111], [220, 142, 119], [187, 189, 140], [159, 185, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF5B7, #FFC56F, #DC8E77, #BBBD8C, #9FB99E 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: #fff5b7; --color-2: #ffc56f; --color-3: #dc8e77; --color-4: #bbbd8c; --color-5: #9fb99e. 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