Pastel Color Palette
Pastel colors are soft, light versions of hues, made by mixing a color with lots of white. In HSL terms they have high lightness (about 75–90%) and low-to-medium saturation. Press Generate for a random pastel palette, or copy one of the 12 ready-made pastel palettes below with their HEX codes.
Press Space to generate · click 🔓 to lock a color · click a code to copy HEX, RGB, HSL, CSS or Tailwind
Last updated:
12 pastel color palettes
Click a color to copy its HEX, RGB or HSL, copy all five HEX codes, or open the palette in the generator to lock and tweak it.
Pastel color codes
These are standard CSS named colors that read as pastel. You can use either the name or the HEX code in CSS.
| CSS name | HEX | RGB |
|---|---|---|
| lavender | #E6E6FA | rgb(230, 230, 250) |
| thistle | #D8BFD8 | rgb(216, 191, 216) |
| pink | #FFC0CB | rgb(255, 192, 203) |
| lightpink | #FFB6C1 | rgb(255, 182, 193) |
| mistyrose | #FFE4E1 | rgb(255, 228, 225) |
| lavenderblush | #FFF0F5 | rgb(255, 240, 245) |
| peachpuff | #FFDAB9 | rgb(255, 218, 185) |
| bisque | #FFE4C4 | rgb(255, 228, 196) |
| moccasin | #FFE4B5 | rgb(255, 228, 181) |
| wheat | #F5DEB3 | rgb(245, 222, 179) |
| lemonchiffon | #FFFACD | rgb(255, 250, 205) |
| palegoldenrod | #EEE8AA | rgb(238, 232, 170) |
| palegreen | #98FB98 | rgb(152, 251, 152) |
| honeydew | #F0FFF0 | rgb(240, 255, 240) |
| mintcream | #F5FFFA | rgb(245, 255, 250) |
| paleturquoise | #AFEEEE | rgb(175, 238, 238) |
| lightcyan | #E0FFFF | rgb(224, 255, 255) |
| powderblue | #B0E0E6 | rgb(176, 224, 230) |
| lightblue | #ADD8E6 | rgb(173, 216, 230) |
| lightskyblue | #87CEFA | rgb(135, 206, 250) |
Tips: pastels and text
Pastels are light, so white text on a pastel background almost always fails WCAG contrast. Pair pastels with dark text such as #1F2937 or a deep shade of the same hue, and check every pair with the contrast checker.
For a cohesive look, keep pastel saturation similar across the palette and add one darker anchor color for text and icons.
Frequently asked questions
What are pastel colors?
Pastel colors are pale, soft colors: a hue mixed with plenty of white. On screen that means high lightness (roughly 75–90% in HSL) and low-to-medium saturation, such as baby pink, mint, lavender, peach and powder blue.
What is the HEX code for pastel pink, blue or green?
There is no single official code, but the CSS named colors are a common reference: pink is #FFC0CB and lightpink is #FFB6C1; lightblue is #ADD8E6 and powderblue is #B0E0E6; palegreen is #98FB98 and honeydew is #F0FFF0. The table on this page lists 20 of them.
Do pastel colors work for text?
Rarely. Pastels are light, so white text on a pastel background almost always fails WCAG contrast. Use pastels as backgrounds or fills and pair them with dark text, then confirm the pair with the contrast checker.
How do I make any color pastel?
Raise its lightness and lower its saturation. In HSL, set lightness to about 80–90% and saturation to about 40–70%. For example, hsl(200, 100%, 50%) becomes a pastel blue at hsl(200, 60%, 85%).