Palette

Abstract Geometric Hue

Sharp, contrasting colors in a playful yet sophisticated combination, reminiscent of modern abstract art.

vibrantplayful5 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

#CC2936#D9B08C#172A3A#08A045#B5D9EA

Palette guide

How to use Abstract Geometric Hue

Overview

The Abstract Geometric Hue palette offers a sophisticated yet playful combination of sharp, contrasting colors, reminiscent of modern abstract art. Featuring a bold Crimson Red (#CC2936), a warm Beige (#D9B08C), a deep Midnight Blue (#172A3A), a vibrant Forest Green (#08A045), and a soft Sky Blue (#B5D9EA), this collection creates a dynamic and engaging visual experience. Designers and developers can leverage these hues to craft compelling branding, distinctive user interfaces, or sophisticated editorial layouts. Its unique blend of bold and muted tones allows for versatility in conveying both playful energy and understated elegance, ensuring designs are memorable and visually appealing across various mediums.

Best used for

Modern abstract art and illustration
Sophisticated branding with a playful edge
Editorial design for contemporary magazines
UI/UX for creative portfolios or lifestyle apps
Textile and surface pattern design
Packaging design that stands out

Suggested color roles

primary

#CC2936 (Crimson Red) - Use this bold red for key calls to action, prominent headings, or to establish an energetic and passionate focal point.

secondary

#172A3A (Midnight Blue) - A deep, grounding secondary color, excellent for main content backgrounds, navigation, or to provide a sophisticated contrast.

accent

#08A045 (Forest Green) - Deploy this vibrant green sparingly for highlights, interactive states, or small details that need to truly pop and add a fresh dynamic.

background

A light, warm neutral like #D9B08C or a subtle off-white allows the bold colors to pop, while #172A3A serves as a strong, sophisticated dark background.

text

For optimal readability, use a dark charcoal (#333333) on light backgrounds, and crisp white (#FFFFFF) or light beige (#D9B08C) on darker elements like #172A3A.

Accessibility notes

Ensure sufficient contrast between text and background, particularly when pairing #D9B08C with lighter backgrounds; opt for dark text.
Test combinations like #CC2936 and #08A045 for interactive elements to ensure clear distinction for all users, including those with color blindness.
Always verify contrast ratios for all text and interactive components to meet WCAG AA standards, especially on colored backgrounds.
Be cautious when using #B5D9EA (Sky Blue) for small text on lighter backgrounds, as its lightness might not provide enough contrast without careful testing.

Recommended combinations

Bold & Grounded

Ideal for impactful hero sections or branding, combining strong contrast with a warm, balancing neutral.

#CC2936 · #172A3A · #D9B08C

Playful Accents

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

#08A045 · #B5D9EA · #CC2936

Sophisticated Depth

Use for elegant backgrounds, data visualizations, or textual content, offering depth with a bright, unexpected accent.

#172A3A · #D9B08C · #08A045

CSS variables

:root {
  --abstract-geometric-hue-1: #CC2936;
  --abstract-geometric-hue-2: #D9B08C;
  --abstract-geometric-hue-3: #172A3A;
  --abstract-geometric-hue-4: #08A045;
  --abstract-geometric-hue-5: #B5D9EA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-geometric-hue": {
        1: "#CC2936",
        2: "#D9B08C",
        3: "#172A3A",
        4: "#08A045",
        5: "#B5D9EA",
      }
    }
  }
}

Hex values

Color 1#CC2936

Color 2#D9B08C

Color 3#172A3A

Color 4#08A045

Color 5#B5D9EA

Accessibility

Contrast checker

2.7:1Fail

2.8:1Fail

1.6:1Fail

3.6:1AA18

2.7:1Fail

7.4:1AAA

1.7:1Fail

1.3:1Fail

2.8:1Fail

7.4:1AAA

4.3:1AA18

9.9:1AAA

1.6:1Fail

1.7:1Fail

4.3:1AA18

2.3:1Fail

3.6:1AA18

1.3:1Fail

9.9:1AAA

2.3:1Fail

Similar palettes

More like Abstract Geometric Hue

View all vibrant

Abstract Art Canvas

Art Studio Chaos

Bauhaus Geometry Play

Pop Art Grid Blast

Vivid Spectrum Play

Abstract Canvas Drip