Cool Color Palette Generator
Cool colors run from green through blue to violet — the half of the wheel associated with water, sky and shade. They recede visually, feel calm and trustworthy, and suit technology, health and finance.
See it on a page
Lightest color becomes the background, darkest the text, the most saturated one the button.
Ship the release notes your users actually read.
Body text in your darkest color on your lightest: 12.91:1 AA pass
Export
CSS custom properties, Tailwind v4 @theme (in OKLCH), Tailwind v3 config, JSON or SCSS.
:root {
--color-dark-green: #006242;
--color-midnight-blue: #232444;
--color-light-sky-blue: #90BBED;
--color-pale-turquoise: #C1FCD7;
--color-medium-purple: #8A7BEA;
}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.
| Text / background | #006242 | #232444 | #90BBED | #C1FCD7 | #8A7BEA |
|---|---|---|---|---|---|
| #006242 | Aa2.00:1Fail | Aa3.72:1Large | Aa6.43:1AA | Aa2.15:1Fail | |
| #232444 | Aa2.00:1Fail | Aa7.47:1AAA | Aa12.91:1AAA | Aa4.33:1Large | |
| #90BBED | Aa3.72:1Large | Aa7.47:1AAA | Aa1.72:1Fail | Aa1.72:1Fail | |
| #C1FCD7 | Aa6.43:1AA | Aa12.91:1AAA | Aa1.72:1Fail | Aa2.97:1Fail | |
| #8A7BEA | Aa2.15:1Fail | Aa4.33:1Large | Aa1.72:1Fail | Aa2.97: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 cool palettes
Glacier
Lagoon
Dusk
Nordic
Tips for cool palettes
- Add a warm accent (orange, coral) for calls to action.
- Cool greys keep the palette consistent in UI surfaces.
- Vary lightness strongly — many blues and greens share similar luminance.
Want a palette written for your project? Describe it on the palette generator and the AI will suggest one.
Frequently asked questions
What are cool colors?
Green, blue, violet and the hues between them, plus greys with a blue undertone.
Is green warm or cool?
Green sits on the boundary. Yellow-greens feel warm; blue-greens feel cool.