Palette

Abstract Canvas Swirl

A minimalist yet striking palette of deep charcoals to soft greys, like a monochrome art piece in flux.

monochromeminimal5 colors

More monochrome 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

#1A1A1A#5D5D5D#A0A0A0#E0E0E0#F7F7F7

Palette guide

How to use Abstract Canvas Swirl

Overview

The "Abstract Canvas Swirl" palette (monochrome version) presents a minimalist yet striking range of deep charcoals to soft greys, like a monochrome art piece in flux. Featuring #1A1A1A (deep charcoal), #5D5D5D (medium gray), #A0A0A0 (light gray), #E0E0E0 (very light gray), and #F7F7F7 (near white), this palette offers sophisticated versatility. Designers can leverage this collection for elegant, modern projects that prioritize clarity, subtlety, and timeless appeal. Developers will find these shades excellent for creating clean user interfaces, establishing visual hierarchy through tonal variation, and ensuring high readability. It's ideal for professional, understated designs that still convey depth and sophistication.

Best used for

Minimalist website designs
Professional corporate branding
Photography portfolios
Sleek mobile app interfaces
High-end luxury product packaging
Editorial design for art and architecture

Suggested color roles

primary

#1A1A1A (Deep Charcoal) - Ideal for foundational elements like backgrounds, navigation, or bold headings, providing a strong, sophisticated base.

secondary

#5D5D5D (Medium Gray) - Excellent for subheadings, secondary information, or UI elements that require less emphasis than primary content.

accent

#A0A0A0 (Light Gray) - Use for subtle dividers, borders, or inactive states to add visual structure without distraction.

background

#F7F7F7 (Near White) - Serves as a clean, expansive canvas, ensuring maximum readability and a crisp, modern aesthetic.

text

#1A1A1A (Deep Charcoal) - The optimal choice for body text and headings on light backgrounds, ensuring excellent legibility and a refined look.

Accessibility notes

Ensure sufficient contrast when pairing lighter grays like #E0E0E0 or #A0A0A0 with #F7F7F7 for text; it may fail WCAG AA.
Always use #1A1A1A or #5D5D5D for body text on #F7F7F7 backgrounds for optimal readability.
Reserve the lightest shades for background elements or very large, decorative text if contrast is an issue.
Use distinct tonal shifts for interactive elements to ensure they are easily perceivable by all users.

Recommended combinations

Clean Professional

For elegant typography and content blocks, offering high contrast and a timeless feel.

#1A1A1A · #F7F7F7 · #5D5D5D

Subtle Depth

Ideal for layered UI elements, subtle gradients, or background patterns that need a nuanced look.

#5D5D5D · #A0A0A0 · #E0E0E0

Refined Contrast

Perfect for hero sections or prominent features, combining strong darks with delicate lights for sophistication.

#1A1A1A · #E0E0E0 · #A0A0A0

CSS variables

:root {
  --abstract-canvas-swirl-2-1: #1A1A1A;
  --abstract-canvas-swirl-2-2: #5D5D5D;
  --abstract-canvas-swirl-2-3: #A0A0A0;
  --abstract-canvas-swirl-2-4: #E0E0E0;
  --abstract-canvas-swirl-2-5: #F7F7F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-canvas-swirl-2": {
        1: "#1A1A1A",
        2: "#5D5D5D",
        3: "#A0A0A0",
        4: "#E0E0E0",
        5: "#F7F7F7",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#5D5D5D

Color 3#A0A0A0

Color 4#E0E0E0

Color 5#F7F7F7

Accessibility

Contrast checker

2.6:1Fail

6.7:1AA

13.2:1AAA

16.2:1AAA

2.6:1Fail

2.5:1Fail

5:1AA

6.1:1AA

6.7:1AA

2.5:1Fail

2:1Fail

2.4:1Fail

13.2:1AAA

5:1AA

2:1Fail

1.2:1Fail

16.2:1AAA

6.1:1AA

2.4:1Fail

1.2:1Fail

Similar palettes

More like Abstract Canvas Swirl

Grayscale Photo Grain

Monochromatic Graphite

Monochromatic Ink Wash