Palette

Primary Abstract Edge

A bold, impactful palette of strong primary and secondary colors, inspired by vibrant abstract art movements.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#0000FF#FFFF00#00FFFF#FF00FF

Palette guide

How to use Primary Abstract Edge

Overview

The Primary Abstract Edge palette offers a striking and modern collection of pure, vibrant primary and secondary colors. This bold selection includes the intense #FF0000 (Red), the deep #0000FF (Blue), and the bright #FFFF00 (Yellow), forming a classic primary triad. Complementing these are the vivid secondary hues of #00FFFF (Cyan) and #FF00FF (Magenta), creating a high-energy, high-contrast visual experience. This palette is designed for designers and developers looking to make a strong, unambiguous statement. It's exceptionally well-suited for projects that demand a dynamic, artistic, or avant-garde aesthetic, ensuring maximum visual impact and a contemporary edge with its clean, saturated tones.

Best used for

Modern art gallery branding
Experimental digital media projects
Children's educational app interfaces
Event posters for music festivals
Abstract illustration and graphic design
Fashion lines with bold, geometric patterns

Suggested color roles

primary

Use #FF0000 (Red) or #0000FF (Blue) as the dominant color for bold statements, brand identity, or key interactive elements.

secondary

Employ #FFFF00 (Yellow) for highlights, calls-to-action, or to balance the intensity of the primary colors.

accent

Apply #00FFFF (Cyan) or #FF00FF (Magenta) for dynamic accents, sub-headers, or graphic overlays to add a modern, electric feel.

background

Given the intensity, a neutral background (white, black, or very dark grey) is often best to let the colors pop, or use #0000FF for a deep, immersive base.

text

For maximum readability on any of these vibrant colors, use pure white or pure black text. Avoid color-on-color text pairings from this palette.

Accessibility notes

Most color combinations from this palette will have poor contrast for text. Always use black or white text for readability.
Ensure interactive elements are clearly distinguishable, relying on size and placement in addition to color contrast.
Be mindful of potential issues for users with color vision deficiencies; avoid relying solely on color to convey information.
Test all color pairings with a contrast checker, especially for text and critical UI components, aiming for WCAG AA or AAA.

Recommended combinations

Primary Pop

Excellent for bold headings, striking infographics, or playful branding that needs to grab immediate attention.

#0000FF · #FFFF00 · #FF0000

Electric Contrast

Ideal for dynamic UI elements, progress bars, or abstract art compositions, offering a high-energy visual.

#FF0000 · #00FFFF · #0000FF

Vivid Harmony

Suitable for creating vibrant patterns, energetic backgrounds, or modern illustrations, where all colors share similar saturation.

#FFFF00 · #FF00FF · #00FFFF

CSS variables

:root {
  --primary-abstract-edge-1: #FF0000;
  --primary-abstract-edge-2: #0000FF;
  --primary-abstract-edge-3: #FFFF00;
  --primary-abstract-edge-4: #00FFFF;
  --primary-abstract-edge-5: #FF00FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "primary-abstract-edge": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#00FFFF",
        5: "#FF00FF",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#00FFFF

Color 5#FF00FF

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

3.2:1AA18

1.3:1Fail

2.1:1Fail

8:1AAA

6.9:1AA

2.7:1Fail

3.7:1AA18

8:1AAA

1.2:1Fail

2.9:1Fail

3.2:1AA18

6.9:1AA

1.2:1Fail

2.5:1Fail

1.3:1Fail

2.7:1Fail

2.9:1Fail

2.5:1Fail

Similar palettes

More like Primary Abstract Edge

Geometric Color Block

Abstract Art Strokes

Abstract Canvas Blend