Palette

Playroom Primary

A cheerful and straightforward palette reminiscent of childhood toys and fun, bold and energetic.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Playroom Primary 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 Playroom Primary.

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

Data visualization

#FF0000#0000FF#FFFF00#008000#FFFFFF

Palette guide

How to use Playroom Primary

Overview

The Playroom Primary palette is a cheerful and straightforward collection reminiscent of childhood toys and fun, offering bold and energetic colors. With classic hues like the pure red #FF0000, the deep blue #0000FF, the sunny yellow #FFFF00, the rich green #008000, and a clean white #FFFFFF, this palette is perfect for designers and developers aiming to create clear, inviting, and highly accessible experiences. Its foundational colors make it excellent for projects that need to convey simplicity, enthusiasm, and a welcoming, playful atmosphere, especially for younger audiences. The inclusion of pure white provides essential contrast and versatility, making this palette incredibly practical for a wide range of applications.

Best used for

Educational apps and children's websites
Toy store branding and packaging
Kids' activity books and learning materials
Family-friendly event marketing
Playroom decor and furniture design
Basic UI design requiring high contrast

Suggested color roles

primary

Designate #FF0000 as a commanding primary for calls-to-action or main branding elements, demanding immediate attention.

secondary

Utilize #0000FF for stable navigation or secondary interactive elements, providing a grounded and clear contrast.

accent

Highlight critical content or playful graphics with #FFFF00 for an undeniable burst of sunshine and clarity.

background

Employ #FFFFFF as a clean, versatile background for main content areas, ensuring maximum readability and freshness.

text

Pair with #000000 (pure black) or #0000FF for text on white backgrounds, and white text for sufficient contrast on darker primary colors.

Accessibility notes

The #FFFFFF background offers excellent contrast with #FF0000, #0000FF, and #008000 for text readability (WCAG AAA).
Ensure sufficient contrast when placing #FFFF00 text on #FFFFFF; it's generally not recommended for body text.
Be cautious with adjacent use of #FF0000 (red) and #008000 (green) for critical information due to potential color blindness issues.
Leverage #FFFFFF as a canvas to make other vibrant colors pop without sacrificing readability or accessibility.

Recommended combinations

Clean & Bold

Ideal for clear interfaces, strong branding, and highly readable content blocks.

#FFFFFF · #FF0000 · #0000FF

Playful Accents

Perfect for dynamic illustrations, interactive elements, or highlighting key information against a white background.

#FFFF00 · #008000 · #FF0000

Structured Primary

Use for well-defined UI components, navigation bars, or presenting data clearly and engagingly.

#0000FF · #FFFFFF · #008000

CSS variables

:root {
  --playroom-primary-1: #FF0000;
  --playroom-primary-2: #0000FF;
  --playroom-primary-3: #FFFF00;
  --playroom-primary-4: #008000;
  --playroom-primary-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playroom-primary": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#008000",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#008000

Color 5#FFFFFF

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

1.3:1Fail

4:1AA18

2.1:1Fail

8:1AAA

1.7:1Fail

8.6:1AAA

3.7:1AA18

8:1AAA

4.8:1AA

1.1:1Fail

1.3:1Fail

1.7:1Fail

4.8:1AA

5.1:1AA

4:1AA18

8.6:1AAA

1.1:1Fail

5.1:1AA

Similar palettes

More like Playroom Primary

View all vibrant

Crayola Box Blast

Carnival Pop Art

Playroom Primary Brights

Primary Block Fun

Primary Toy Block Party

Art Studio Chaos