#D8BFD8

Thistle

Thistle is a muted, gently desaturated, light warm pink (#D8BFD8).

Using Thistle in your designs

Thistle reads as a muted, gently desaturated pink with a warm temperament. Colors in this range are commonly associated with playfulness, romance and softness, which makes thistle a natural fit for lifestyle brands, gentle accents and youthful designs.

Thistle is light enough that it pairs better with dark text than white: black type on thistle hits 12.36:1 — comfortably past the WCAG AA threshold — while white manages only 1.70:1. It shines as a section background, card fill or subtle highlight where a full-strength accent would shout.

For pairings, the complement of thistle sits at 120° — #C0D8C0, close to beige — and delivers the strongest possible hue contrast; use it sparingly, in roughly a 90/10 split, so the two don't fight. For calmer schemes, the analogous colors 30° to either side keep the same warm temperature, while the triadic pair gives you a balanced three-color palette. All of these are computed for thistle in the palettes below, with copy-ready codes.

Thistle color palettes

Every palette below is computed from thistle's position on the color wheel (hue 300°). Hover any swatch to see its code; click to copy.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Monochromatic

Tints and shades of Thistle

Tints mix thistle toward white; shades mix it toward black. Use the scale for hover states, borders and depth without leaving the hue.

Shades → base → tints

Contrast & accessibility

WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text. Here's how thistle performs, plus how it appears under the three main types of dichromatic color blindness (simulated approximation).

Pairing	Ratio	Normal text	Large text
White text on Thistle	`1.70:1`	Fail	Fail
Black text on Thistle	`12.36:1`	AAA	AAA

Protanopia#CDCDD2

Deuteranopia#CFD0D0

Tritanopia#D7CDCC

Thistle in code

Copy-ready snippets. In CSS you can also use the keyword thistle directly.

:root {
  --thistle: #D8BFD8;
  --thistle-rgb: 216, 191, 216;
  --thistle-tint: #EADCEA;
  --thistle-shade: #776977;
}

.btn-thistle {
  background: var(--thistle);
  color: #000000;
}

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-thistle: #D8BFD8;
  --color-thistle-light: #EADCEA;
  --color-thistle-dark: #776977;
}

Generate a complete ramp and semantic roles in the Tailwind color generator.

Tailwind CSS v3 — extend your theme

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        thistle: { DEFAULT: "#D8BFD8", light: "#EADCEA", dark: "#776977" }
      }
    }
  }
};

Colors similar to Thistle

The closest CSS named colors by perceptual (Lab) distance.

lavender#E6E6FA · ΔE 15

lightsteelblue#B0C4DE · ΔE 16

silver#C0C0C0 · ΔE 16

lightgray#D3D3D3 · ΔE 17

pink#FFC0CB · ΔE 17

gainsboro#DCDCDC · ΔE 18

← Previousteal Next →tomato

Copied