Summer Solstice color palette
The longest day of the year, in color. Orange #FFA500, tomato red and gold carry the heat, while turquoise #00CED1 and royal blue #4169E1 are the pool and the sky. Saturation is high across the board. Royal blue is the darkest color here, so it's the one to use for type. Put it on a music festival lineup or a summer camp website.
Summer Solstice palette in use
Use white as the base with #4169E1 for headings and links. #FF6347 is the call-to-action color, #FFD700 and #FFA500 work for banners and badges, and #00CED1 for icons.
This pair measures 14.97:1, so it works for body text too. The button uses #FF6347 with black text.
ButtonGood for
- Music festival lineup
- Summer camp website
- Pool party invite
- Outdoor cinema poster
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#4169E1 | #FFD700 | 3.45:1 | AA large |
Summer Solstice palette as code
CSS variables
:root {
--summer-solstice-1: #FFA500;
--summer-solstice-2: #FF6347;
--summer-solstice-3: #FFD700;
--summer-solstice-4: #00CED1;
--summer-solstice-5: #4169E1;
}Tailwind v4
@theme {
--color-summer-solstice-1: #FFA500;
--color-summer-solstice-2: #FF6347;
--color-summer-solstice-3: #FFD700;
--color-summer-solstice-4: #00CED1;
--color-summer-solstice-5: #4169E1;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'summer-solstice': {
100: '#FFA500',
200: '#FF6347',
300: '#FFD700',
400: '#00CED1',
500: '#4169E1',
},SCSS
$summer-solstice-1: #FFA500;
$summer-solstice-2: #FF6347;
$summer-solstice-3: #FFD700;
$summer-solstice-4: #00CED1;
$summer-solstice-5: #4169E1;JSON
["#FFA500","#FF6347","#FFD700","#00CED1","#4169E1"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.