Mellow Sky

pastel palette with a balanced five-color hierarchy for design use.

#Pastel#Soft#Light

Open in Generator

COLOR 1

#D8DD9F

Pale Goldenrod

COLOR 2

#E0E9C4

Sage Pastel

COLOR 3

#B5D59A

Pistachio Pastel

COLOR 4

#E6F0E4

Honeydew

COLOR 5

#F8F6F9

White Smoke

Color Values & Codes

HEX · RGB · HSL

Pale Goldenrod

#D8DD9F

rgb(216, 221, 159)hsl(65, 48%, 75%)Color details →

Sage Pastel

#E0E9C4

rgb(224, 233, 196)hsl(75, 46%, 84%)Color details →

Pistachio Pastel

#B5D59A

rgb(181, 213, 154)hsl(93, 41%, 72%)Color details →

Honeydew

#E6F0E4

rgb(230, 240, 228)hsl(110, 29%, 92%)Color details →

White Smoke

#F8F6F9

rgb(248, 246, 249)hsl(280, 20%, 97%)Color details →

Open In Design Tools

Palette Generator

Lock & shuffle colors

Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet

:root {
  --color-1: #D8DD9F;
  --color-2: #E0E9C4;
  --color-3: #B5D59A;
  --color-4: #E6F0E4;
  --color-5: #F8F6F9;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text

#D8DD9F on #E6F0E41.22:1

Large Text Only (Fail)

Sample Text

#D8DD9F on #F8F6F91.32:1

Large Text Only (Fail)

Sample Text

#E0E9C4 on #E6F0E41.08:1

Large Text Only (Fail)

Sample Text

#E0E9C4 on #F8F6F91.18:1

Large Text Only (Fail)

Sample Text

#B5D59A on #E6F0E41.39:1

Large Text Only (Fail)

Sample Text

#B5D59A on #F8F6F91.51:1

Large Text Only (Fail)

Related Palettes in Pastel

cp-featured-20Pastel

PastelSoft

cp-featured-25Pastel

PastelFoodCreative

cp-featured-26Pastel

PastelFreshNature

cp-0051Pastel

PastelSoftLight