← Back to Editor

#FBD97B · #F4AE7B · #F78687 · #F75A8B · #DF0C80

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

#FBD97B

Goose Yellow · Khaki · Sunflower

HEX
#FBD97B
RGB
rgb(251, 217, 123)
HSL
hsl(44, 94%, 73%)
HSB
hsb(44, 51%, 98%)
CMYK
cmyk(0%, 14%, 51%, 2%)
Oklch
oklch(89.5% 0.120 90.0)

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

#F4AE7B

Apricot · LightSalmon · Warm Sun

HEX
#F4AE7B
RGB
rgb(244, 174, 123)
HSL
hsl(25, 85%, 72%)
HSB
hsb(25, 50%, 96%)
CMYK
cmyk(0%, 29%, 50%, 4%)
Oklch
oklch(80.6% 0.106 56.7)

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

#F78687

Peach Pink · LightCoral · Coral Red

HEX
#F78687
RGB
rgb(247, 134, 135)
HSL
hsl(359, 88%, 75%)
HSB
hsb(359, 46%, 97%)
CMYK
cmyk(0%, 46%, 45%, 3%)
Oklch
oklch(74.4% 0.138 20.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F75A8B

Rouge · LightCoral · Rose Pink

HEX
#F75A8B
RGB
rgb(247, 90, 139)
HSL
hsl(341, 91%, 66%)
HSB
hsb(341, 64%, 97%)
CMYK
cmyk(0%, 64%, 44%, 3%)
Oklch
oklch(68.7% 0.195 4.6)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#DF0C80

Rose Purple · MediumVioletRed · Camellia

HEX
#DF0C80
RGB
rgb(223, 12, 128)
HSL
hsl(327, 90%, 46%)
HSB
hsb(327, 95%, 87%)
CMYK
cmyk(0%, 95%, 43%, 13%)
Oklch
oklch(59.1% 0.237 356.8)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBD97B
799CFB

Analogous

FB9879
FBD97B
DDFB79

Triadic

FBD97B
79FBD8
D879FB

Split-Comp.

FBD97B
79DDFB
9879FB

Tetradic

FBD97B
79FB98
799CFB
FB79DD

Contrast Matrix WCAG 2.1 Contrast

FBD97B
F4AE7B
F78687
F75A8B
DF0C80
—
1.4
Fail
1.8
Fail
2.3
Fail
3.4
AA Large
1.4
Fail
—
1.3
Fail
1.6
Fail
2.5
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
1.9
Fail
2.3
Fail
1.6
Fail
1.3
Fail
—
1.5
Fail
3.4
AA Large
2.5
Fail
1.9
Fail
1.5
Fail
—
White BG
1.4Fail
1.9Fail
2.4Fail
3.1AA Large
4.7AA
Black BG
15.3AAA
11.2AAA
8.7AAA
6.8AA
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECEC92
D6D587
C6C587
B3B27F
848264

Deuteranopia

EEF197
DADF8A
CDD587
BCC87C
90A05D

Tritanopia

F9A4A8
F09193
F18787
EF7674
D44E49

Achromatopsia

D8D8D8
BDBDBD
A8A8A8
8F8F8F
585858

Shades & Tints Shades & Tints

#FBD97B

Dark
Light

#F4AE7B

Dark
Light

#F78687

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbd97b;
  --color-2: #f4ae7b;
  --color-3: #f78687;
  --color-4: #f75a8b;
  --color-5: #df0c80;
}

SCSS

$color-1: #fbd97b;
$color-2: #f4ae7b;
$color-3: #f78687;
$color-4: #f75a8b;
$color-5: #df0c80;

TAILWIND

colors: {
  'brand-1': '#fbd97b',
  'brand-2': '#f4ae7b',
  'brand-3': '#f78687',
  'brand-4': '#f75a8b',
  'brand-5': '#df0c80',
}

RGB Array

[251, 217, 123], [244, 174, 123], [247, 134, 135], [247, 90, 139], [223, 12, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBD97B, #F4AE7B, #F78687, #F75A8B, #DF0C80 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: #fbd97b; --color-2: #f4ae7b; --color-3: #f78687; --color-4: #f75a8b; --color-5: #df0c80. 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