Palette

Abstract Art Strokes

A dynamic clash of vivid teal, sunny yellow, and passionate red, designed for a modern and expressive artistic statement.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abstract Art Strokes 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 Art Strokes.

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

Data visualization

#1A535C#4ECDC4#FFEA00#FF6B6B#F7FFF7

Palette guide

How to use Abstract Art Strokes

Overview

The "Abstract Art Strokes" palette offers a dynamic and expressive range perfect for modern design projects. It combines the deep, rich teal of #1A535C with the refreshing vibrancy of #4ECDC4, creating a harmonious cool foundation. A bright, energetic pop comes from the sunny yellow #FFEA00, perfectly complemented by the passionate, bold red #FF6B6B. The inclusion of a crisp, near-white #F7FFF7 ensures excellent contrast and provides breathing room. Designers can leverage this palette for eye-catching interfaces, branding, or illustrations that aim for a contemporary and artistic statement. Developers will find these distinct colors easy to implement for UI elements, ensuring visual hierarchy and impact across various digital platforms.

Best used for

Modern art gallery websites
Creative agency branding
Dynamic mobile app interfaces
Bold digital illustrations
Event posters and flyers
Contemporary product packaging

Suggested color roles

primary

#1A535C (Deep Teal) - Ideal for foundational elements like navigation bars, footers, or large content blocks to establish a sophisticated and stable base.

secondary

#4ECDC4 (Vibrant Teal) - Excellent for subheadings, active states, or secondary call-to-action buttons, offering a refreshing contrast and visual interest.

accent

#FFEA00 (Bright Yellow) - Use sparingly for critical calls-to-action, alerts, or small graphic details to draw immediate attention due to its high vibrancy.

background

#F7FFF7 (Near White) - Serves as a clean, expansive canvas, ensuring readability and allowing the bolder colors to truly pop without overwhelming the user.

text

#1A535C or a dark charcoal - For primary body text, #1A535C offers good contrast on light backgrounds. For smaller text or captions, consider a very dark gray or black for optimal legibility.

Accessibility notes

Ensure sufficient contrast when pairing #FFEA00 with #F7FFF7 for text, as it may not meet WCAG AA standards.
Use #1A535C or #FF6B6B for text on #F7FFF7 backgrounds to maintain high readability.
Reserve #FFEA00 and #FF6B6B primarily for larger headings or graphic elements, rather than small body text.
Test colorblind compatibility, especially with the red and teal combination, to ensure distinct visual cues.

Recommended combinations

Vibrant Contrast

For striking headings or key feature blocks where a bold statement is desired, leveraging high contrast.

#1A535C · #FFEA00 · #F7FFF7

Energetic Flow

Ideal for interactive elements or dynamic backgrounds that need to feel lively and engaging.

#4ECDC4 · #FF6B6B · #F7FFF7

Sophisticated Balance

Perfect for clean, modern interfaces where clarity and a professional, yet artistic, feel are important.

#1A535C · #4ECDC4 · #F7FFF7

CSS variables

:root {
  --abstract-art-strokes-1: #1A535C;
  --abstract-art-strokes-2: #4ECDC4;
  --abstract-art-strokes-3: #FFEA00;
  --abstract-art-strokes-4: #FF6B6B;
  --abstract-art-strokes-5: #F7FFF7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-art-strokes": {
        1: "#1A535C",
        2: "#4ECDC4",
        3: "#FFEA00",
        4: "#FF6B6B",
        5: "#F7FFF7",
      }
    }
  }
}

Hex values

Color 1#1A535C

Color 2#4ECDC4

Color 3#FFEA00

Color 4#FF6B6B

Color 5#F7FFF7

Accessibility

Contrast checker

4.5:1AA18

7:1AA

3.1:1AA18

8.5:1AAA

4.5:1AA18

1.6:1Fail

1.4:1Fail

1.9:1Fail

7:1AA

1.6:1Fail

2.2:1Fail

1.2:1Fail

3.1:1AA18

1.4:1Fail

2.2:1Fail

2.7:1Fail

8.5:1AAA

1.9:1Fail

1.2:1Fail

2.7:1Fail

Similar palettes

More like Abstract Art Strokes

View all vibrant

Abstract Canvas Blend

Abstract Canvas Pop

Abstract Canvas Swirl

Abstract Geometric Canvas

Geometric Block Pop

Abstract Block Play