Back to palettes

Palette

Abstract Geometric Canvas

Bold and contrasting colors come together to form a dynamic and striking abstract composition.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E84A5F#F7C04A#8ECDD0#5499C7#34495E

Palette guide

How to use Abstract Geometric Canvas

Overview

The Abstract Geometric Canvas palette offers a sophisticated yet energetic blend of bold and contrasting colors, ideal for modern design projects. Featuring a vibrant Rose Red (#E84A5F), a warm Golden Yellow (#F7C04A), a serene Aqua Blue (#8ECDD0), a deep Ocean Blue (#5499C7), and a grounding Charcoal Blue (#34495E), this collection creates a dynamic and striking composition. Designers and developers can utilize these hues to craft compelling branding, engaging user interfaces, or sophisticated editorial layouts. Its ability to balance warmth with cool tones makes it versatile for conveying both playful energy and understated elegance, ensuring designs are memorable and visually appealing.

Best used for

  • Modern branding and logo design
  • Editorial design for art and lifestyle publications
  • Abstract digital illustrations and posters
  • UI/UX for creative portfolios or cultural apps
  • Contemporary interior design color schemes
  • Event marketing materials requiring a bold statement

Suggested color roles

primary

#E84A5F (Rose Red) - Use this bold rose red for key focal points, calls to action, or prominent headings to convey energy and passion.

secondary

#5499C7 (Ocean Blue) - A grounding and stable secondary, perfect for main content areas, navigation, or to provide a cool contrast to the primary.

accent

#F7C04A (Golden Yellow) - Deploy this warm yellow for highlights, interactive elements, or small details that need to attract attention and add a touch of vibrancy.

background

A light neutral like #F3F7F9 or a subtle off-white allows the vibrant colors to pop, while #34495E can serve as a sophisticated dark background.

text

For readability, use a dark charcoal (#333333) or black on light backgrounds, and crisp white (#FFFFFF) or light gray on darker elements like #34495E.

Accessibility notes

  • Ensure sufficient contrast between text and background, particularly when pairing #F7C04A with lighter backgrounds; opt for dark text.
  • Test combinations like #E84A5F and #F7C04A for interactive elements to ensure clear distinction for all users.
  • Always verify contrast ratios for all text and interactive components to meet WCAG AA standards, especially on colored backgrounds.
  • Consider providing alternative indicators for information conveyed by color alone, particularly with similar value hues like #8ECDD0 and #5499C7.

Recommended combinations

Bold Contrast

Dynamic combination for hero sections or impactful calls to action, balancing warm and cool tones.

#E84A5F · #5499C7 · #F7C04A

Subtle Depth

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

#34495E · #8ECDD0 · #F7C04A

Energetic Play

Use for abstract patterns, playful illustrations, or UI elements that require a vibrant yet harmonious feel.

#E84A5F · #8ECDD0 · #5499C7

CSS variables

:root {
  --abstract-geometric-canvas-4-1: #E84A5F;
  --abstract-geometric-canvas-4-2: #F7C04A;
  --abstract-geometric-canvas-4-3: #8ECDD0;
  --abstract-geometric-canvas-4-4: #5499C7;
  --abstract-geometric-canvas-4-5: #34495E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-geometric-canvas-4": {
        1: "#E84A5F",
        2: "#F7C04A",
        3: "#8ECDD0",
        4: "#5499C7",
        5: "#34495E",
      }
    }
  }
}

Related searches

modern abstract color palettebold geometric design colorscontrasting vibrant art palettecontemporary UI color schemesenergetic branding colors

Palette colors

Hex values

Color 1#E84A5F
·
Color 2#F7C04A
·
Color 3#8ECDD0
·
Color 4#5499C7
·
Color 5#34495E
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
2.1:1Fail
1.2:1Fail
2.5:1Fail
2
2.3:1Fail
1.1:1Fail
1.9:1Fail
5.6:1AA
3
2.1:1Fail
1.1:1Fail
1.7:1Fail
5.2:1AA
4
1.2:1Fail
1.9:1Fail
1.7:1Fail
3:1Fail
5
2.5:1Fail
5.6:1AA
5.2:1AA
3:1Fail

Similar palettes

More like Abstract Geometric Canvas

View all vibrant
Abstract Art Strokes
Abstract Canvas Blend
Abstract Canvas Pop
Abstract Canvas Swirl
Abstract Geometric Canvas
Abstract Polygon Pop