Palette

Modernist Geometry

A dynamic clash of high-contrast, pure hues creating a modern and energetic visual experience.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Modernist Geometry 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 Modernist Geometry.

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

Data visualization

#FF5733#33FF57#3357FF#FFFF33#FF33FF

Palette guide

How to use Modernist Geometry

Overview

The "Modernist Geometry" palette is a vibrant explosion of pure, high-contrast hues, designed to create dynamic and energetic visual experiences. Featuring electric orange #FF5733, vivid green #33FF57, intense blue #3357FF, bright yellow #FFFF33, and striking magenta #FF33FF, this palette is a playground for bold, abstract, and playful designs. Designers can leverage these saturated colors to make strong statements, evoke excitement, and capture attention. Developers will find these hex codes perfect for creating engaging interactive elements, eye-catching branding, or lively digital art, ensuring a memorable and impactful visual presence. The high saturation demands careful application for maximum effect.

Best used for

Digital art and creative installations
Event branding and promotional materials
Youth-oriented product packaging
Interactive educational platforms
Gaming interfaces and streaming overlays
Abstract motion graphics and animations

Suggested color roles

primary

#3357FF - A powerful, pure blue, excellent for main calls-to-action, prominent headers, or the dominant color in a vibrant composition.

secondary

#FF5733 - A bold, energetic orange, suitable for secondary actions, important notifications, or to create a striking complementary contrast.

accent

#33FF57 - A bright, lively green, perfect for highlighting key information, success states, or small interactive elements that need to pop.

background

#000000 - A dark, neutral background allows these vibrant colors to truly stand out and glow, enhancing their intensity.

text

#FFFF33 - For text on dark backgrounds, #FFFF33 can be used for impact, while a clean white or near-white ensures readability against the vibrant palette.

Accessibility notes

High contrast is crucial; use #3357FF or #FF5733 for text on a pure black background to ensure readability.
Avoid using #FFFF33 for small text on light backgrounds due to low contrast.
When pairing these vibrant colors, ensure sufficient contrast for colorblind users; avoid red/green or blue/purple combinations for critical information.
Provide clear visual cues beyond color for interactive states, such as underlines or icons, especially with such intense hues.

Recommended combinations

Primary Pop

Ideal for a striking brand identity or call-to-action, with blue as primary and orange as an energetic highlight on a dark canvas.

#3357FF · #FF5733 · #FF33FF

Energetic Contrast

Creates a lively, almost neon effect for digital art, event promotions, or gaming UI elements.

#33FF57 · #FF33FF · #3357FF

Dynamic Trio

Use for abstract geometric patterns, data visualization, or interactive elements where a playful, bold statement is desired.

#FFFF33 · #FF5733 · #3357FF

CSS variables

:root {
  --modernist-geometry-1: #FF5733;
  --modernist-geometry-2: #33FF57;
  --modernist-geometry-3: #3357FF;
  --modernist-geometry-4: #FFFF33;
  --modernist-geometry-5: #FF33FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "modernist-geometry": {
        1: "#FF5733",
        2: "#33FF57",
        3: "#3357FF",
        4: "#FFFF33",
        5: "#FF33FF",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#33FF57

Color 3#3357FF

Color 4#FFFF33

Color 5#FF33FF

Accessibility

Contrast checker

2.3:1Fail

1.7:1Fail

2.9:1Fail

1.1:1Fail

2.3:1Fail

3.9:1AA18

1.3:1Fail

2.2:1Fail

1.7:1Fail

3.9:1AA18

5:1AA

1.8:1Fail

2.9:1Fail

1.3:1Fail

5:1AA

2.7:1Fail

1.1:1Fail

2.2:1Fail

1.8:1Fail

2.7:1Fail

Similar palettes

More like Modernist Geometry

View all vibrant

Energetic Pop Art

Abstract Art Strokes

Abstract Canvas Blend

Abstract Canvas Pop

Abstract Canvas Swirl

Abstract Chroma Splash