← Back to Editor

#F8CDCB · #F2C447 · #F99B63 · #FB6690 · #300A32

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

Color Details Color Details

#F8CDCB

Peach Pink · Pink · Cherry Blossom

HEX
#F8CDCB
RGB
rgb(248, 205, 203)
HSL
hsl(3, 76%, 88%)
HSB
hsb(3, 18%, 97%)
CMYK
cmyk(0%, 17%, 18%, 3%)
Oklch
oklch(88.5% 0.049 21.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F2C447

Ginger · SandyBrown · Sunflower

HEX
#F2C447
RGB
rgb(242, 196, 71)
HSL
hsl(44, 87%, 61%)
HSB
hsb(44, 71%, 95%)
CMYK
cmyk(0%, 19%, 71%, 5%)
Oklch
oklch(83.9% 0.147 88.1)

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

#F99B63

Apricot · SandyBrown · Warm Sun

HEX
#F99B63
RGB
rgb(249, 155, 99)
HSL
hsl(22, 93%, 68%)
HSB
hsb(22, 60%, 98%)
CMYK
cmyk(0%, 38%, 60%, 2%)
Oklch
oklch(77.5% 0.134 50.5)

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

#FB6690

Rouge · LightCoral · Rose Pink

HEX
#FB6690
RGB
rgb(251, 102, 144)
HSL
hsl(343, 95%, 69%)
HSB
hsb(343, 59%, 98%)
CMYK
cmyk(0%, 59%, 43%, 2%)
Oklch
oklch(70.8% 0.185 5.6)

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

#300A32

Royal Purple · MidnightBlue · Dark Purple

HEX
#300A32
RGB
rgb(48, 10, 50)
HSL
hsl(297, 67%, 12%)
HSB
hsb(297, 80%, 20%)
CMYK
cmyk(4%, 80%, 0%, 80%)
Oklch
oklch(23.2% 0.084 325.8)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8CDCB
C9F5F8

Analogous

F8C9DE
F8CDCB
F8E3C9

Triadic

F8CDCB
C9F8CB
CBC9F8

Split-Comp.

F8CDCB
C9F8E3
C9DEF8

Tetradic

F8CDCB
DEF8C9
C9F5F8
E3C9F8

Contrast Matrix WCAG 2.1 Contrast

F8CDCB
F2C447
F99B63
FB6690
300A32
—
1.1
Fail
1.5
Fail
2.0
Fail
12.0
AAA
1.1
Fail
—
1.3
Fail
1.7
Fail
10.5
AAA
1.5
Fail
1.3
Fail
—
1.3
Fail
8.1
AAA
2.0
Fail
1.7
Fail
1.3
Fail
—
6.1
AA
12.0
AAA
10.5
AAA
8.1
AAA
6.1
AA
—
White BG
1.4Fail
1.6Fail
2.1Fail
2.8Fail
17.3AAA
Black BG
14.6AAA
12.8AAA
9.9AAA
7.4AAA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E5CB
DEDE65
D0CF71
BAB986
201F28

Deuteranopia

E8EBCC
E1E46D
D6DD74
C3CE83
222526

Tritanopia

F6CCCC
F07D82
F47B7E
F47E7C
2E211F

Achromatopsia

DADADA
C4C4C4
B1B1B1
979797
1A1A1A

Shades & Tints Shades & Tints

#F8CDCB

Dark
Light

#F2C447

Dark
Light

#F99B63

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8cdcb;
  --color-2: #f2c447;
  --color-3: #f99b63;
  --color-4: #fb6690;
  --color-5: #300a32;
}

SCSS

$color-1: #f8cdcb;
$color-2: #f2c447;
$color-3: #f99b63;
$color-4: #fb6690;
$color-5: #300a32;

TAILWIND

colors: {
  'brand-1': '#f8cdcb',
  'brand-2': '#f2c447',
  'brand-3': '#f99b63',
  'brand-4': '#fb6690',
  'brand-5': '#300a32',
}

RGB Array

[248, 205, 203], [242, 196, 71], [249, 155, 99], [251, 102, 144], [48, 10, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8CDCB, #F2C447, #F99B63, #FB6690, #300A32 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #f8cdcb; --color-2: #f2c447; --color-3: #f99b63; --color-4: #fb6690; --color-5: #300a32. 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. 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