Palette

Building Blocks Bright

Bold and exciting, this palette brings to mind the colorful, classic building blocks of childhood imagination.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Building Blocks Bright 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 Building Blocks Bright.

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

Data visualization

#ef476f#ffd166#06d6a0#118ab2#073b4c

Palette guide

How to use Building Blocks Bright

Overview

The Building Blocks Bright palette is bold and exciting, bringing to mind the colorful, classic building blocks of childhood imagination. This vibrant collection features the energetic pink of #ef476f, the cheerful yellow of #ffd166, the fresh teal of #06d6a0, the strong blue of #118ab2, and the grounding dark blue of #073b4c. It's an excellent choice for designers aiming to create playful, dynamic, and highly engaging visuals, especially for projects targeting children or emphasizing creativity and simplicity. The palette's clear, distinct colors ensure a strong visual impact and easy differentiation.

Best used for

Educational apps and websites for children
Children's toy packaging and branding
Playful website designs and user interfaces
Event branding for family activities
Vibrant infographics and data visualization
Creative agency branding and presentations

Suggested color roles

primary

Use #118ab2 as a strong and reliable primary color, providing clarity and a sense of stability.

secondary

Apply #ef476f as a bold and energetic secondary color, perfect for engaging elements or calls to action.

accent

Introduce #ffd166 as a bright and cheerful accent, ideal for highlighting key information or adding a playful pop.

background

Utilize #06d6a0 as a vibrant and fresh teal background, offering a lively base for other colors.

text

For body text, #073b4c (deep dark blue) offers excellent readability against lighter colors in the palette, ensuring strong contrast.

Accessibility notes

The deep #073b4c offers excellent contrast for text against lighter colors in the palette, ensuring readability.
Ensure #ffd166 (yellow) has sufficiently dark text or is used as an accent, as light text on yellow can be unreadable.
The vibrant colors are generally good for distinguishing elements, but check combinations for color blindness.
Maintain consistent visual hierarchy using distinct colors for interactive states (hover, active) to aid navigation.

Recommended combinations

Playful Foundation

Ideal for main navigation, prominent calls to action, or energetic hero sections.

#118AB2 · #EF476F · #FFD166

Creative Stack

Great for infographics, step-by-step guides, or illustrative elements that require clear separation.

#06D6A0 · #073B4C · #EF476F

Vibrant Blocks

Perfect for illustrations, fun UI elements, or dynamic graphic patterns.

#FFD166 · #118AB2 · #06D6A0

CSS variables

:root {
  --building-blocks-bright-1: #ef476f;
  --building-blocks-bright-2: #ffd166;
  --building-blocks-bright-3: #06d6a0;
  --building-blocks-bright-4: #118ab2;
  --building-blocks-bright-5: #073b4c;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "building-blocks-bright": {
        1: "#ef476f",
        2: "#ffd166",
        3: "#06d6a0",
        4: "#118ab2",
        5: "#073b4c",
      }
    }
  }
}

Hex values

Color 1#ef476f

Color 2#ffd166

Color 3#06d6a0

Color 4#118ab2

Color 5#073b4c

Accessibility

Contrast checker

2.5:1Fail

1.9:1Fail

1.1:1Fail

3.3:1AA18

2.5:1Fail

1.3:1Fail

2.7:1Fail

8.4:1AAA

1.9:1Fail

1.3:1Fail

2.1:1Fail

6.4:1AA

1.1:1Fail

2.7:1Fail

2.1:1Fail

3:1AA18

3.3:1AA18

8.4:1AAA

6.4:1AA

3:1AA18

Similar palettes

More like Building Blocks Bright

View all vibrant

Carnival Carousel Ride

Carnival Firework Pop

Cotton Candy Carousel

Crayola Box Blast

Gumball Machine Frenzy

Jellybean Jive Party