Warm color palettes

Where warm palettes work

• Restaurant, recipe, and food delivery interfaces
• Booking pages for therapists, coaches, and wellness studios
• Community and membership sites where a friendly tone matters
• Seasonal campaigns that sit on top of an existing site

Three lightness bands

About two thirds of the swatches in this collection are reds and oranges, and another fifth are yellows and pinks. What varies most is lightness, and the palettes fall into three rough bands, each with a different job:

• Light sets, such as #ffbe98, #feece2, #f7ded0, #e2bfb3, work as page and card colors but need an added dark text color.
• Mid sets of coral, rose, and brick are the hardest to use, because many of their colors sit near the 4.5:1 line with white text.
• Dark sets can carry a full theme. Some, like wine #561c24 with linen #e8d8c4, already contain a text color; others, like the cocoa set that starts at #3e3232, need a lighter one added.

Wine and linen: a worked example

#561c24, #6d2932, #c7b7a3, #e8d8c4 is a complete warm system on its own. Use #e8d8c4 for the page, #c7b7a3 for cards and dividers, #561c24 for body text (9.48:1 on the page color), and #6d2932 for buttons, where white labels measure 10.43:1. Even on the darker linen, #6d2932 text stays at 5.33:1.

:root {
  --bg: #e8d8c4;
  --surface: #c7b7a3;
  --text: #561c24;
  --action: #6d2932;
  --on-action: #ffffff;
}

Where the red lands

Mid-reds sit close to the 4.5:1 line with white text, so small shifts matter. In #a94438, #d24545, #e6baa3, #e4debe, white on the brick #a94438 measures 5.88:1, but white on the brighter #d24545 measures 4.49:1, which narrowly fails for normal-size text. Make the darker red the button and keep the brighter one for illustration or large display type.

A red or coral brand color also makes error states harder to spot. If your primary action is red, give errors an icon and a written message, and consider a distinct error hue, rather than relying on red alone.

Pairing the colors

Pick a warm off-white or linen for the base, a deep wine or brown for text, and one red or coral for actions. If you need a cool color for information or links, keep it muted, such as a grey-blue, so it does not compete with the warm accent.

Contrast and readability

Warm mid-tones that look alike can measure differently. In #fdf0d1, #ac7d88, #85586f, #643843, white text passes on #85586f (5.80:1) but not on #ac7d88 (3.48:1). Coral #fc819e needs a dark label: white is 2.39:1, black 8.77:1. The darkest swatch, #643843, gives 8.48:1 on the cream.

Questions

Which colors count as warm?

Reds, oranges, and yellows, along with pinks, browns, and tans that lean toward them. Some neutrals are warm too: a grey with a little red or yellow in it, such as #e4debe, reads as warm next to a blue-grey.

Do warm palettes work in dark mode?

Yes, if the dark base is a warm brown rather than black. In #3e3232, #503c3c, #7e6363, #a87c7c, the rose-brown #a87c7c on #3e3232 is 3.42:1, which suits borders and large type. For body text, bring in a lighter linen such as #e8d8c4, which measures 8.82:1 on the same base.