← Back to Editor

#FBC176 · #F9E1C1 · #F6B9E3 · #AF8CBA · #181063

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 AppData Visualization

Color Details Color Details

#FBC176

Goose Yellow · LightSalmon · Warm Sun

HEX
#FBC176
RGB
rgb(251, 193, 118)
HSL
hsl(34, 94%, 72%)
HSB
hsb(34, 53%, 98%)
CMYK
cmyk(0%, 23%, 53%, 2%)
Oklch
oklch(84.8% 0.114 72.4)

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

#F9E1C1

Goose Yellow · Bisque · Peach Orange

HEX
#F9E1C1
RGB
rgb(249, 225, 193)
HSL
hsl(34, 82%, 87%)
HSB
hsb(34, 22%, 98%)
CMYK
cmyk(0%, 10%, 22%, 2%)
Oklch
oklch(92.1% 0.050 75.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F6B9E3

Mauve · Pink · Lavender

HEX
#F6B9E3
RGB
rgb(246, 185, 227)
HSL
hsl(319, 77%, 85%)
HSB
hsb(319, 25%, 96%)
CMYK
cmyk(0%, 25%, 8%, 4%)
Oklch
oklch(85.4% 0.088 338.2)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#AF8CBA

Lilac · DarkGray · Lilac Purple

HEX
#AF8CBA
RGB
rgb(175, 140, 186)
HSL
hsl(286, 25%, 64%)
HSB
hsb(286, 25%, 73%)
CMYK
cmyk(6%, 25%, 0%, 27%)
Oklch
oklch(68.8% 0.077 318.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#181063

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#181063
RGB
rgb(24, 16, 99)
HSL
hsl(246, 72%, 23%)
HSB
hsb(246, 84%, 39%)
CMYK
cmyk(76%, 84%, 0%, 61%)
Oklch
oklch(25.9% 0.136 275.5)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBC176
74AFFB

Analogous

FB7D74
FBC176
F2FB74

Triadic

FBC176
74FBC1
C174FB

Split-Comp.

FBC176
74F2FB
7D74FB

Tetradic

FBC176
74FB7D
74AFFB
FB74F2

Contrast Matrix WCAG 2.1 Contrast

FBC176
F9E1C1
F6B9E3
AF8CBA
181063
—
1.3
Fail
1.0
Fail
1.8
Fail
10.0
AAA
1.3
Fail
—
1.3
Fail
2.3
Fail
12.8
AAA
1.0
Fail
1.3
Fail
—
1.8
Fail
10.0
AAA
1.8
Fail
2.3
Fail
1.8
Fail
—
5.6
AA
10.0
AAA
12.8
AAA
10.0
AAA
5.6
AA
—
White BG
1.6Fail
1.3Fail
1.6Fail
2.9Fail
16.2AAA
Black BG
13.0AAA
16.6AAA
13.0AAA
7.3AAA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E188
EFEEC9
DCDBD9
A0A0AF
15144F

Deuteranopia

E5EA8D
F0F2CB
DFE4D6
A2A5AC
15164A

Tritanopia

F8969A
F8CFD0
F3D1CF
ADA6A4
183F3C

Achromatopsia

CACACA
E5E5E5
D0D0D0
9C9C9C
1C1C1C

Shades & Tints Shades & Tints

#FBC176

Dark
Light

#F9E1C1

Dark
Light

#F6B9E3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbc176;
  --color-2: #f9e1c1;
  --color-3: #f6b9e3;
  --color-4: #af8cba;
  --color-5: #181063;
}

SCSS

$color-1: #fbc176;
$color-2: #f9e1c1;
$color-3: #f6b9e3;
$color-4: #af8cba;
$color-5: #181063;

TAILWIND

colors: {
  'brand-1': '#fbc176',
  'brand-2': '#f9e1c1',
  'brand-3': '#f6b9e3',
  'brand-4': '#af8cba',
  'brand-5': '#181063',
}

RGB Array

[251, 193, 118], [249, 225, 193], [246, 185, 227], [175, 140, 186], [24, 16, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBC176, #F9E1C1, #F6B9E3, #AF8CBA, #181063 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #fbc176; --color-2: #f9e1c1; --color-3: #f6b9e3; --color-4: #af8cba; --color-5: #181063. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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