Pastel 90s color palette
Think of a 90s pencil case or a Saturday morning cartoon: soft orange #FFB347, sky blue #87CEEB, mint #98FB98, orchid #DDA0DD and a pale khaki yellow. They're brighter than today's muted pastels and mismatched on purpose. Nothing is dark, so they need a navy or black outline to look finished. It's made for toy shops and nostalgic social posts.
Pastel 90s palette in use
Set text in navy or black and use #F0E68C or #98FB98 as backgrounds. #FFB347 makes a friendly button color, and #87CEEB and #DDA0DD work for cards, stickers and doodles.
This pair measures 16.58:1, so it works for body text too. The button uses #FFB347 with black text.
ButtonGood for
- Kids' toy shop
- Retro zine layout
- Nostalgic social posts
- School supply packaging
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 90s palette as code
CSS variables
:root {
--pastel-90s-1: #FFB347;
--pastel-90s-2: #87CEEB;
--pastel-90s-3: #98FB98;
--pastel-90s-4: #DDA0DD;
--pastel-90s-5: #F0E68C;
}Tailwind v4
@theme {
--color-pastel-90s-1: #FFB347;
--color-pastel-90s-2: #87CEEB;
--color-pastel-90s-3: #98FB98;
--color-pastel-90s-4: #DDA0DD;
--color-pastel-90s-5: #F0E68C;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'pastel-90s': {
100: '#FFB347',
200: '#87CEEB',
300: '#98FB98',
400: '#DDA0DD',
500: '#F0E68C',
},SCSS
$pastel-90s-1: #FFB347;
$pastel-90s-2: #87CEEB;
$pastel-90s-3: #98FB98;
$pastel-90s-4: #DDA0DD;
$pastel-90s-5: #F0E68C;JSON
["#FFB347","#87CEEB","#98FB98","#DDA0DD","#F0E68C"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.