← Back to Editor

#D8F9F0 · #FDF7EB · #FBCDE7 · #D9A5E3 · #373F42

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 AppData Visualization

Color Details Color Details

#D8F9F0

Jade · Lavender · Glacier Blue

HEX
#D8F9F0
RGB
rgb(216, 249, 240)
HSL
hsl(164, 73%, 91%)
HSB
hsb(164, 13%, 98%)
CMYK
cmyk(13%, 0%, 4%, 2%)
Oklch
oklch(95.6% 0.036 177.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#FDF7EB

Goose Yellow · SeaShell · Lemon Cream

HEX
#FDF7EB
RGB
rgb(253, 247, 235)
HSL
hsl(40, 82%, 96%)
HSB
hsb(40, 7%, 99%)
CMYK
cmyk(0%, 2%, 7%, 1%)
Oklch
oklch(97.8% 0.017 84.6)

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

#FBCDE7

Mauve · Pink · Cherry Blossom

HEX
#FBCDE7
RGB
rgb(251, 205, 231)
HSL
hsl(326, 85%, 89%)
HSB
hsb(326, 18%, 98%)
CMYK
cmyk(0%, 18%, 8%, 2%)
Oklch
oklch(89.5% 0.062 343.5)

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

#D9A5E3

Lilac · Violet · Lilac Purple

HEX
#D9A5E3
RGB
rgb(217, 165, 227)
HSL
hsl(290, 53%, 77%)
HSB
hsb(290, 27%, 89%)
CMYK
cmyk(4%, 27%, 0%, 11%)
Oklch
oklch(79.0% 0.103 320.9)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#373F42

Slate Blue · DarkSlateGray · Dark Stone

HEX
#373F42
RGB
rgb(55, 63, 66)
HSL
hsl(196, 9%, 24%)
HSB
hsb(196, 17%, 26%)
CMYK
cmyk(17%, 5%, 0%, 74%)
Oklch
oklch(36.1% 0.012 222.3)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8F9F0
F9D7E0

Analogous

D7F9DF
D8F9F0
D7F1F9

Triadic

D8F9F0
F0D7F9
F9F0D7

Split-Comp.

D8F9F0
F9D7F1
F9DFD7

Tetradic

D8F9F0
DFD7F9
F9D7E0
F1F9D7

Contrast Matrix WCAG 2.1 Contrast

D8F9F0
FDF7EB
FBCDE7
D9A5E3
373F42
—
1.1
Fail
1.2
Fail
1.8
Fail
9.6
AAA
1.1
Fail
—
1.3
Fail
1.9
Fail
10.1
AAA
1.2
Fail
1.3
Fail
—
1.4
Fail
7.7
AAA
1.8
Fail
1.9
Fail
1.4
Fail
—
5.3
AA
9.6
AAA
10.1
AAA
7.7
AAA
5.3
AA
—
White BG
1.1Fail
1.1Fail
1.4Fail
2.0Fail
10.8AAA
Black BG
18.7AAA
19.7AAA
15.0AAA
10.4AAA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E7F2
FAFAEE
E7E7E1
C2C2D4
3A3B41

Deuteranopia

E4E2F3
FBFBEF
EAEDDF
C6C9D0
3A3941

Tritanopia

DAF4F4
FDF0F1
F9DCDB
D6C8C6
374141

Achromatopsia

EEEEEE
F7F7F7
DEDEDE
BCBCBC
3D3D3D

Shades & Tints Shades & Tints

#D8F9F0

Dark
Light

#FDF7EB

Dark
Light

#FBCDE7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8f9f0;
  --color-2: #fdf7eb;
  --color-3: #fbcde7;
  --color-4: #d9a5e3;
  --color-5: #373f42;
}

SCSS

$color-1: #d8f9f0;
$color-2: #fdf7eb;
$color-3: #fbcde7;
$color-4: #d9a5e3;
$color-5: #373f42;

TAILWIND

colors: {
  'brand-1': '#d8f9f0',
  'brand-2': '#fdf7eb',
  'brand-3': '#fbcde7',
  'brand-4': '#d9a5e3',
  'brand-5': '#373f42',
}

RGB Array

[216, 249, 240], [253, 247, 235], [251, 205, 231], [217, 165, 227], [55, 63, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8F9F0, #FDF7EB, #FBCDE7, #D9A5E3, #373F42 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #d8f9f0; --color-2: #fdf7eb; --color-3: #fbcde7; --color-4: #d9a5e3; --color-5: #373f42. 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. 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