Back to palettes

Palette

Psychedelic Tie-Dye

A dizzying array of saturated colors, embodying the free-spirited fun of psychedelic tie-dye art.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Psychedelic Tie-Dye 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 Psychedelic Tie-Dye.

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

Data visualization

#FF00FF#00FF00#FFFF00#FF0000#0000FF

Palette guide

How to use Psychedelic Tie-Dye

Overview

The "Psychedelic Tie-Dye" palette is a joyful explosion of primary and secondary colors, directly inspired by the free-spirited fun of classic tie-dye art. Featuring bold magenta #FF00FF, vibrant green #00FF00, intense yellow #FFFF00, striking red #FF0000, and pure blue #0000FF, this collection is all about maximum saturation and playful contrast. Designers can leverage these hex codes for projects that require a whimsical, retro, or highly energetic aesthetic. Developers will find this palette excellent for creating dynamic web backgrounds, playful app interfaces, or marketing materials that aim to evoke nostalgia and a sense of creative freedom.

Best used for

  • Art and craft websites
  • Children's educational apps
  • Retro fashion blogs
  • Festival and concert branding
  • Creative workshops promotions
  • Playful social media content

Suggested color roles

primary

#FF0000 - A strong, foundational red, perfect for bold statements, primary calls-to-action, or energetic header sections.

secondary

#0000FF - A classic, vivid blue, excellent for secondary navigation, important links, or to provide a cool contrast to the warmer tones.

accent

#FFFF00 - A brilliant, sunny yellow, ideal for highlighting interactive elements, small bursts of information, or adding a cheerful pop.

background

#FF00FF - A vibrant magenta, suitable for a dynamic background that sets an energetic and playful tone, allowing other colors to swirl.

text

#000000 (black) - Provides optimal contrast and classic readability against these highly saturated and often light-colored backgrounds, ensuring clarity.

Accessibility notes

  • Due to the high saturation, ensure text colors have significant contrast against their backgrounds for readability.
  • Avoid placing #FFFF00 text on white or very light backgrounds; it needs a dark contrasting color.
  • Use a consistent, neutral text color like black or white across the diverse palette to maintain legibility.
  • Consider larger font sizes or bolding when using lighter colors like #FFFF00 for text, even with good contrast.

Recommended combinations

Rainbow Swirl

Perfect for creating a classic tie-dye feel in headers, banners, or graphic elements that need a full spectrum of energy.

#FF0000 · #0000FF · #FFFF00

Primary Pop

Excellent for UI elements where you want distinct, vibrant blocks of color, such as card designs or interactive dashboards.

#FF00FF · #00FF00 · #0000FF

Energetic Contrast

Use for call-to-action buttons or highlights where the aim is to create maximum visual attention and a playful mood.

#FFFF00 · #FF0000 · #00FF00

CSS variables

:root {
  --psychedelic-tie-dye-1: #FF00FF;
  --psychedelic-tie-dye-2: #00FF00;
  --psychedelic-tie-dye-3: #FFFF00;
  --psychedelic-tie-dye-4: #FF0000;
  --psychedelic-tie-dye-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "psychedelic-tie-dye": {
        1: "#FF00FF",
        2: "#00FF00",
        3: "#FFFF00",
        4: "#FF0000",
        5: "#0000FF",
      }
    }
  }
}

Related searches

tie-dye color schemepsychedelic rainbow palettebright playful colorsretro vibrant designsaturated primary colors

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FF00
·
Color 3#FFFF00
·
Color 4#FF0000
·
Color 5#0000FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
2.9:1Fail
1.3:1Fail
2.7:1Fail
2
2.3:1Fail
1.3:1Fail
2.9:1Fail
6.3:1AA
3
2.9:1Fail
1.3:1Fail
3.7:1AA18
8:1AAA
4
1.3:1Fail
2.9:1Fail
3.7:1AA18
2.1:1Fail
5
2.7:1Fail
6.3:1AA
8:1AAA
2.1:1Fail

Similar palettes

More like Psychedelic Tie-Dye

View all vibrant
Atomic Diner Swirl
Bubblegum Pop Blast
Bubblegum Pop Burst
Bubblegum Pop Zing
Bubblegum Pop Zing
Carnival Carousel Fun