What are the hex codes in the Amethyst & Fern Tale palette?

The Amethyst & Fern Tale color palette consists of Amethyst #B03DBB, White #FDFDFD, Periwinkle #DFCBF6, Fern #756F25.

How should I use the Amethyst & Fern Tale palette on a website?

Use White #FDFDFD as the background, Fern #756F25 for text, Periwinkle #DFCBF6 for buttons and links, and Amethyst #B03DBB for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is White on Fern at 5.09:1.

Which colors in Amethyst & Fern Tale have enough contrast for text?

The highest-contrast pair is #FDFDFD on #756F25 with a ratio of 5.09:1, which passes WCAG AA for normal text.

#B03DBBAmethyst

#FDFDFDWhite

#DFCBF6Periwinkle

#756F25Fern

Amethyst & Fern Tale color palette

Modern Purple White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Amethyst	`#B03DBB`	`rgb(176, 61, 187)`	`hsl(295, 51%, 49%)`	`oklch(57.2% 0.209 324)`
White	`#FDFDFD`	`rgb(253, 253, 253)`	`hsl(0, 0%, 99%)`	`oklch(99.4% 0.000 0)`
Periwinkle	`#DFCBF6`	`rgb(223, 203, 246)`	`hsl(268, 70%, 88%)`	`oklch(87.2% 0.062 306)`
Fern	`#756F25`	`rgb(117, 111, 37)`	`hsl(55, 52%, 30%)`	`oklch(53.2% 0.094 105)`

Why it works and how to use it

Amethyst & Fern Tale is a complementary color palette tagged modern, purple, white. Amethyst and Fern sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Periwinkle takes the lead while the rest support. Lightness runs from 30% to 99%. Well suited to websites, presentations and branding.

Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
Text: Fern (#756F25) on #FDFDFD gives 5.09:1, passing WCAG AA.
Primary: Periwinkle (#DFCBF6) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Amethyst (#B03DBB) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is White on Fern at 5.09:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Amethyst & Fern Tale

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#B03DBB

#FDFDFD

#DFCBF6

#756F25

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#FDFDFD` on `#756F25`	Aa	5.09:1	AA
`#B03DBB` on `#FDFDFD`	Aa	4.88:1	AA
`#DFCBF6` on `#756F25`	Aa	3.45:1	AA large only
`#B03DBB` on `#DFCBF6`	Aa	3.31:1	AA large only
`#FDFDFD` on `#DFCBF6`	Aa	1.47:1	Fail
`#B03DBB` on `#756F25`	Aa	1.04:1	Fail

Similar palettes 24 more in this mood