Back to palettes

Palette

Abstract Geometric Hue

A striking collection of pure, saturated colors perfect for dynamic and modern abstract designs.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abstract Geometric Hue 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 Geometric Hue.

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

Data visualization

#E74C3C#3498DB#2ECC71#F1C40F#9B59B6

Palette guide

How to use Abstract Geometric Hue

Overview

The Abstract Geometric Hue palette presents a striking collection of pure, saturated colors, perfect for dynamic and modern abstract designs. Featuring a bold Red (#E74C3C), a calm Blue (#3498DB), a vibrant Green (#2ECC71), a bright Yellow (#F1C40F), and a rich Purple (#9B59B6), this palette offers an energetic yet balanced array. Designers and developers can utilize these versatile hues to craft compelling branding, engaging user interfaces, or impactful digital art. Its ability to command attention while maintaining clarity makes it ideal for projects that seek to convey innovation, playfulness, or a contemporary artistic sensibility, ensuring visual appeal and strong user engagement.

Best used for

  • Bold branding and logo design
  • Modern abstract art and illustrations
  • Dynamic UI/UX for tech or creative apps
  • Educational materials and infographics
  • Event promotions and festival branding
  • Geometric pattern design and textile applications

Suggested color roles

primary

#E74C3C (Red) - Use this strong red for calls to action, critical information, or as a dominant color to create an immediate focal point.

secondary

#3498DB (Blue) - A reliable and stable secondary color, excellent for main content areas, navigation, or to provide a calming contrast to the primary.

accent

#F1C40F (Yellow) - Deploy this bright yellow sparingly for highlights, interactive states, or small details that need to truly pop and draw immediate attention.

background

A clean white (#FFFFFF) or a very light gray (#F2F2F2) provides an optimal canvas, allowing the saturated palette colors to stand out prominently.

text

For maximum readability, use a dark charcoal (#333333) or black (#000000) on light backgrounds, and pure white (#FFFFFF) on darker elements or backgrounds.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using #F1C40F (Yellow) for text on lighter backgrounds; dark text is highly recommended.
  • Avoid relying solely on color to convey information, particularly when contrasting #E74C3C (Red) and #2ECC71 (Green) for colorblind users.
  • Test all color combinations with a contrast checker to meet WCAG AA or AAA standards for both normal and large text.
  • Be cautious when using #9B59B6 (Purple) for small text on darker backgrounds, as its luminance might not provide enough contrast without careful testing.

Recommended combinations

Primary Impact

Ideal for hero sections, calls to action, or designs requiring strong, clear visual hierarchy and energetic appeal.

#E74C3C · #3498DB · #F1C40F

Balanced Contrast

Great for abstract patterns, infographics, or playful elements that require distinct, high-contrast separation and vibrancy.

#2ECC71 · #9B59B6 · #E74C3C

Vibrant Accents

Use for UI elements, data visualization, or interactive components where clear differentiation and a modern feel are key.

#3498DB · #F1C40F · #2ECC71

CSS variables

:root {
  --abstract-geometric-hue-2-1: #E74C3C;
  --abstract-geometric-hue-2-2: #3498DB;
  --abstract-geometric-hue-2-3: #2ECC71;
  --abstract-geometric-hue-2-4: #F1C40F;
  --abstract-geometric-hue-2-5: #9B59B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-geometric-hue-2": {
        1: "#E74C3C",
        2: "#3498DB",
        3: "#2ECC71",
        4: "#F1C40F",
        5: "#9B59B6",
      }
    }
  }
}

Related searches

bold modern color palettevibrant primary color schemegeometric artistic colorsenergetic UI/UX paletteabstract saturated colors

Palette colors

Hex values

Color 1#E74C3C
·
Color 2#3498DB
·
Color 3#2ECC71
·
Color 4#F1C40F
·
Color 5#9B59B6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
2.3:1Fail
1.2:1Fail
2
1.2:1Fail
1.5:1Fail
1.9:1Fail
1.5:1Fail
3
1.8:1Fail
1.5:1Fail
1.3:1Fail
2.2:1Fail
4
2.3:1Fail
1.9:1Fail
1.3:1Fail
2.8:1Fail
5
1.2:1Fail
1.5:1Fail
2.2:1Fail
2.8:1Fail

Similar palettes

More like Abstract Geometric Hue

View all vibrant
Modern Geometric Canvas
Abstract Block Play
Abstract Geometric Canvas
Abstract Geometric Canvas
Abstract Polygon Pop
Bauhaus Primary Forms