Pastel Colors: 32 Pastel Color Codes (HEX, RGB, HSL)
Soft pastel colors with their HEX, RGB, HSL and OKLCH codes: pastel pink, blue, green, yellow and purple, plus ready-made pastel palettes. Click to copy.
Pastel pinks and reds
-
Lavender Blush
- RGB
- HSL
- OKLCH
-
Pink Lace
- RGB
- HSL
- OKLCH
-
Baby Pink
- RGB
- HSL
- OKLCH
-
Cotton Candy
- RGB
- HSL
- OKLCH
-
Light Pink
- RGB
- HSL
- OKLCH
-
Melon
- RGB
- HSL
- OKLCH
-
Pastel Pink
- RGB
- HSL
- OKLCH
-
Pastel Red
- RGB
- HSL
- OKLCH
Pastel oranges and yellows
-
Cream
- RGB
- HSL
- OKLCH
-
Lemon Chiffon
- RGB
- HSL
- OKLCH
-
Pastel Yellow
- RGB
- HSL
- OKLCH
-
Peach
- RGB
- HSL
- OKLCH
-
Navajo White
- RGB
- HSL
- OKLCH
-
Wheat
- RGB
- HSL
- OKLCH
-
Apricot
- RGB
- HSL
- OKLCH
-
Pastel Orange
- RGB
- HSL
- OKLCH
Pastel greens
-
Honeydew
- RGB
- HSL
- OKLCH
-
Tea Green
- RGB
- HSL
- OKLCH
-
Magic Mint
- RGB
- HSL
- OKLCH
-
Celadon
- RGB
- HSL
- OKLCH
-
Granny Smith Apple
- RGB
- HSL
- OKLCH
-
Mint Green
- RGB
- HSL
- OKLCH
-
Aquamarine
- RGB
- HSL
- OKLCH
-
Pastel Green
- RGB
- HSL
- OKLCH
Pastel blues and purples
-
Lavender
- RGB
- HSL
- OKLCH
-
Periwinkle
- RGB
- HSL
- OKLCH
-
Powder Blue
- RGB
- HSL
- OKLCH
-
Pastel Blue
- RGB
- HSL
- OKLCH
-
Baby Blue
- RGB
- HSL
- OKLCH
-
Thistle
- RGB
- HSL
- OKLCH
-
Pastel Purple
- RGB
- HSL
- OKLCH
-
Light Pastel Purple
- RGB
- HSL
- OKLCH
Pastel color palettes
-
Sorbet
-
Spring
-
Nursery
-
Seaside
-
Lilac Dream
-
Peach Mint
What are pastel colors?
Pastel colors are pale, soft versions of regular colors: high in lightness and gentle in saturation, as if mixed with plenty of white. They feel calm, friendly and light, which is why they show up so often in baby products, spring designs, illustrations and soft UI themes.
How to make pastel colors in CSS
The easiest way to turn any hue into a pastel is HSL: keep the hue, use high lightness (around 85โ90%) and medium to high saturation. Change only the first number to get a pastel in any color:
.pastel-pink { background: hsl(340, 80%, 88%); }
.pastel-yellow { background: hsl(55, 90%, 85%); }
.pastel-green { background: hsl(120, 55%, 85%); }
.pastel-blue { background: hsl(205, 70%, 87%); }Pastel colors and readability
Pastels are light, so text on top of them should be dark. White text on a pastel background almost never has enough contrast. A dark gray or a deep version of the same hue (for example dark green text on Tea Green) reads well and keeps the soft look.
FAQ
What is the hex code for pastel pink?
Pastel Pink is #DEA5A4. Lighter options are Baby Pink (#F4C2C2) and Pink Lace (#FFDDF4).
What is the hex code for pastel blue?
Pastel Blue is #AEC6CF. Baby Blue (#89CFF0) is a brighter alternative.
What is the hex code for pastel green?
Pastel Green is #77DD77. Softer options are Tea Green (#D0F0C0) and Magic Mint (#AAF0D1).
What is the hex code for pastel yellow and purple?
Pastel Yellow is #FDFD96 and Pastel Purple is #B39EB5.
Want a soft gradient? Combine two pastels in the CSS gradient generator.
More colors
Need a gradient from these colors? Use the CSS gradient generator.