← Back to Editor

#FFECD6 · #F5B8C0 · #DF6476 · #FDFFF3 · #648FC2

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 App

Color Details Color Details

#FFECD6

Goose Yellow · Beige · Peach Orange

HEX
#FFECD6
RGB
rgb(255, 236, 214)
HSL
hsl(32, 100%, 92%)
HSB
hsb(32, 16%, 100%)
CMYK
cmyk(0%, 7%, 16%, 0%)
Oklch
oklch(95.3% 0.036 71.4)

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

#F5B8C0

Peach Pink · LightPink · Cherry Blossom

HEX
#F5B8C0
RGB
rgb(245, 184, 192)
HSL
hsl(352, 75%, 84%)
HSB
hsb(352, 25%, 96%)
CMYK
cmyk(0%, 25%, 22%, 4%)
Oklch
oklch(84.0% 0.071 10.0)

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

#DF6476

Peach Pink · LightCoral · Coral Red

HEX
#DF6476
RGB
rgb(223, 100, 118)
HSL
hsl(351, 66%, 63%)
HSB
hsb(351, 55%, 87%)
CMYK
cmyk(0%, 55%, 47%, 13%)
Oklch
oklch(65.8% 0.154 13.3)

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

#FDFFF3

Willow Green · Snow · Mint Green

HEX
#FDFFF3
RGB
rgb(253, 255, 243)
HSL
hsl(70, 100%, 98%)
HSB
hsb(70, 5%, 100%)
CMYK
cmyk(1%, 0%, 5%, 0%)
Oklch
oklch(99.5% 0.016 114.4)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#648FC2

Azure · SteelBlue · Navy Blue

HEX
#648FC2
RGB
rgb(100, 143, 194)
HSL
hsl(213, 44%, 58%)
HSB
hsb(213, 48%, 76%)
CMYK
cmyk(48%, 26%, 0%, 24%)
Oklch
oklch(64.0% 0.091 253.3)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFECD6
D6E9FF

Analogous

FFD8D6
FFECD6
FEFFD6

Triadic

FFECD6
D6FFEC
ECD6FF

Split-Comp.

FFECD6
D6FEFF
D8D6FF

Tetradic

FFECD6
D6FFD8
D6E9FF
FFD6FE

Contrast Matrix WCAG 2.1 Contrast

FFECD6
F5B8C0
DF6476
FDFFF3
648FC2
—
1.5
Fail
2.9
Fail
1.1
Fail
2.9
Fail
1.5
Fail
—
2.0
Fail
1.7
Fail
2.0
Fail
2.9
Fail
2.0
Fail
—
3.3
AA Large
1.0
Fail
1.1
Fail
1.7
Fail
3.3
AA Large
—
3.3
AA Large
2.9
Fail
2.0
Fail
1.0
Fail
3.3
AA Large
—
White BG
1.2Fail
1.7Fail
3.4AA Large
1.0Fail
3.4AA Large
Black BG
18.2AAA
12.5AAA
6.2AA
20.8AAA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7DB
DBDABE
AAA972
FEFEF6
7777B6

Deuteranopia

F8F9DD
DEE3BE
B1BA71
FEFEF7
7471B3

Tritanopia

FEE0E0
F2BDBC
D96E6D
FDF8F9
66ACAA

Achromatopsia

EFEFEF
CBCBCB
8B8B8B
FDFDFD
888888

Shades & Tints Shades & Tints

#FFECD6

Dark
Light

#F5B8C0

Dark
Light

#DF6476

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffecd6;
  --color-2: #f5b8c0;
  --color-3: #df6476;
  --color-4: #fdfff3;
  --color-5: #648fc2;
}

SCSS

$color-1: #ffecd6;
$color-2: #f5b8c0;
$color-3: #df6476;
$color-4: #fdfff3;
$color-5: #648fc2;

TAILWIND

colors: {
  'brand-1': '#ffecd6',
  'brand-2': '#f5b8c0',
  'brand-3': '#df6476',
  'brand-4': '#fdfff3',
  'brand-5': '#648fc2',
}

RGB Array

[255, 236, 214], [245, 184, 192], [223, 100, 118], [253, 255, 243], [100, 143, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFECD6, #F5B8C0, #DF6476, #FDFFF3, #648FC2 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: #ffecd6; --color-2: #f5b8c0; --color-3: #df6476; --color-4: #fdfff3; --color-5: #648fc2. 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