Palette

Primary Paintbox

The fundamental, joyous colors of a child's first paint set, vibrant and full of simple delight.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#0000FF#FFFF00#008000#FFA500

Palette guide

How to use Primary Paintbox

Overview

The Primary Paintbox palette is a vibrant and cheerful collection of fundamental colors, reminiscent of a child's first paint set. It features the bold #FF0000 (Red), the deep #0000FF (Blue), and the sunny #FFFF00 (Yellow), forming the core primary triad. These are perfectly complemented by the stable #008000 (Green) and the energetic #FFA500 (Orange), adding a full spectrum of basic, highly saturated hues. This palette is ideal for designers and developers seeking to convey joy, simplicity, and creativity. It's particularly effective for projects related to children, educational content, or any design that benefits from clear, distinct, and universally appealing color choices, ensuring a bright and engaging user experience.

Best used for

Children's art supplies branding
Educational software interfaces
Playful website designs
Early learning program materials
Creative workshop promotions
Vibrant event posters

Suggested color roles

primary

Use #FF0000 (Red) or #0000FF (Blue) as dominant brand colors or for key calls-to-action to convey energy and clarity.

secondary

Employ #FFFF00 (Yellow) for highlights, alerts, or to add a cheerful and attention-grabbing element.

accent

Apply #008000 (Green) or #FFA500 (Orange) for interactive elements, icons, or decorative flourishes to add variety and warmth.

background

A clean white or very light neutral background works best to allow these vibrant colors to pop without visual clutter.

text

For optimal readability on any of these bright colors, use pure white or pure black text. Avoid using colors from this palette for text on other palette colors.

Accessibility notes

Most color combinations from this palette will have poor contrast for text. Always use black or white text for readability.
Be cautious when pairing #FFFF00 with other light colors; use a strong outline or shadow if necessary for distinction.
Ensure interactive elements are clearly distinguishable, especially for users with color vision deficiencies, by providing alternative cues.
Test all text and interactive element color pairings against WCAG standards, aiming for AA or AAA compliance where possible.

Recommended combinations

Core Creativity

Excellent for main branding, educational content, or eye-catching headers, establishing a classic and engaging tone.

#FF0000 · #0000FF · #FFFF00

Energetic Blend

Ideal for playful accents, interactive buttons, or illustrations that require a fresh, energetic, and youthful appeal.

#FFA500 · #008000 · #FFFF00

Bold Contrast

Suitable for creating dynamic posters, game interfaces, or impactful call-out boxes, ensuring high visibility and energy.

#0000FF · #FF0000 · #FFA500

CSS variables

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

Tailwind config

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

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#008000

Color 5#FFA500

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

1.3:1Fail

2:1Fail

2.1:1Fail

8:1AAA

1.7:1Fail

4.4:1AA18

3.7:1AA18

8:1AAA

4.8:1AA

1.8:1Fail

1.3:1Fail

1.7:1Fail

4.8:1AA

2.6:1Fail

2:1Fail

4.4:1AA18

1.8:1Fail

2.6:1Fail

Similar palettes

More like Primary Paintbox