Palette

Abstract Canvas Blend

A bold, contrasting mix of colors inspired by modern abstract art, dynamic and expressive.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abstract Canvas Blend 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 Canvas Blend.

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

Data visualization

#2C3E50#E74C3C#F39C12#2ECC71#9B59B6

Palette guide

How to use Abstract Canvas Blend

Overview

The "Abstract Canvas Blend" palette is a bold, contrasting mix of colors inspired by modern abstract art, dynamic and expressive. It features a sophisticated #2C3E50 (dark blue-gray), a passionate #E74C3C (vivid red), a warm #F39C12 (bright orange), a refreshing #2ECC71 (emerald green), and a regal #9B59B6 (deep purple). This diverse range allows designers to create impactful visuals with strong focal points and clear hierarchy. Developers can leverage these distinct hues for crafting engaging user interfaces, dynamic data visualizations, or branding that demands attention. The palette's energetic mood makes it perfect for projects that aim for a contemporary and artistic edge.

Best used for

Modern abstract art exhibitions
Creative tech startup branding
Dynamic dashboard interfaces
Editorial design for art magazines
Event promotion materials
Bold website hero sections

Suggested color roles

primary

#2C3E50 (Dark Blue-Gray) - Establishes a strong, grounded foundation for backgrounds, main navigation, or large typography, providing depth.

secondary

#E74C3C (Vivid Red) - Ideal for calls-to-action, alerts, or prominent interactive elements to command immediate attention.

accent

#F39C12 (Bright Orange) - Use for highlights, secondary interactive elements, or to add a warm, energetic pop of color.

background

#F7FFF7 (Near White) or a very light gray - A clean, neutral background allows these bold colors to truly stand out and ensures readability.

text

#2C3E50 or #000000 (Black) - For primary body text and headings, #2C3E50 offers excellent readability on light backgrounds. Black ensures maximum contrast.

Accessibility notes

Ensure sufficient contrast when pairing #F39C12 with light backgrounds for text, as it may not meet WCAG AA standards.
Use #2C3E50 or #E74C3C for text on very light backgrounds to maintain high readability.
Avoid using #2ECC71 or #9B59B6 for small text on dark backgrounds without sufficient contrast testing.
Test colorblind compatibility, especially with red and green elements, to ensure distinct visual cues.

Recommended combinations

Impactful Highlight

For hero sections or banners that need to grab attention with strong, contrasting elements.

#2C3E50 · #E74C3C · #F39C12

Vibrant Analytics

Excellent for dashboards or infographics, providing clear differentiation and a modern feel.

#2C3E50 · #2ECC71 · #9B59B6

Energetic Call

Perfect for interactive elements or calls-to-action that require high visibility and a playful yet bold tone.

#E74C3C · #F39C12 · #2ECC71

CSS variables

:root {
  --abstract-canvas-blend-1: #2C3E50;
  --abstract-canvas-blend-2: #E74C3C;
  --abstract-canvas-blend-3: #F39C12;
  --abstract-canvas-blend-4: #2ECC71;
  --abstract-canvas-blend-5: #9B59B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-canvas-blend": {
        1: "#2C3E50",
        2: "#E74C3C",
        3: "#F39C12",
        4: "#2ECC71",
        5: "#9B59B6",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#E74C3C

Color 3#F39C12

Color 4#2ECC71

Color 5#9B59B6

Accessibility

Contrast checker

2.9:1Fail

5:1AA

5.2:1AA

2.4:1Fail

2.9:1Fail

1.7:1Fail

1.8:1Fail

1.2:1Fail

5:1AA

1.7:1Fail

1:1Fail

2.1:1Fail

5.2:1AA

1.8:1Fail

1:1Fail

2.2:1Fail

2.4:1Fail

1.2:1Fail

2.1:1Fail

2.2:1Fail

Similar palettes

More like Abstract Canvas Blend

View all vibrant

Abstract Art Strokes

Abstract Canvas Pop

Abstract Canvas Swirl

Abstract Geometric Canvas

Geometric Block Pop

Abstract Block Play