Amethyst color palette
Named for the purple quartz, this set runs from royal purple #4A0E8F and violet #6A1FB5 into a softer, dustier wisteria and lilac, then pale orchid #E8DAEF. The top two are saturated and jewel-like, and the lighter three are muted. That mix lets it feel regal without getting loud. It's a good fit for crystal shops and jewelers.
Amethyst palette in use
#4A0E8F text on #E8DAEF gives the clearest pairing. #6A1FB5 is the main button, #9B59B6 the hover state, and #C39BD3 suits borders and decorative shapes.
This pair measures 8.97:1, so it works for body text too. The button uses #6A1FB5 with white text.
ButtonGood for
- Crystal shop website
- Jewelry brand
- Tarot reading app
- Cosmetics packaging
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#4A0E8F | #E8DAEF | 8.97:1 | AAA |
#6A1FB5 | #E8DAEF | 6.34:1 | AA |
#4A0E8F | #C39BD3 | 5.11:1 | AA |
#6A1FB5 | #C39BD3 | 3.61:1 | AA large |
#9B59B6 | #E8DAEF | 3.49:1 | AA large |
Amethyst palette as code
CSS variables
:root {
--amethyst-1: #4A0E8F;
--amethyst-2: #6A1FB5;
--amethyst-3: #9B59B6;
--amethyst-4: #C39BD3;
--amethyst-5: #E8DAEF;
}Tailwind v4
@theme {
--color-amethyst-1: #4A0E8F;
--color-amethyst-2: #6A1FB5;
--color-amethyst-3: #9B59B6;
--color-amethyst-4: #C39BD3;
--color-amethyst-5: #E8DAEF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'amethyst': {
100: '#4A0E8F',
200: '#6A1FB5',
300: '#9B59B6',
400: '#C39BD3',
500: '#E8DAEF',
},SCSS
$amethyst-1: #4A0E8F;
$amethyst-2: #6A1FB5;
$amethyst-3: #9B59B6;
$amethyst-4: #C39BD3;
$amethyst-5: #E8DAEF;JSON
["#4A0E8F","#6A1FB5","#9B59B6","#C39BD3","#E8DAEF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.