Amethyst Veil · App palette (10 colors, ready to copy)

10 color roles

Every color has a defined purpose. Use the buttons on the right to copy it in any format.

Primary primary

Brand color for primary buttons, selected states and emphasis

#8028d2rgb(128, 40, 210)hsl(271.1, 68%, 49%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#5c1a99rgb(92, 26, 153)hsl(271.2, 70.9%, 35.1%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#d0b4e9rgb(208, 180, 233)hsl(271.7, 54.6%, 81%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#c24cc0rgb(194, 76, 192)hsl(301, 49.2%, 52.9%)

Accent accent

Spot color for badges and highlights

#8bef2ergb(139, 239, 46)hsl(91.1, 85.8%, 55.9%)

Success success

Success toasts and completed states

#24b25frgb(36, 178, 95)hsl(144.9, 66.4%, 42%)

Warning warning

Warnings and pending states

#f5a70argb(245, 167, 10)hsl(40.1, 92.2%, 50%)

Danger danger

Errors, destructive actions and failure states

#e92e20rgb(233, 46, 32)hsl(4.2, 82%, 52%)

Text text

Body text color

#262329rgb(38, 35, 41)hsl(270, 7.9%, 14.9%)

Page background bg

Page base color

#faf9fargb(250, 249, 250)hsl(300, 9.1%, 97.8%)

How to use it

Written by hand for the hue family and lightness of this palette, not assembled from a template.

The lead color sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on.

Good forFor creative, beauty, content and membership products — the more emotional end of the spectrum.

Use with carePurple, red and blue can blur together; keep enough lightness between them.

Pairs withPale pink and cream soften it; deep blue grounds it.

Hue family: Purple

What it looks like in a real interface

The same palette rendered across all three platforms — the fastest way to judge whether it works.

Live preview · switch platform

9:41

Today

FeaturedNearby

Weekend by the sea

Sample body copy, used to check how secondary text reads on a card background.

Accessibility contrast check

Calculated to WCAG 2.1. AA is the accessibility baseline, AAA the enhanced level.

Foreground / background	Ratio	Body text	Large text
Body text / page background	14.76:1	AAA	AAA
Brand color / page background	6.34:1	AAA	AAA

Verify this pair in the checker →

Export to your project

Four formats, ready to paste. Or fetch them by URL from your tooling or AI agent.

CSS variables

:root {
  --color-primary: #8028d2; /* Primary */
  --color-primaryDark: #5c1a99; /* Primary dark */
  --color-primaryLight: #d0b4e9; /* Primary light */
  --color-secondary: #c24cc0; /* Secondary */
  --color-accent: #8bef2e; /* Accent */
  --color-success: #24b25f; /* Success */
  --color-warning: #f5a70a; /* Warning */
  --color-danger: #e92e20; /* Danger */
  --color-text: #262329; /* Text */
  --color-bg: #faf9fa; /* Page background */
}

SCSS variables

$color-primary: #8028d2; // Primary
$color-primaryDark: #5c1a99; // Primary dark
$color-primaryLight: #d0b4e9; // Primary light
$color-secondary: #c24cc0; // Secondary
$color-accent: #8bef2e; // Accent
$color-success: #24b25f; // Success
$color-warning: #f5a70a; // Warning
$color-danger: #e92e20; // Danger
$color-text: #262329; // Text
$color-bg: #faf9fa; // Page background

Tailwind config

// tailwind.config.js: Amethyst Veil
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#8028d2',
        'primaryDark': '#5c1a99',
        'primaryLight': '#d0b4e9',
        'secondary': '#c24cc0',
        'accent': '#8bef2e',
        'success': '#24b25f',
        'warning': '#f5a70a',
        'danger': '#e92e20',
        'text': '#262329',
        'bg': '#faf9fa',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Amethyst Veil",
  "platform": "app",
  "tags": [
    "Morandi",
    "Purple"
  ],
  "advice": {
    "family": "Purple",
    "depth": "The lead color sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on.",
    "muted": null,
    "suit": "For creative, beauty, content and membership products — the more emotional end of the spectrum.",
    "avoid": "Purple, red and blue can blur together; keep enough lightness between them.",
    "pair": "Pale pink and cream soften it; deep blue grounds it."
  },
  "roles": {
    "primary": "#8028d2",
    "primaryDark": "#5c1a99",
    "primaryLight": "#d0b4e9",
    "secondary": "#c24cc0",
    "accent": "#8bef2e",
    "success": "#24b25f",
    "warning": "#f5a70a",
    "danger": "#e92e20",
    "text": "#262329",
    "bg": "#faf9fa"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.76,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 6.34,
      "level": "AAA"
    }
  }
}

More palettes on this platform