Pastel Color Palette
Soft · Friendly · Light
A soft, desaturated pastel palette covering all hue families. Pastels are highly versatile — they create a light, airy, friendly aesthetic without the visual weight of saturated colours. Popular in illustration, children's products, and wellness brands.
| Swatch | Name | Hex |
|---|---|---|
| Pastel Pink | #FFF1F1 | |
| Pastel Orange | #FFF3E0 | |
| Pastel Yellow | #FFFDE7 | |
| Pastel Green | #E8F5E9 | |
| Pastel Blue | #E3F2FD | |
| Pastel Purple | #F3E5F5 |
Best For
Use pastels for card backgrounds, tags, badges, and illustration fills. They pair naturally with white and light gray UI frameworks. Avoid pure white text — use a mid-toned gray for readability.
CSS Custom Properties
:root {
--pastel-100: #FFF1F1;
--pastel-200: #FFF3E0;
--pastel-300: #FFFDE7;
--pastel-400: #E8F5E9;
--pastel-500: #E3F2FD;
--pastel-600: #F3E5F5;
}Tailwind CSS Config
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
"pastel": {
"100": "#FFF1F1",
"200": "#FFF3E0",
"300": "#FFFDE7",
"400": "#E8F5E9",
"500": "#E3F2FD",
"600": "#F3E5F5",
},
},
},
},
}Generate a custom palette
Enter any seed colour and generate complementary, analogous, triadic, and monochromatic palettes. Export as CSS variables, Tailwind config, or JSON.
Open Color Palette GeneratorFrequently Asked Questions
What hex codes are in the Pastel Color Palette?
The Pastel Color Palette includes: Pastel Pink (#FFF1F1), Pastel Orange (#FFF3E0), Pastel Yellow (#FFFDE7), Pastel Green (#E8F5E9), Pastel Blue (#E3F2FD), Pastel Purple (#F3E5F5).
What is the mood of the Pastel Color Palette?
Pastel Color Palette evokes: Soft · Friendly · Light. A soft, desaturated pastel palette covering all hue families. Pastels are highly versatile — they create a light, airy, friendly aesthetic without the visual weight of saturated colours. Popular in illustration, children's products, and wellness brands.
What industries use the Pastel Color Palette?
The Pastel Color Palette is popular in: Children's Products, Wellness, Illustration, Stationery. Use pastels for card backgrounds, tags, badges, and illustration fills. They pair naturally with white and light gray UI frameworks. Avoid pure white text — use a mid-toned gray for readability.
What colours pair well with this palette?
This palette pairs well with: white, light-gray, lavender. Use pastels for card backgrounds, tags, badges, and illustration fills. They pair naturally with white and light gray UI frameworks. Avoid pure white text — use a mid-toned gray for readability.