Find summer color palettes with citrus, aqua, sky, and coral tones for travel brands, seasonal campaigns, outdoor products, and bright interface accents.
Summer palettes are light and saturated: sun yellow, citrus orange, sky blue, aqua, and leaf green, usually with a sand or cream neutral. They suit short-lived, high-energy pages, and most sets need a dark text color added before they work in an interface.
Summer palettes here are both light and saturated: about seven in ten swatches are above 60% HSL lightness, and average saturation is around 74%. Yellow and orange make up over 40% of the colors, with sky blue and aqua as the next largest group. Only about a quarter of the palettes contain a pair that reaches 4.5:1, so most need an added text color.
There are two moods in the collection. Beach and citrus sets such as #fff78a, #ffe382, #ffc47e, #ffad84 are warm and very light. Leafy sets such as #4f6f52, #739072, #86a789, #d2e3c8 are greener and darker; their deepest green holds white button labels (5.63:1 on #4f6f52).
#e0f4ff, #87c4ff, #39a7ff, #ffeed9 is a typical summer set: pale sky, mid blue, bright azure, and sand. It looks clear, but white text on #39a7ff measures only 2.58:1. Bright sky blues are much lighter than they appear.
Summer palettes often appear as a temporary campaign on an existing site. If your components already read from custom properties, the seasonal palette can be a scoped override instead of a rebuild. Keep your normal text color unless the summer one passes on every surface.
[data-theme="summer"] {
--bg: #e0f4ff;
--surface: #ffeed9;
--action: #39a7ff;
--on-action: #1d3557;
--link: #0b5394;
}Use sand or a pale sky as the base and let one saturated color lead, usually orange or azure. Pair warm with cool rather than adding a third bright hue: orange with sky blue, or coral with aqua, gives contrast of hue without crowding the page.
Saturated summer colors are usually too light for white text: white on orange #ffb534 is 1.76:1, black is 11.91:1. Even the darkest green in the leafy set #4f6f52, #739072, #86a789, #d2e3c8 reaches only 4.17:1 on its pale swatch, enough for large text but not body copy.
Updated