Pastel Rainbow color palette
A full rainbow in six soft steps: pink #FFB3BA, peach, butter #FFFFBA, mint, sky #BAE1FF and lilac #E8BAFF. Because every color has about the same lightness, the spectrum looks gentle and even. That makes it handy for category labels, charts or tags where each item needs its own color. Pride events, nurseries, digital planners and sticker packs fit it well.
Pastel Rainbow palette in use
Give each category or tag its own pastel, with near-black text on all six. #FFFFBA or #BAE1FF works as a page background, and #E8BAFF or #FFB3BA as a soft button color.
This pair measures 20.26:1, so it works for body text too. The button uses #E8BAFF with black text.
ButtonGood for
- Pride event flyer
- Nursery wall art
- Digital planner tabs
- Sticker pack design
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Pastel Rainbow palette as code
CSS variables
:root {
--pastel-rainbow-1: #FFB3BA;
--pastel-rainbow-2: #FFDFBA;
--pastel-rainbow-3: #FFFFBA;
--pastel-rainbow-4: #BAFFC9;
--pastel-rainbow-5: #BAE1FF;
--pastel-rainbow-6: #E8BAFF;
}Tailwind v4
@theme {
--color-pastel-rainbow-1: #FFB3BA;
--color-pastel-rainbow-2: #FFDFBA;
--color-pastel-rainbow-3: #FFFFBA;
--color-pastel-rainbow-4: #BAFFC9;
--color-pastel-rainbow-5: #BAE1FF;
--color-pastel-rainbow-6: #E8BAFF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'pastel-rainbow': {
100: '#FFB3BA',
200: '#FFDFBA',
300: '#FFFFBA',
400: '#BAFFC9',
500: '#BAE1FF',
600: '#E8BAFF',
},SCSS
$pastel-rainbow-1: #FFB3BA;
$pastel-rainbow-2: #FFDFBA;
$pastel-rainbow-3: #FFFFBA;
$pastel-rainbow-4: #BAFFC9;
$pastel-rainbow-5: #BAE1FF;
$pastel-rainbow-6: #E8BAFF;JSON
["#FFB3BA","#FFDFBA","#FFFFBA","#BAFFC9","#BAE1FF","#E8BAFF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.