Christmas color palettes

Where Christmas palettes work

• Seasonal homepage takeovers and gift guides
• Holiday menus, markets and event invitations
• December email headers and social graphics

A small collection that leans red

There are 26 Christmas palettes here, and they are warmer than the red-and-green stereotype suggests. Reds, burgundies and oranges make up about 60% of the swatches; greens are about a quarter, and many of those are muted sage and olive (#799351, #A4B787, #99B898) rather than bright holly. Only a few carry a deep evergreen, such as #2E5A1C.

Several palettes skip green entirely: a burgundy and navy set (#161853, #292C6D, #FAEDF0, #EC255A) and a fireside set of wine, brick, amber and wheat (#781D42, #A3423C, #DE834D, #F0D290). Both read as seasonal without looking like wrapping paper.

Red and green often share the same lightness

Faded red #DD4A48 and moss green #4E9525 look like opposites, but their contrast with each other is 1.10:1. In grayscale they are the same gray, and for readers with red-green color-vision deficiency (roughly 1 in 12 men and 1 in 200 women) they can be hard to tell apart.

The fix is to separate them by lightness, not just hue. Use a dark green such as #2E5A1C for large areas or text, and keep red for a single call to action. Sale and stock badges should always include a word, not only a color.

Adding a seasonal theme without a redesign

If the site already uses CSS custom properties, a seasonal palette can be one class on the html or body element, added in December and removed in January. Override only the tokens that change.

• #4F091D on #F5EEDC is 13.06:1 for body text.
• #2E5A1C carries white labels at 8.09:1, and as text on #F5EEDC it is 6.99:1.
• #DD4A48 takes white text at 4.08:1 and is 3.53:1 on the paper, so it suits large headings, badges with large bold text and icons, not small labels.

.theme-christmas {
  --surface: #f5eedc;   /* warm paper */
  --ink: #4f091d;       /* burgundy text, 13.06:1 */
  --primary: #2e5a1c;   /* white label 8.09:1 */
  --highlight: #dd4a48; /* large text and icons only */
}

Pairing the colors

Use a warm paper such as #F5EEDC instead of white, burgundy for text, deep green for primary buttons and red for one highlight. Amber or wheat such as #F0D290 can stand in for gold.

Contrast and readability

The brighter seasonal colors are weak button fills: white on #4E9525 is 3.72:1 and on #DD4A48 is 4.08:1, so both fail for small labels. The deeper #2E5A1C gives 8.09:1. Label sale and stock states with text, not only red or green.

Questions

What are the traditional Christmas colors?

Red, green, gold and white, with silver and deep blue as common secondary choices. In HEX terms from this page: burgundy #4F091D or #781D42, red #DD4A48, evergreen #2E5A1C, sage #A4B787, amber #F0D290 and warm white #F5EEDC.

How do I add Christmas colors to a website without redesigning it?

Swap the surface, accent and highlight tokens through a seasonal class and leave layout, type and spacing alone. Keep your normal text color if it already passes on the new surface, and re-check button labels, since seasonal reds and greens are often lighter than a typical brand blue.