← Back to Editor

#FFD4C1 · #FCE4CC · #FFF1D4 · #7785B6 · #FFCCD2

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

#FFD4C1

Apricot · Bisque · Peach Orange

HEX
#FFD4C1
RGB
rgb(255, 212, 193)
HSL
hsl(18, 100%, 88%)
HSB
hsb(18, 24%, 100%)
CMYK
cmyk(0%, 17%, 24%, 0%)
Oklch
oklch(90.2% 0.055 45.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FCE4CC

Goose Yellow · Bisque · Peach Orange

HEX
#FCE4CC
RGB
rgb(252, 228, 204)
HSL
hsl(30, 89%, 89%)
HSB
hsb(30, 19%, 99%)
CMYK
cmyk(0%, 10%, 19%, 1%)
Oklch
oklch(93.2% 0.041 67.3)

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

#FFF1D4

Goose Yellow · Beige · Lemon Cream

HEX
#FFF1D4
RGB
rgb(255, 241, 212)
HSL
hsl(40, 100%, 92%)
HSB
hsb(40, 17%, 100%)
CMYK
cmyk(0%, 5%, 17%, 0%)
Oklch
oklch(96.2% 0.041 85.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#7785B6

Azure · LightSlateGray · Navy Blue

HEX
#7785B6
RGB
rgb(119, 133, 182)
HSL
hsl(227, 30%, 59%)
HSB
hsb(227, 35%, 71%)
CMYK
cmyk(35%, 27%, 0%, 29%)
Oklch
oklch(62.5% 0.076 271.8)

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

#FFCCD2

Peach Pink · Pink · Cherry Blossom

HEX
#FFCCD2
RGB
rgb(255, 204, 210)
HSL
hsl(353, 100%, 90%)
HSB
hsb(353, 20%, 100%)
CMYK
cmyk(0%, 20%, 18%, 0%)
Oklch
oklch(89.1% 0.058 10.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD4C1
C2EDFF

Analogous

FFC2CE
FFD4C1
FFF3C2

Triadic

FFD4C1
C2FFD4
D4C2FF

Split-Comp.

FFD4C1
C2FFF3
C2CEFF

Tetradic

FFD4C1
CEFFC2
C2EDFF
F3C2FF

Contrast Matrix WCAG 2.1 Contrast

FFD4C1
FCE4CC
FFF1D4
7785B6
FFCCD2
—
1.1
Fail
1.2
Fail
2.7
Fail
1.0
Fail
1.1
Fail
—
1.1
Fail
2.9
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
3.2
AA Large
1.3
Fail
2.7
Fail
2.9
Fail
3.2
AA Large
—
2.5
Fail
1.0
Fail
1.2
Fail
1.3
Fail
2.5
Fail
—
White BG
1.4Fail
1.2Fail
1.1Fail
3.6AA Large
1.4Fail
Black BG
15.4AAA
17.1AAA
18.8AAA
5.8AA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECC6
F2F1D2
F9F9DB
7D7DAA
E9E8D1

Deuteranopia

EFF2C7
F3F5D3
FAFBDD
7C7BA7
ECF0D0

Tritanopia

FDC9CA
FBD6D7
FEE1E2
78A19F
FCCFCF

Achromatopsia

DFDFDF
E8E8E8
F2F2F2
868686
DCDCDC

Shades & Tints Shades & Tints

#FFD4C1

Dark
Light

#FCE4CC

Dark
Light

#FFF1D4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd4c1;
  --color-2: #fce4cc;
  --color-3: #fff1d4;
  --color-4: #7785b6;
  --color-5: #ffccd2;
}

SCSS

$color-1: #ffd4c1;
$color-2: #fce4cc;
$color-3: #fff1d4;
$color-4: #7785b6;
$color-5: #ffccd2;

TAILWIND

colors: {
  'brand-1': '#ffd4c1',
  'brand-2': '#fce4cc',
  'brand-3': '#fff1d4',
  'brand-4': '#7785b6',
  'brand-5': '#ffccd2',
}

RGB Array

[255, 212, 193], [252, 228, 204], [255, 241, 212], [119, 133, 182], [255, 204, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFD4C1, #FCE4CC, #FFF1D4, #7785B6, #FFCCD2 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: #ffd4c1; --color-2: #fce4cc; --color-3: #fff1d4; --color-4: #7785b6; --color-5: #ffccd2. 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