Summer Color Palette

A summer palette usually pairs clear sea and sky blues with a hot accent — coral, watermelon or sunshine yellow — and a pale sand or white for space. Shuffle below for endless variations; every one keeps a dark and a light color so text stays readable.

Try:

See it on a page

Lightest color becomes the background, darkest the text, the most saturated one the button.

NorthwindPricing · Docs · Blog

Ship the release notes your users actually read.

Body text in your darkest color on your lightest: 8.66:1 AA pass

Start freeSee a demo
Surface card with a secondary accent

Export

CSS custom properties, Tailwind v4 @theme (in OKLCH), Tailwind v3 config, JSON or SCSS.

:root {
  --color-dark-slate-gray: #0B4F6C;
  --color-deep-sky-blue: #01BAEF;
  --color-snow: #FBFBFF;
  --color-gold: #FFD25A;
  --color-coral: #FF7B54;
}

Contrast between every pair

WCAG 2.2: 4.5:1 for body text (AA), 3:1 for large text and UI parts, 7:1 for AAA.

Contrast ratio of every text color (rows) on every background (columns)
Text / background#0B4F6C#01BAEF#FBFBFF#FFD25A#FF7B54
#0B4F6CAa3.94:1LargeAa8.66:1AAAAa6.22:1AAAa3.49:1Large
#01BAEFAa3.94:1LargeAa2.19:1FailAa1.57:1FailAa1.12:1Fail
#FBFBFFAa8.66:1AAAAa2.19:1FailAa1.39:1FailAa2.47:1Fail
#FFD25AAa6.22:1AAAa1.57:1FailAa1.39:1FailAa1.77:1Fail
#FF7B54Aa3.49:1LargeAa1.12:1FailAa2.47:1FailAa1.77:1Fail

Get an AI critique of this palette

The contrast numbers are calculated exactly in your browser and passed to the AI, so its advice starts from real ratios.

Hand-picked summer palettes

Beach day

8.66:1 text contrast · Edit in generator

Watermelon

10.89:1 text contrast · Edit in generator

Color analysis: soft Summer

4.20:1 text contrast · Edit in generator

Summer in seasonal color analysis

In seasonal color analysis, “Summer” describes people whose colouring is cool and soft: ash or light brown hair, pink or neutral undertones and low contrast between hair, skin and eyes. Their palette is cool and slightly greyed — powder blue, lavender, dusty rose, soft teal and cool grey — rather than the bright beach colors a summer-themed design uses. Sub-types are usually called Light, True (Cool) and Soft Summer.

Tips for summer palettes

  • Keep one sandy off-white for backgrounds so the bright hues have room.
  • Use the deep sea blue, not the coral, for body text.
  • Let one hot accent carry calls to action; two compete.

Want one written for your project? Describe it on the AI palette generator, then check it with the accessible palette checker.

Frequently asked questions

What colors are in a summer color palette?

For design and decor: aqua, turquoise and sky blue, coral or watermelon pink, sunshine yellow and a sandy white. In seasonal color analysis the Summer palette is different: cool, soft colors such as powder blue, lavender, dusty rose and cool grey.

What is a summer in color analysis?

Someone whose natural colouring is cool-toned and low to medium contrast. The theory says cool, muted, light-to-medium colors flatter them most, and very warm or very saturated colors overpower them. It is a styling convention, not a science, so treat it as a starting point.

Do summer colors work for a website?

Yes, for travel, food, drinks and lifestyle brands. Use the darkest blue for text and the light sand for backgrounds; bright coral and yellow rarely reach 4.5:1 contrast as text on white.