Palette

Painterly Stroke Array

A sophisticated blend of muted tones, reflecting the calm intensity of a thoughtfully composed abstract painting.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Painterly Stroke Array 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 Painterly Stroke Array.

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

Data visualization

#2E4057#6A826F#B8B8AA#EFECE1#8B6350

Palette guide

How to use Painterly Stroke Array

Overview

The Painterly Stroke Array palette is a sophisticated blend of muted, earthy tones, reflecting the calm intensity of a thoughtfully composed abstract painting. Featuring the deep navy #2E4057, the subtle sage #6A826F, the versatile gray-beige #B8B8AA, the warm off-white #EFECE1, and the rich terracotta #8B6350, this scheme exudes elegance and refinement. Designers and developers can utilize this palette to create polished, timeless, and understated designs that communicate professionalism and a refined aesthetic. It's particularly effective for projects seeking a natural, organic, yet sophisticated feel.

Best used for

High-end interior design and decor
Art galleries and museum branding
Luxury product packaging
Editorial and print layouts
Professional services websites
Nature-inspired lifestyle brands

Suggested color roles

primary

Use #2E4057 as a deep, sophisticated anchor for main headers, navigation, or strong brand statements.

secondary

Employ #8B6350 for warm, earthy accents or supporting content areas, adding a touch of richness.

accent

Highlight subtle details or interactive elements with #6A826F, providing a muted yet distinct visual interest.

background

Utilize #EFECE1 as a soft, warm off-white background, offering a canvas that feels natural and inviting.

text

Dark navy or a deep charcoal, such as #2E4057 or #333333, provides excellent readability and complements the palette.

Accessibility notes

Good contrast is easily achievable with dark text on #EFECE1; ensure sufficient contrast for all text.
The mid-tones like #B8B8AA and #6A826F may require darker text for readability.
Ensure sufficient contrast between adjacent colors, especially for non-textual elements like borders or dividers.
Use clear visual hierarchy through varying shades and font weights to guide the user.

Recommended combinations

Canvas Base

Ideal for core UI, web backgrounds, and primary brand applications, offering a sophisticated foundation.

#EFECE1 · #2E4057 · #8B6350

Earthy Harmony

Excellent for illustrations, supporting graphics, or subtle sections where a harmonious blend is desired.

#6A826F · #B8B8AA · #EFECE1

Muted Depth

Suitable for headers, strong visual blocks, or elements requiring a rich, layered, and sophisticated presence.

#2E4057 · #8B6350 · #6A826F

CSS variables

:root {
  --painterly-stroke-array-1: #2E4057;
  --painterly-stroke-array-2: #6A826F;
  --painterly-stroke-array-3: #B8B8AA;
  --painterly-stroke-array-4: #EFECE1;
  --painterly-stroke-array-5: #8B6350;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "painterly-stroke-array": {
        1: "#2E4057",
        2: "#6A826F",
        3: "#B8B8AA",
        4: "#EFECE1",
        5: "#8B6350",
      }
    }
  }
}

Hex values

Color 1#2E4057

Color 2#6A826F

Color 3#B8B8AA

Color 4#EFECE1

Color 5#8B6350

Accessibility

Contrast checker

2.5:1Fail

5.3:1AA

8.9:1AAA

2:1Fail

2.5:1Fail

2.1:1Fail

3.5:1AA18

1.3:1Fail

5.3:1AA

2.1:1Fail

1.7:1Fail

2.6:1Fail