Palette

Playful Carnival Lights

Captures the joyful chaos and dazzling colors of a lively carnival night with flashing lights.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Playful Carnival Lights 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 Playful Carnival Lights.

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

Data visualization

#F95738#F7B32B#2E86AB#7F2F80#5CBA6E

Palette guide

How to use Playful Carnival Lights

Overview

The Playful Carnival Lights palette captures the dazzling energy of a lively carnival night, featuring a bold red-orange (#F95738), a brilliant golden yellow (#F7B32B), a deep teal (#2E86AB), a rich purple (#7F2F80), and a vibrant green (#5CBA6E). This dynamic mix offers designers a powerful tool for creating engaging, high-energy visuals. The contrast between the warm and cool tones, along with the vivid saturation, makes it ideal for projects that need to feel exciting and memorable. Developers will appreciate the distinctness of each hex code for clear UI element differentiation and a visually impactful user experience.

Best used for

Festival and concert branding
Interactive digital experiences
Youth-focused apps and websites
Creative marketing materials
Event signage and decor
Animated graphics and illustrations

Suggested color roles

primary

Utilize the energetic red-orange (#F95738) for main calls-to-action, primary buttons, or key headings to grab immediate attention.

secondary

The golden yellow (#F7B32B) is excellent for secondary UI elements, highlights, or to add warmth and cheerfulness.

accent

The deep teal (#2E86AB) or rich purple (#7F2F80) can provide sophisticated contrast for notifications, icons, or interactive states.

background

For a clean look, use a dark neutral like charcoal or a very light off-white. For a bolder statement, consider #2E86AB or #7F2F80 as a background for specific sections with light text.

text

On light backgrounds, use a dark gray or black. For text on the darker palette colors, white or a very light gray is highly recommended.

Accessibility notes

Ensure sufficient contrast for #F95738 and #F7B32B when used with white text; black text is often better.
The vibrant green #5CBA6E might require dark text for optimal readability on its own.
Avoid pairing #F7B32B with #5CBA6E for critical information due to potential low contrast issues.
White text generally works well on #2E86AB, #7F2F80, and #5CBA6E, but always verify contrast ratios.

Recommended combinations

Electric Glow

Perfect for high-impact headers, vibrant banners, or dynamic interactive elements.

#F95738 · #F7B32B · #2E86AB

Mystic Pop

Creates a captivating and slightly mysterious feel, suitable for unique branding or feature sections.

#7F2F80 · #5CBA6E · #F95738

Vibrant Contrast

Excellent for dashboard elements, data visualization, or distinct content blocks requiring clear separation.

#2E86AB · #F7B32B · #7F2F80

CSS variables

:root {
  --playful-carnival-lights-2-1: #F95738;
  --playful-carnival-lights-2-2: #F7B32B;
  --playful-carnival-lights-2-3: #2E86AB;
  --playful-carnival-lights-2-4: #7F2F80;
  --playful-carnival-lights-2-5: #5CBA6E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-carnival-lights-2": {
        1: "#F95738",
        2: "#F7B32B",
        3: "#2E86AB",
        4: "#7F2F80",
        5: "#5CBA6E",
      }
    }
  }
}

Hex values

Color 1#F95738

Color 2#F7B32B

Color 3#2E86AB

Color 4#7F2F80

Color 5#5CBA6E

Accessibility

Contrast checker

1.8:1Fail

1.3:1Fail

2.5:1Fail

1.3:1Fail

1.8:1Fail

2.2:1Fail

4.4:1AA18

1.3:1Fail

2.2:1Fail

2:1Fail

1.7:1Fail

2.5:1Fail

4.4:1AA18

2:1Fail

3.3:1AA18

1.3:1Fail

1.7:1Fail

3.3:1AA18

Similar palettes

More like Playful Carnival Lights

Playful Carnival Lights

See it in context.

Ready when you are.

Built with Playful Carnival Lights.

How to use Playful Carnival Lights

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Electric Glow

Mystic Pop

Vibrant Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Playful Carnival Lights