← Back to Editor

#FFBBC3 · #F17D7E · #D95668 · #7C283F · #1D131E

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

#FFBBC3

Peach Pink · LightPink · Cherry Blossom

HEX
#FFBBC3
RGB
rgb(255, 187, 195)
HSL
hsl(353, 100%, 87%)
HSB
hsb(353, 27%, 100%)
CMYK
cmyk(0%, 27%, 24%, 0%)
Oklch
oklch(85.7% 0.079 11.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F17D7E

Peach Pink · LightCoral · Coral Red

HEX
#F17D7E
RGB
rgb(241, 125, 126)
HSL
hsl(359, 81%, 72%)
HSB
hsb(359, 48%, 95%)
CMYK
cmyk(0%, 48%, 48%, 5%)
Oklch
oklch(72.1% 0.143 20.7)

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

#D95668

Vermilion · Tomato · Passion Red

HEX
#D95668
RGB
rgb(217, 86, 104)
HSL
hsl(352, 63%, 59%)
HSB
hsb(352, 60%, 85%)
CMYK
cmyk(0%, 60%, 52%, 15%)
Oklch
oklch(62.8% 0.164 14.9)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#7C283F

Dark Violet · Brown · Camellia

HEX
#7C283F
RGB
rgb(124, 40, 63)
HSL
hsl(344, 51%, 32%)
HSB
hsb(344, 68%, 49%)
CMYK
cmyk(0%, 68%, 49%, 51%)
Oklch
oklch(41.0% 0.118 7.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#1D131E

Dark Plum · Black · Dark Purple

HEX
#1D131E
RGB
rgb(29, 19, 30)
HSL
hsl(295, 22%, 10%)
HSB
hsb(295, 37%, 12%)
CMYK
cmyk(3%, 37%, 0%, 88%)
Oklch
oklch(20.5% 0.026 323.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBBC3
BDFFF7

Analogous

FFBDE6
FFBBC3
FFD6BD

Triadic

FFBBC3
C4FFBD
BDC4FF

Split-Comp.

FFBBC3
BDFFD6
BDE6FF

Tetradic

FFBBC3
E6FFBD
BDFFF7
D6BDFF

Contrast Matrix WCAG 2.1 Contrast

FFBBC3
F17D7E
D95668
7C283F
1D131E
—
1.6
Fail
2.4
Fail
5.9
AA
11.3
AAA
1.6
Fail
—
1.5
Fail
3.6
AA Large
6.9
AA
2.4
Fail
1.5
Fail
—
2.5
Fail
4.7
AA
5.9
AA
3.6
AA Large
2.5
Fail
—
1.9
Fail
11.3
AAA
6.9
AA
4.7
AA
1.9
Fail
—
White BG
1.6Fail
2.6Fail
3.8AA Large
9.4AAA
18.0AAA
Black BG
13.1AAA
8.0AAA
5.5AA
2.2Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E1C1
BFBE7E
A09F64
585739
19191B

Deuteranopia

E6EBC1
C6CE7E
A8B263
5D6338
191A1B

Tritanopia

FCC0BF
EB7E7E
D2605F
783534
1C1919

Achromatopsia

D0D0D0
A0A0A0
7F7F7F
444444
171717

Shades & Tints Shades & Tints

#FFBBC3

Dark
Light

#F17D7E

Dark
Light

#D95668

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbbc3;
  --color-2: #f17d7e;
  --color-3: #d95668;
  --color-4: #7c283f;
  --color-5: #1d131e;
}

SCSS

$color-1: #ffbbc3;
$color-2: #f17d7e;
$color-3: #d95668;
$color-4: #7c283f;
$color-5: #1d131e;

TAILWIND

colors: {
  'brand-1': '#ffbbc3',
  'brand-2': '#f17d7e',
  'brand-3': '#d95668',
  'brand-4': '#7c283f',
  'brand-5': '#1d131e',
}

RGB Array

[255, 187, 195], [241, 125, 126], [217, 86, 104], [124, 40, 63], [29, 19, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBBC3, #F17D7E, #D95668, #7C283F, #1D131E 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: #ffbbc3; --color-2: #f17d7e; --color-3: #d95668; --color-4: #7c283f; --color-5: #1d131e. 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