← Back to Editor

#FFDCD9 · #FAF2F8 · #DCDFFA · #EDEDED · #DAE2ED

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFDCD9

Peach Pink · Bisque · Cherry Blossom

HEX
#FFDCD9
RGB
rgb(255, 220, 217)
HSL
hsl(5, 100%, 93%)
HSB
hsb(5, 15%, 100%)
CMYK
cmyk(0%, 14%, 15%, 0%)
Oklch
oklch(92.3% 0.039 23.7)

TraditionalPeach Pink」· PaintCherry Blossom」· Creative Blush Sunrise

#FAF2F8

Mauve · Snow · Lavender

HEX
#FAF2F8
RGB
rgb(250, 242, 248)
HSL
hsl(315, 44%, 96%)
HSB
hsb(315, 3%, 98%)
CMYK
cmyk(0%, 3%, 1%, 2%)
Oklch
oklch(96.9% 0.012 334.1)

TraditionalMauve」· PaintLavender」· Creative Rose Petal

#DCDFFA

Azure · Lavender · Sky Blue

HEX
#DCDFFA
RGB
rgb(220, 223, 250)
HSL
hsl(234, 75%, 92%)
HSB
hsb(234, 12%, 98%)
CMYK
cmyk(12%, 11%, 0%, 2%)
Oklch
oklch(91.0% 0.037 280.6)

TraditionalAzure」· PaintSky Blue」· Creative Twilight Haze

#EDEDED

Plain White · Linen · Cloud White

HEX
#EDEDED
RGB
rgb(237, 237, 237)
HSL
hsl(0, 0%, 93%)
HSB
hsb(0, 0%, 93%)
CMYK
cmyk(0%, 0%, 0%, 7%)
Oklch
oklch(94.6% 0.000 89.9)

TraditionalPlain White」· PaintCloud White」· Creative Morning Mist

#DAE2ED

Azure · Lavender · Sky Blue

HEX
#DAE2ED
RGB
rgb(218, 226, 237)
HSL
hsl(215, 35%, 89%)
HSB
hsb(215, 8%, 93%)
CMYK
cmyk(8%, 5%, 0%, 7%)
Oklch
oklch(91.0% 0.017 256.3)

TraditionalAzure」· PaintSky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFDCD9
DBFCFF

Analogous

FFDBEA
FFDCD9
FFF0DB

Triadic

FFDCD9
DBFFDE
DEDBFF

Split-Comp.

FFDCD9
DBFFF0
DBEAFF

Tetradic

FFDCD9
EAFFDB
DBFCFF
F0DBFF

Contrast Matrix WCAG 2.1 Contrast

FFDCD9
FAF2F8
DCDFFA
EDEDED
DAE2ED
1.2
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.0
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.0
Fail
1.1
Fail
White BG
1.3Fail
1.1Fail
1.3Fail
1.2Fail
1.3Fail
Black BG
16.5AAA
19.1AAA
16.0AAA
17.9AAA
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0DA
F7F6F7
DDDDF3
EDEDED
DDDEEA

Deuteranopia

F2F5DA
F7F8F6
DDDDF2
EDEDED
DDDCEA

Tritanopia

FDDADA
FAF5F5
DCEEED
EDEDED
DAE8E8

Achromatopsia

E6E6E6
F5F5F5
E1E1E1
EDEDED
E1E1E1

Shades & Tints Shades & Tints

#FFDCD9

Dark
Light

#FAF2F8

Dark
Light

#DCDFFA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffdcd9;
  --color-2: #faf2f8;
  --color-3: #dcdffa;
  --color-4: #ededed;
  --color-5: #dae2ed;
}

SCSS

$color-1: #ffdcd9;
$color-2: #faf2f8;
$color-3: #dcdffa;
$color-4: #ededed;
$color-5: #dae2ed;

TAILWIND

colors: {
  'brand-1': '#ffdcd9',
  'brand-2': '#faf2f8',
  'brand-3': '#dcdffa',
  'brand-4': '#ededed',
  'brand-5': '#dae2ed',
}

RGB Array

[255, 220, 217], [250, 242, 248], [220, 223, 250], [237, 237, 237], [218, 226, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFDCD9, #FAF2F8, #DCDFFA, #EDEDED, #DAE2ED is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ffdcd9; --color-2: #faf2f8; --color-3: #dcdffa; --color-4: #ededed; --color-5: #dae2ed. 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 tech, SaaS, healthcare, eco industries. 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