Palette

Wild Thistle Bloom

Muted purples and cool greys capturing the humble beauty of a wild thistle in bloom.

monochromenatural5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Wild Thistle Bloom 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 Wild Thistle Bloom.

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

Data visualization

#A9A9A9#6A5ACD#483D8B#800080#DDA0DD

Palette guide

How to use Wild Thistle Bloom

Overview

The Wild Thistle Bloom palette features muted purples and cool greys, capturing the humble beauty of a wild thistle in bloom. This sophisticated collection includes a neutral #A9A9A9, a calm #6A5ACD, a deep #483D8B, a rich #800080, and the soft #DDA0DD. For designers, these hues offer a refined yet natural range, perfect for conveying subtlety, modernity, or a touch of understated elegance. Developers can leverage this palette to create interfaces that are clean, professional, and visually appealing, ideal for projects seeking a harmonious blend of natural tones and contemporary design.

Best used for

Modern and minimalist brand identity
Tech interfaces and application design
Educational content and publishing
Sustainable or eco-conscious product branding
Art and photography portfolios
Professional services websites

Suggested color roles

primary

Use #6A5ACD as the primary color for a sophisticated and calming brand presence, suitable for key elements.

secondary

Employ #A9A9A9 for secondary elements, backgrounds, or to introduce a cool, neutral balance to the purples.

accent

Apply #800080 for deep, impactful accents, important calls to action, or to add a touch of royal elegance.

background

Utilize #DDA0DD as a soft, delicate background color, providing a clean canvas that allows the deeper purples to stand out.

text

For optimal readability, use #483D8B or black for body text on lighter backgrounds. #6A5ACD works well for prominent headlines.

Accessibility notes

Ensure strong contrast for text when using #A9A9A9 on lighter backgrounds like #DDA0DD.
The darkest shades, #6A5ACD, #483D8B, and #800080, provide excellent contrast for body text on light backgrounds.
Avoid using #DDA0DD for small text sizes, as it may not meet WCAG contrast requirements.
Test interactive elements to ensure they are clearly distinguishable and accessible against their backgrounds.

Recommended combinations

Modern Contrast

A sophisticated combination for headers, with #DDA0DD as background, #483D8B for titles, and #6A5ACD for accents.

#483D8B · #DDA0DD · #6A5ACD

Subtle Accents

Creates a refined blend for decorative elements, icons, or subtle UI components.

#A9A9A9 · #800080 · #DDA0DD

Elegant Interface

A balanced trio for user interfaces, using #DDA0DD for panels, #6A5ACD for primary actions, and #483D8B for text.

#DDA0DD · #6A5ACD · #483D8B

CSS variables

:root {
  --wild-thistle-bloom-1: #A9A9A9;
  --wild-thistle-bloom-2: #6A5ACD;
  --wild-thistle-bloom-3: #483D8B;
  --wild-thistle-bloom-4: #800080;
  --wild-thistle-bloom-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "wild-thistle-bloom": {
        1: "#A9A9A9",
        2: "#6A5ACD",
        3: "#483D8B",
        4: "#800080",
        5: "#DDA0DD",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#6A5ACD

Color 3#483D8B

Color 4#800080

Color 5#DDA0DD

Accessibility

Contrast checker

2.3:1Fail

3.9:1AA18

4:1AA18

1.1:1Fail

2.3:1Fail

1.7:1Fail

1.8:1Fail

2.6:1Fail

3.9:1AA18

1.7:1Fail

1:1Fail

4.4:1AA18

4:1AA18

1.8:1Fail

1:1Fail

4.6:1AA

1.1:1Fail

2.6:1Fail

4.4:1AA18

4.6:1AA

Similar palettes

More like Wild Thistle Bloom

View all monochrome

Mountain Peak Basalt

Rustic Garden Stone

Volcanic Rock Embrace

Botanical Fern Bloom

Desert Sand Texture

Verdant Shade Study