Spring Bloom color palette
Pink petals and new leaves. Blush #FFF0F5, rose #FFB6C1 and hot pink #FF69B4 are the flowers, and the two light greens, #90EE90 and #98FB98, are the stems. Pink and green sit across the color wheel from each other, so each makes the other look brighter. Everything is light to mid in value. An Easter sale banner is the obvious first use, and florists can run with it all season.
Spring Bloom palette in use
Use #FFF0F5 as the page background and #FF69B4 for buttons and large headings. The greens suit leaf icons, tags and borders, and body text needs a dark plum or charcoal.
This pair measures 19.03:1, so it works for body text too. The button uses #FF69B4 with black text.
ButtonGood for
- Easter sale banner
- Garden show flyer
- Florist website
- Baby announcement card
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.
Spring Bloom palette as code
CSS variables
:root {
--spring-bloom-1: #FFF0F5;
--spring-bloom-2: #FFB6C1;
--spring-bloom-3: #FF69B4;
--spring-bloom-4: #90EE90;
--spring-bloom-5: #98FB98;
}Tailwind v4
@theme {
--color-spring-bloom-1: #FFF0F5;
--color-spring-bloom-2: #FFB6C1;
--color-spring-bloom-3: #FF69B4;
--color-spring-bloom-4: #90EE90;
--color-spring-bloom-5: #98FB98;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'spring-bloom': {
100: '#FFF0F5',
200: '#FFB6C1',
300: '#FF69B4',
400: '#90EE90',
500: '#98FB98',
},SCSS
$spring-bloom-1: #FFF0F5;
$spring-bloom-2: #FFB6C1;
$spring-bloom-3: #FF69B4;
$spring-bloom-4: #90EE90;
$spring-bloom-5: #98FB98;JSON
["#FFF0F5","#FFB6C1","#FF69B4","#90EE90","#98FB98"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.