Warm Color Palette Generator
Warm colors run from red through orange to yellow — roughly the half of the wheel associated with fire and sunlight. They advance visually, feel energetic and cosy, and raise the perceived temperature of a room or page.
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.23:1 AA pass
Export
CSS custom properties, Tailwind v4 @theme (in OKLCH), Tailwind v3 config, JSON or SCSS.
:root {
--color-purple: #87226A;
--color-dark-slate-gray: #332600;
--color-dark-khaki: #CCB577;
--color-misty-rose: #FFE1F6;
--color-dark-gold-enrod: #AE8A00;
}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 | #87226A | #332600 | #CCB577 | #FFE1F6 | #AE8A00 |
|---|---|---|---|---|---|
| #87226A | Aa1.73:1Fail | Aa4.23:1Large | Aa7.03:1AAA | Aa2.60:1Fail | |
| #332600 | Aa1.73:1Fail | Aa7.36:1AAA | Aa12.23:1AAA | Aa4.53:1AA | |
| #CCB577 | Aa4.23:1Large | Aa7.36:1AAA | Aa1.66:1Fail | Aa1.62:1Fail | |
| #FFE1F6 | Aa7.03:1AAA | Aa12.23:1AAA | Aa1.66:1Fail | Aa2.69:1Fail | |
| #AE8A00 | Aa2.60:1Fail | Aa4.53:1AA | Aa1.62:1Fail | Aa2.69: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 warm palettes
Ember
Terracotta
Harvest
Peach
Tips for warm palettes
- Balance warm palettes with one cool or neutral to rest the eye.
- Warm neutrals (tan, clay, brown) keep warm palettes grounded.
- Reds and oranges draw attention: reserve the strongest for actions.
Want a palette written for your project? Describe it on the palette generator and the AI will suggest one.
Frequently asked questions
What are warm colors?
Red, orange, yellow and the hues between them, plus browns and warm neutrals with a red or yellow undertone.
Are warm colors good for websites?
Yes for food, hospitality and energetic brands. Keep backgrounds light or neutral and use the warm hues for highlights.