Skip to content
PantoneTools
pink
CSS Named Colors

Thistle

thistle · #D8BFD8

HEX

#D8BFD8

RGB

rgb(216, 191, 216)

CMYK

cmyk(0%, 12%, 0%, 15%)

HSL

hsl(300, 24%, 80%)

LAB

lab(80.1, 13.2, -9.2)

What is Thistle?

Thistle is the thistle reference in the CSS Named Colors. Its sRGB value is #D8BFD8 (rgb 216, 191, 216). It sits in the pink family. The 147 named colors defined by the W3C CSS Color Module Level 4 specification — usable directly in CSS as keywords like 'crimson' or 'rebeccapurple'. See disclaimer for accuracy and trademark notes.

Accessibility

WCAG 2.1 contrast checks for Thistle as a background.

Black text on this color

Sample text · 12.36 : 1
AA Normal
AA Large
AAA Normal
AAA Large

White text on this color

Sample text · 1.70 : 1
AA Normal
AA Large
AAA Normal
AAA Large

Shades, tints & tonal scale of Thistle

An 11-step tonal scale derived from Thistle (#D8BFD8). Click any swatch to copy its HEX. Use these as a starting point for design tokens, hover states, and disabled states in a design system.

Copied #FCFAFC

50

#FCFAFC

#FCFAFC

Copied #F9F5F9

100

#F9F5F9

#F9F5F9

Copied #F3EBF3

200

#F3EBF3

#F3EBF3

Copied #ECDFEC

300

#ECDFEC

#ECDFEC

Copied #E2CFE2

400

#E2CFE2

#E2CFE2

Copied #D8BFD8

500

#D8BFD8

#D8BFD8

Copied #B8A2B8

600

#B8A2B8

#B8A2B8

Copied #8C7C8C

700

#8C7C8C

#8C7C8C

Copied #615661

800

#615661

#615661

Copied #363036

900

#363036

#363036

Copied #1A171A

950

#1A171A

#1A171A

Lighter tints (mixed with white)

Copied #DECADE

15%

#DECADE

Copied #E5D5E5

30%

#E5D5E5

Copied #EBDFEB

45%

#EBDFEB

Copied #F0E8F0

60%

#F0E8F0

Copied #F6F1F6

75%

#F6F1F6

Darker shades (mixed with black)

Copied #C9B2C9

15%

#C9B2C9

Copied #B8A3B8

30%

#B8A3B8

Copied #A592A5

45%

#A592A5

Copied #8F7E8F

60%

#8F7E8F

Copied #736573

75%

#736573

Color harmonies for Thistle

Classic color-theory harmonies derived from rotating the hue of Thistle. Use these to build accent palettes, brand systems, and accessible UI color pairings.

Complementary

180° opposite — strongest contrast

Copied #D8BFD8

#D8BFD8

#D8BFD8

Copied #C0D8C0

#C0D8C0

#C0D8C0

Triadic

Three colors 120° apart

Copied #D8BFD8

#D8BFD8

#D8BFD8

Copied #D8D8C0

#D8D8C0

#D8D8C0

Copied #C0D8D8

#C0D8D8

#C0D8D8

Analogous

Two neighbors ±30° on the wheel

Copied #CCC0D8

#CCC0D8

#CCC0D8

Copied #D8BFD8

#D8BFD8

#D8BFD8

Copied #D8C0CC

#D8C0CC

#D8C0CC

Split-complementary

Base + two colors flanking its complement

Copied #D8BFD8

#D8BFD8

#D8BFD8

Copied #CCD8C0

#CCD8C0

#CCD8C0

Copied #C0D8CC

#C0D8CC

#C0D8CC

Tetradic

Two complementary pairs

Copied #D8BFD8

#D8BFD8

#D8BFD8

Copied #D8C0C0

#D8C0C0

#D8C0C0

Copied #C0D8C0

#C0D8C0

#C0D8C0

Copied #C0D8D8

#C0D8D8

#C0D8D8

Square

Four colors evenly spaced 90° apart

Copied #D8BFD8

#D8BFD8

#D8BFD8

Copied #D8CCC0

#D8CCC0

#D8CCC0

Copied #C0D8C0

#C0D8C0

#C0D8C0

Copied #C0CCD8

#C0CCD8

#C0CCD8

Thistle in every color space

Full conversion of Thistle across the color spaces designers and developers actually use — including OKLCH (the perceptually-uniform space that powers Tailwind v4 and CSS Color Module Level 4) and HWB.

HEX

#D8BFD8

RGB

rgb(216, 191, 216)

CMYK

cmyk(0%, 12%, 0%, 15%)

HSL

hsl(300, 24%, 80%)

HSV

hsv(300, 12%, 85%)

HWB

hwb(300 75% 15%)

CIE Lab

lab(80.1 13.2 -9.2)

OKLCH

oklch(83.3% 0.044 326.0)

XYZ (D65)

xyz(59.34, 56.82, 72.79)

Copy-ready code for Thistle

Drop-in snippets for CSS, Tailwind, Sass, iOS Swift, and Android XML. Click the copy button on any snippet to put it on your clipboard.

CSS

color: #D8BFD8;
background-color: #D8BFD8;

CSS variable

:root {
  --color-thistle: #D8BFD8;
}

Tailwind config

// tailwind.config.js
colors: {
  'thistle': '#D8BFD8',
}

Sass

$color-thistle: #D8BFD8;

Swift UIColor

UIColor(red: 0.847, green: 0.749, blue: 0.847, alpha: 1.0)

Android XML

<color name="thistle">#D8BFD8</color>

Closest match in every color system

The nearest Thistle equivalent in every other color system on this site, ranked by ΔE2000 perceptual distance. Useful when translating between design-system, web-standard, and industrial color references.

Closest in CSS Named Colors

Top 6 ΔE2000-closest entries within the same collection.

Top 6 ΔE2000-closest Pantone references. Cross-system matching is approximate — see disclaimer.

Top 6 ΔE2000-closest RAL Classic references for industrial coating cross-reference.

Copied #D7D7D7

RAL 7035

#D7D7D7

Light grey

Copied #D7D7D7

RAL 9018

#D7D7D7

Papyrus white

Copied #9DA1AA

RAL 7040

#9DA1AA

Window grey

Copied #A18594

RAL 4009

#A18594

Pastel violet

Copied #A5A5A5

RAL 9006

#A5A5A5

White aluminium

Copied #F4F4F4

RAL 9003

#F4F4F4

Signal white

FAQ about Thistle

What is the HEX code for Thistle?

Thistle (thistle) has the HEX code #D8BFD8. In RGB it is rgb(216, 191, 216), and in CMYK it is cmyk(0%, 12%, 0%, 15%).

What is the OKLCH value of Thistle?

Thistle converts to oklch(0.833 0.044 326.0). OKLCH is the perceptually uniform color space used by Tailwind v4 and CSS Color Module Level 4.

Is Thistle accessible for body text?

Used as a background, Thistle has a contrast ratio of 12.36:1 with black text and 1.70:1 with white text. WCAG 2.1 AA requires 4.5:1 for normal text. The current recommendation is to use black text and verify in real UI context.

What is the closest Pantone to Thistle?

The closest Pantone reference to Thistle by ΔE2000 perceptual distance is Pantone 250 C (#E5C8E5). Cross-system Pantone matching is approximate; for color-critical print work, verify with a physical Pantone guide.

What is the closest RAL color to Thistle?

The closest RAL Classic reference to Thistle by ΔE2000 distance is RAL 7035 (Light grey, #D7D7D7). RAL is a German industrial coating standard commonly used for paint, powder coat, and architectural specification.

What is the complementary color of Thistle?

The complementary color (180° opposite on the HSL color wheel) of Thistle is #C0D8C0. Use it for high-contrast accents, error states, or call-to-action pairings.

Data provenance & source

CSS Named Colors (CSS Color Module Level 4)

The 147 named colors defined by the W3C CSS Color Module Level 4 specification. Origin: VGA (16) + X11 (rest) + 'rebeccapurple'. Use as a reference for web color names that all browsers natively support. Names like 'crimson' or 'rebeccapurple' work as CSS values without any framework.

Source type
derived
Confidence
high
License
W3C permissive document license
Last reviewed
2026-05-24

Workflow tags

css
web-standard
named-keyword
pink

CSS named colors are sRGB digital values defined for browsers. For print, convert to a process-appropriate color and proof against substrate.

CSS Named Colors · Thistle — #D8BFD8 | PantoneTools