Palette

Vivid Toy Box Joy

A cheerful explosion of primary colors, evoking the pure, unadulterated joy of a child's colorful toy box.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vivid Toy Box Joy 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 Vivid Toy Box Joy.

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

Data visualization

#FF0000#0000FF#FFFF00#00FF00#FFA500

Palette guide

How to use Vivid Toy Box Joy

Overview

The Vivid Toy Box Joy palette radiates pure, unadulterated cheerfulness with its classic primary and secondary colors. Featuring the bold red #FF0000, the deep blue #0000FF, the bright yellow #FFFF00, the lively green #00FF00, and the vibrant orange #FFA500, this collection is designed to evoke childhood nostalgia and playful energy. Designers can use these hex codes to create dynamic, friendly, and visually engaging projects that appeal to a wide audience. Developers will find this palette perfect for children's brands, educational content, festive marketing, or any platform seeking a joyful and straightforward aesthetic, ensuring an instantly recognizable and fun user experience.

Best used for

Children's clothing and toy brands
Educational apps and websites
Family-friendly event promotions
Playful game UI design
Creative art projects and illustrations
Festive holiday decorations

Suggested color roles

primary

Use #FF0000 or #0000FF for dominant elements, creating strong and recognizable focal points.

secondary

Employ #FFA500 or #00FF00 for supporting sections or subheadings, adding vibrant complementary energy.

accent

Highlight key information or interactive states with #FFFF00, providing a bright, attention-grabbing spark.

background

A clean white or light gray background will allow these rich, saturated colors to shine without competition.

text

For optimal readability, use black text on #FFFF00 and white text on #FF0000, #0000FF, #00FF00, and #FFA500.

Accessibility notes

Ensure all text and interactive elements meet WCAG contrast guidelines, typically requiring black or white text.
Avoid using mid-tones like #00FF00 for small text on similarly bright backgrounds.
Be cautious with color combinations like #FF0000 on #FFA500 for text due to low contrast.
Provide alternative visual cues for color-coded information, as this highly saturated palette can be challenging for some colorblind users.

Recommended combinations

Primary Fun

Classic and bold for main headings, iconic logos, and cheerful graphics.

#FF0000 · #0000FF · #FFFF00

Playful Mix

Great for dynamic illustrations, interactive elements, and energetic accents.

#00FF00 · #FFA500 · #FF0000

Bright & Bold

Ideal for vibrant backgrounds, highlights, and engaging call-to-action buttons.

#FFFF00 · #0000FF · #00FF00

CSS variables

:root {
  --vivid-toy-box-joy-1: #FF0000;
  --vivid-toy-box-joy-2: #0000FF;
  --vivid-toy-box-joy-3: #FFFF00;
  --vivid-toy-box-joy-4: #00FF00;
  --vivid-toy-box-joy-5: #FFA500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vivid-toy-box-joy": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#00FF00",
        5: "#FFA500",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#00FF00

Color 5#FFA500

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

2.9:1Fail

2:1Fail

2.1:1Fail

8:1AAA

6.3:1AA

4.4:1AA18

3.7:1AA18

8:1AAA

1.3:1Fail

1.8:1Fail

2.9:1Fail

6.3:1AA

1.3:1Fail

1.4:1Fail

2:1Fail

4.4:1AA18

1.8:1Fail

1.4:1Fail

Similar palettes

More like Vivid Toy Box Joy

Bright Fairground Lights