Back to palettes

Palette

Abstract Canvas Swirl

Bold and expressive, this palette captures the dynamic flow and contrasting elements of a modern abstract painting.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E63946#F7C59F#A8DADC#457B9D#1D3557

Palette guide

How to use Abstract Canvas Swirl

Overview

The "Abstract Canvas Swirl" palette (vibrant version) is bold and expressive, capturing the dynamic flow and contrasting elements of a modern abstract painting. It features a passionate #E63946 (brick red), a warm #F7C59F (peach), a serene #A8DADC (light blue-green), a deep #457B9D (dark blue), and a grounded #1D3557 (navy blue). This versatile palette offers a rich blend of warm and cool tones, allowing designers to create captivating visuals with depth and energy. Developers can leverage these distinct hues for crafting engaging user interfaces, expressive branding, or dynamic digital art, ensuring a memorable and visually stimulating experience across various platforms.

Best used for

  • Modern art gallery branding
  • Creative agency portfolio sites
  • Editorial design for lifestyle magazines
  • Dynamic web landing pages
  • Interior design mood boards
  • Fashion e-commerce platforms

Suggested color roles

primary

#1D3557 (Navy Blue) - Establishes a strong, sophisticated foundation for backgrounds, navigation, or large text blocks, providing depth.

secondary

#457B9D (Dark Blue) - Excellent for subheadings, active states, or secondary calls-to-action, offering a slightly lighter, inviting contrast.

accent

#E63946 (Brick Red) - Use for high-impact calls-to-action, alerts, or small graphic details to draw immediate attention with warmth and vibrancy.

background

#F7C59F (Peach) - Provides a warm, inviting backdrop that allows the deeper blues and vibrant red to pop, creating a harmonious blend.

text

#1D3557 or a dark charcoal - For primary body text, #1D3557 offers excellent readability on lighter backgrounds. A very dark gray or black can also be used.

Accessibility notes

  • Ensure sufficient contrast for #F7C59F when used for text on light backgrounds; it will likely fail WCAG AA.
  • Pair #1D3557 or #E63946 with #A8DADC or #F7C59F for readable body text.
  • Avoid using #A8DADC for small text against similar light backgrounds without careful contrast checks.
  • Test colorblind compatibility, especially with red and blue elements, to ensure distinct visual cues.

Recommended combinations

Warm Horizon

For impactful hero sections or branding that needs to convey both strength and warmth.

#1D3557 · #E63946 · #F7C59F

Cool Serenity

Ideal for navigation, informational sections, or backgrounds, offering a calm and professional feel.

#1D3557 · #457B9D · #A8DADC

Dynamic Splash

Excellent for highlights, interactive elements, or graphic details that require a vibrant, energetic touch.

#E63946 · #A8DADC · #F7C59F

CSS variables

:root {
  --abstract-canvas-swirl-1: #E63946;
  --abstract-canvas-swirl-2: #F7C59F;
  --abstract-canvas-swirl-3: #A8DADC;
  --abstract-canvas-swirl-4: #457B9D;
  --abstract-canvas-swirl-5: #1D3557;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-canvas-swirl": {
        1: "#E63946",
        2: "#F7C59F",
        3: "#A8DADC",
        4: "#457B9D",
        5: "#1D3557",
      }
    }
  }
}

Related searches

abstract art color palettemodern expressive colorsdynamic web design schemewarm cool color blendvibrant branding palette

Palette colors

Hex values

Color 1#E63946
·
Color 2#F7C59F
·
Color 3#A8DADC
·
Color 4#457B9D
·
Color 5#1D3557
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.7:1Fail
2.7:1Fail
1.1:1Fail
3:1Fail
2
2.7:1Fail
1:1Fail
2.9:1Fail
7.9:1AAA
3
2.7:1Fail
1:1Fail
3:1AA18
8.1:1AAA
4
1.1:1Fail
2.9:1Fail
3:1AA18
2.7:1Fail
5
3:1Fail
7.9:1AAA
8.1:1AAA
2.7:1Fail

Similar palettes

More like Abstract Canvas Swirl

View all vibrant
Abstract Art Strokes
Abstract Canvas Blend
Abstract Canvas Pop
Abstract Expression Hues
Abstract Geometric Canvas
Geometric Block Pop