← Back to Editor

#FFCCDC · #FFB0C9 · #F83673 · #000000 · #36F7BA

muted

A 5-color muted 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

#FFCCDC

Rouge · Pink · Cherry Blossom

HEX
#FFCCDC
RGB
rgb(255, 204, 220)
HSL
hsl(341, 100%, 90%)
HSB
hsb(341, 20%, 100%)
CMYK
cmyk(0%, 20%, 14%, 0%)
Oklch
oklch(89.4% 0.061 357.7)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#FFB0C9

Rouge · LightPink · Cherry Blossom

HEX
#FFB0C9
RGB
rgb(255, 176, 201)
HSL
hsl(341, 100%, 85%)
HSB
hsb(341, 31%, 100%)
CMYK
cmyk(0%, 31%, 21%, 0%)
Oklch
oklch(83.9% 0.097 358.8)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F83673

Dark Violet · DeepPink · Rose Pink

HEX
#F83673
RGB
rgb(248, 54, 115)
HSL
hsl(341, 93%, 59%)
HSB
hsb(341, 78%, 97%)
CMYK
cmyk(0%, 78%, 54%, 3%)
Oklch
oklch(65.0% 0.228 8.4)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#000000

Ink Black · Black · Jet Black

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#36F7BA

Mineral Blue · Turquoise · Lake Green

HEX
#36F7BA
RGB
rgb(54, 247, 186)
HSL
hsl(161, 92%, 59%)
HSB
hsb(161, 78%, 97%)
CMYK
cmyk(78%, 0%, 25%, 3%)
Oklch
oklch(87.0% 0.170 165.8)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFCCDC
CCFFEF

Analogous

FFCCF6
FFCCDC
FFD5CC

Triadic

FFCCDC
DCFFCC
CCDCFF

Split-Comp.

FFCCDC
CCFFD5
CCF6FF

Tetradic

FFCCDC
F6FFCC
CCFFEF
D5CCFF

Contrast Matrix WCAG 2.1 Contrast

FFCCDC
FFB0C9
F83673
000000
36F7BA
—
1.2
Fail
2.6
Fail
14.9
AAA
1.0
Fail
1.2
Fail
—
2.1
Fail
12.3
AAA
1.2
Fail
2.6
Fail
2.1
Fail
—
5.8
AA
2.6
Fail
14.9
AAA
12.3
AAA
5.8
AA
—
15.2
AAA
1.0
Fail
1.2
Fail
2.6
Fail
15.2
AAA
—
White BG
1.4Fail
1.7Fail
3.6AA Large
21.0AAA
1.4Fail
Black BG
14.9AAA
12.3AAA
5.8AA
1.0Fail
15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E8D8
DDDCC3
A4A264
000000
8A8BC9

Deuteranopia

ECF0D7
E1E7C2
AFBE61
000000
7E70CC

Tritanopia

FCD5D4
FBBEBD
EE5956
000000
40D4D7

Achromatopsia

DDDDDD
CACACA
777777
000000
B6B6B6

Shades & Tints Shades & Tints

#FFCCDC

Dark
Light

#FFB0C9

Dark
Light

#F83673

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffccdc;
  --color-2: #ffb0c9;
  --color-3: #f83673;
  --color-4: #000000;
  --color-5: #36f7ba;
}

SCSS

$color-1: #ffccdc;
$color-2: #ffb0c9;
$color-3: #f83673;
$color-4: #000000;
$color-5: #36f7ba;

TAILWIND

colors: {
  'brand-1': '#ffccdc',
  'brand-2': '#ffb0c9',
  'brand-3': '#f83673',
  'brand-4': '#000000',
  'brand-5': '#36f7ba',
}

RGB Array

[255, 204, 220], [255, 176, 201], [248, 54, 115], [0, 0, 0], [54, 247, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #FFCCDC, #FFB0C9, #F83673, #000000, #36F7BA 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: #ffccdc; --color-2: #ffb0c9; --color-3: #f83673; --color-4: #000000; --color-5: #36f7ba. 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 muted-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