Back to palettes

Palette

Abstract Expression Layer

Bold, layered reds transitioning to soft pinks, inspired by expressive modern art.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abstract Expression Layer 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 Expression Layer.

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

Data visualization

#5D2C2F#8B4345#CC6D6D#F0A3A3#FADCDC

Palette guide

How to use Abstract Expression Layer

Overview

The Abstract Expression Layer palette offers a sophisticated gradient of bold, layered reds transitioning to soft pinks, inspired by expressive modern art. This warm and energetic collection features deep tones like #5D2C2F (Dark Maroon) and #8B4345 (Rich Red), flowing into softer shades such as #CC6D6D (Muted Rose) and the delicate #FADCDC (Pale Pink). Designers can utilize this palette to create elegant yet powerful visual narratives, ideal for branding, editorial layouts, or sophisticated web applications. Developers will appreciate the cohesive color progression for crafting subtle depth and visual interest in UI components, ensuring a harmonious and modern aesthetic that exudes warmth and artistic flair. The mid-tone #F0A3A3 (Light Pink) provides a crucial bridge in this refined spectrum.

Best used for

  • Luxury brand identity
  • Editorial design and magazines
  • Sophisticated web interfaces
  • Cosmetics or fashion branding
  • Art gallery websites
  • Wedding or event design

Suggested color roles

primary

#5D2C2F (Dark Maroon) - A deep, grounding shade for primary headings, strong backgrounds, or brand anchors.

secondary

#8B4345 (Rich Red) - Use this warmer red for prominent call-to-action buttons, active states, or key graphical elements.

accent

#CC6D6D (Muted Rose) - A softer, inviting accent for highlights, decorative details, or secondary interactive components.

background

#FADCDC (Pale Pink) - An excellent light background color, providing a soft canvas that allows the deeper reds to truly stand out.

text

A dark charcoal or black (#000000) for maximum readability against lighter shades, or #5D2C2F for a softer, branded dark text on very light backgrounds.

Accessibility notes

  • Ensure text in #5D2C2F has sufficient contrast against backgrounds lighter than #F0A3A3.
  • Avoid using #FADCDC for small text elements against light backgrounds, as contrast may be insufficient.
  • When using #CC6D6D as text, pair it with a very dark background for optimal legibility.
  • The transition from dark to light offers flexibility; use the darkest shades for primary text and the lightest for backgrounds.

Recommended combinations

Elegant Depth

Perfect for creating a luxurious feel in branding or sophisticated web design, contrasting deep tones with a soft highlight.

#5D2C2F · #8B4345 · #FADCDC

Soft Gradient

Ideal for background gradients, subtle UI transitions, or creating a layered, artistic effect in digital illustrations.

#8B4345 · #CC6D6D · #F0A3A3

Bold Statement

Use this for magazine layouts or art prints where a strong, yet warm, visual impact is desired.

#5D2C2F · #CC6D6D · #FADCDC

CSS variables

:root {
  --abstract-expression-layer-1: #5D2C2F;
  --abstract-expression-layer-2: #8B4345;
  --abstract-expression-layer-3: #CC6D6D;
  --abstract-expression-layer-4: #F0A3A3;
  --abstract-expression-layer-5: #FADCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-expression-layer": {
        1: "#5D2C2F",
        2: "#8B4345",
        3: "#CC6D6D",
        4: "#F0A3A3",
        5: "#FADCDC",
      }
    }
  }
}

Related searches

red pink gradient palettemodern art color schemebold warm colorslayered red pink designexpressive art tones

Palette colors

Hex values

Color 1#5D2C2F
·
Color 2#8B4345
·
Color 3#CC6D6D
·
Color 4#F0A3A3
·
Color 5#FADCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.2:1AA18
5.6:1AA
8.8:1AAA
2
1.6:1Fail
2:1Fail
3.5:1AA18
5.5:1AA
3
3.2:1AA18
2:1Fail
1.8:1Fail
2.7:1Fail
4
5.6:1AA
3.5:1AA18
1.8:1Fail
1.6:1Fail
5
8.8:1AAA
5.5:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Abstract Expression Layer

View all warm