Palette

Abstract Expression Brush

A raw, unbridled explosion of primary and secondary colors on a canvas.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abstract Expression Brush 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 Abstract Expression Brush.

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

Data visualization

#E4002B#FF8000#FFE500#00CC00#0000FF

Palette guide

How to use Abstract Expression Brush

Overview

The Abstract Expression Brush palette is a raw, unbridled explosion of primary and secondary colors, designed for projects that demand energy and artistic flair. Featuring a bold red #E4002B, a vibrant orange #FF8000, a sunny yellow #FFE500, a lively green #00CC00, and a classic blue #0000FF, this palette evokes spontaneous creativity. It's an excellent choice for designers and developers aiming to create impactful, memorable experiences, from dynamic branding to playful user interfaces. The high saturation and distinct hues make it perfect for conveying a sense of fun, creativity, and energetic expression.

Best used for

Children's product branding and packaging
Creative agency websites and portfolios
Art studio and gallery promotional materials
Educational apps and interactive content
Event branding for festivals and concerts
Dynamic app interfaces and gaming elements

Suggested color roles

primary

Use #E4002B or #0000FF as a dominant color for impactful headlines, hero sections, or key brand identifiers.

secondary

Employ #FF8000 or #FFE500 for supporting elements that need to convey warmth, energy, or approachability.

accent

Apply #00CC00 for calls-to-action, status indicators, or to introduce a refreshing contrast within the vibrant scheme.

background

A pure white or very light gray background will allow these intense colors to truly pop and maintain visual clarity.

text

Black or a very dark charcoal is recommended for text to ensure maximum readability against any of the bright colors, especially #FFE500.

Accessibility notes

Text on #FFE500 will require black or very dark text to meet contrast standards; white text will be illegible.
Ensure sufficient contrast for all text elements, particularly when using vibrant colors as backgrounds.
Avoid using highly saturated colors for small text or thin lines directly adjacent to other bright colors to prevent visual vibration.
Consider using color alongside icons or text labels for critical information, as this palette relies on distinct hues that may challenge color-blind users.

Recommended combinations

Primary Burst

Classic, high-energy combination for bold branding or primary UI elements.

#E4002B · #0000FF · #FFE500

Warm & Bright

Evokes a playful and inviting feel, great for calls-to-action or engaging content blocks.

#FF8000 · #FFE500 · #00CC00

Energetic Trio

Dynamic and eye-catching, perfect for event promotions or children's media.

#E4002B · #FF8000 · #0000FF

CSS variables

:root {
  --abstract-expression-brush-1: #E4002B;
  --abstract-expression-brush-2: #FF8000;
  --abstract-expression-brush-3: #FFE500;
  --abstract-expression-brush-4: #00CC00;
  --abstract-expression-brush-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-expression-brush": {
        1: "#E4002B",
        2: "#FF8000",
        3: "#FFE500",
        4: "#00CC00",
        5: "#0000FF",
      }
    }
  }
}

Hex values

Color 1#E4002B

Color 2#FF8000

Color 3#FFE500

Color 4#00CC00

Color 5#0000FF

Accessibility

Contrast checker

1.9:1Fail

3.8:1AA18

2.2:1Fail

1.8:1Fail

1.9:1Fail

2:1Fail

1.2:1Fail

3.4:1AA18

3.8:1AA18

2:1Fail

1.7:1Fail

6.7:1AA

2.2:1Fail

1.2:1Fail

1.7:1Fail

3.9:1AA18

1.8:1Fail

3.4:1AA18

6.7:1AA

3.9:1AA18

Similar palettes

More like Abstract Expression Brush

Abstract Canvas Blend

Abstract Canvas Pop

Abstract Canvas Swirl