Summer Color Palette
Sunshine yellow, tangerine, watermelon pink, lagoon turquoise and palm green. A bright, juicy summer palette for anything that should feel like a holiday.
Click any color to copy its HEX code.
Summer color codes
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Sand | #F6E7C8 | 246, 231, 200 | 40°, 72%, 87% | |
| Sunshine | #FFD23F | 255, 210, 63 | 46°, 100%, 62% | |
| Tangerine | #FF8C42 | 255, 140, 66 | 23°, 100%, 63% | |
| Watermelon | #EE4266 | 238, 66, 102 | 347°, 83%, 60% | |
| Lagoon | #1FB5AE | 31, 181, 174 | 177°, 71%, 42% | |
| Palm | #2F9C5A | 47, 156, 90 | 144°, 54%, 40% |
How to use this palette
A simple way to use 6 colors without chaos is the 60-30-10 rule: about 60% of the space in the lightest shade, 30% in a supporting color and 10% in the accent. For this palette that is Sand (#F6E7C8) as the base, Tangerine (#FF8C42) as the supporting color and Sunshine (#FFD23F) as the accent, with Watermelon (#EE4266) for text and fine details.
Summer
A quick preview of the palette with base, text and accent colors.
Sunshine TangerineWhere it works
Readable text color pairs
None of the pairs in this palette reach the 4.5:1 contrast needed for small text. Use near-black (#1B1A17) or white text on these colors, and keep the palette for backgrounds, shapes and decoration.
CSS variables
:root {
--sand: #F6E7C8;
--sunshine: #FFD23F;
--tangerine: #FF8C42;
--watermelon: #EE4266;
--lagoon: #1FB5AE;
--palm: #2F9C5A;
}