Palette

Candy Cane Stripes

A classic, cheerful combination evoking the festive and sweet spirit of candy canes.

VibrantPlayful5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Candy Cane Stripes reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Candy Cane Stripes.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#FF0000#FFFFFF#B22222#E0FFFF#DC143C

Palette guide

How to use Candy Cane Stripes

Overview

The Candy Cane Stripes palette offers a classic, cheerful combination that evokes the festive and sweet spirit of candy canes. This vibrant collection features bold reds like #FF0000 and #DC143C, complemented by the slightly deeper #B22222. Crisp whites, including #FFFFFF and the very light blue-white #E0FFFF, provide essential contrast. Designers and developers can leverage these iconic hues to create energetic, joyful, and instantly recognizable holiday-themed designs, perfect for seasonal campaigns, playful branding, and festive digital experiences that delight and engage users.

Best used for

Holiday season promotions and sales
Festive packaging and product design
Children's party invitations and decor
Winter event branding and marketing
Vibrant website hero sections
Christmas decorations and digital assets

Suggested color roles

primary

Use #FF0000 (bright, energetic red) as the main festive color for high-impact visual elements.

secondary

Employ #B22222 (deeper, grounded red) for stability, important text, or as a contrasting stripe.

accent

Introduce #DC143C (crimson red) for strong, bold highlights, calls to action, or decorative details.

background

Utilize #FFFFFF (clean, crisp white) as the ideal background to ensure maximum contrast and brightness.

text

Apply #B22222 (dark red) for primary text on white backgrounds to ensure excellent readability.

Accessibility notes

Text in #B22222 or #DC143C on #FFFFFF background will provide good contrast (WCAG AA).
Avoid using #FF0000 as primary body text due to high vibrancy and potential eye strain; best for headings or accents.
The very light #E0FFFF should primarily be used as a background or very large decorative element, not for text.
Ensure sufficient contrast for all text elements, especially against the lighter colors in the palette.

Recommended combinations

Classic Stripe

Perfect for traditional holiday themes, bold branding, or creating iconic candy cane patterns.

#FFFFFF · #FF0000 · #B22222

Vibrant Cheer

Ideal for calls to action, festive banners, or any element requiring a strong, cheerful visual punch.

#DC143C · #FFFFFF · #FF0000

Cool Accent

Suitable for subtle background elements, frosty touches, or to add a hint of cool contrast.

#E0FFFF · #B22222 · #FFFFFF

CSS variables

:root {
  --candy-cane-stripes-1: #FF0000;
  --candy-cane-stripes-2: #FFFFFF;
  --candy-cane-stripes-3: #B22222;
  --candy-cane-stripes-4: #E0FFFF;
  --candy-cane-stripes-5: #DC143C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "candy-cane-stripes": {
        1: "#FF0000",
        2: "#FFFFFF",
        3: "#B22222",
        4: "#E0FFFF",
        5: "#DC143C",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#FFFFFF

Color 3#B22222

Color 4#E0FFFF

Color 5#DC143C

Accessibility

Contrast checker

4:1AA18

1.7:1Fail

3.8:1AA18

1.2:1Fail

4:1AA18

6.7:1AA

1.1:1Fail

5:1AA

1.7:1Fail

6.7:1AA

6.3:1AA

1.3:1Fail