Mist Violet · App palette (10 colours, ready to copy)

10 colour roles

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

Primary primary

Brand colour for primary buttons, selected states and emphasis

#a657c7rgb(166, 87, 199)hsl(282.3, 50%, 56.1%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#8232a4rgb(130, 50, 164)hsl(282.1, 53.3%, 42%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#e5d5ebrgb(229, 213, 235)hsl(283.6, 35.5%, 87.8%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#afbe74rgb(175, 190, 116)hsl(72.2, 36.3%, 60%)

Accent accent

Spot colour for badges and highlights

#bcdb43rgb(188, 219, 67)hsl(72.2, 67.9%, 56.1%)

Success success

Success toasts and completed states

#2cb565rgb(44, 181, 101)hsl(145, 60.9%, 44.1%)

Warning warning

Warnings and pending states

#f5aa14rgb(245, 170, 20)hsl(40, 91.8%, 52%)

Danger danger

Errors, destructive actions and failure states

#e33c31rgb(227, 60, 49)hsl(3.7, 76.1%, 54.1%)

Text text

Body text colour

#272329rgb(39, 35, 41)hsl(280, 7.9%, 14.9%)

Page background bg

Page base colour

#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 colour is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.

Good forIts sense of prestige suits memberships, privileges and exclusivity.

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.72:1	AAA	AAA
Brand colour / page background	4.16:1	AA	AA

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: #a657c7; /* Primary */
  --color-primaryDark: #8232a4; /* Primary dark */
  --color-primaryLight: #e5d5eb; /* Primary light */
  --color-secondary: #afbe74; /* Secondary */
  --color-accent: #bcdb43; /* Accent */
  --color-success: #2cb565; /* Success */
  --color-warning: #f5aa14; /* Warning */
  --color-danger: #e33c31; /* Danger */
  --color-text: #272329; /* Text */
  --color-bg: #faf9fa; /* Page background */
}

SCSS variables

$color-primary: #a657c7; // Primary
$color-primaryDark: #8232a4; // Primary dark
$color-primaryLight: #e5d5eb; // Primary light
$color-secondary: #afbe74; // Secondary
$color-accent: #bcdb43; // Accent
$color-success: #2cb565; // Success
$color-warning: #f5aa14; // Warning
$color-danger: #e33c31; // Danger
$color-text: #272329; // Text
$color-bg: #faf9fa; // Page background

Tailwind config

// tailwind.config.js: Mist Violet
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#a657c7',
        'primaryDark': '#8232a4',
        'primaryLight': '#e5d5eb',
        'secondary': '#afbe74',
        'accent': '#bcdb43',
        'success': '#2cb565',
        'warning': '#f5aa14',
        'danger': '#e33c31',
        'text': '#272329',
        'bg': '#faf9fa',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Mist Violet",
  "platform": "app",
  "tags": [
    "Cyber",
    "Purple"
  ],
  "advice": {
    "family": "Purple",
    "depth": "The lead colour is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.",
    "muted": null,
    "suit": "Its sense of prestige suits memberships, privileges and exclusivity.",
    "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": "#a657c7",
    "primaryDark": "#8232a4",
    "primaryLight": "#e5d5eb",
    "secondary": "#afbe74",
    "accent": "#bcdb43",
    "success": "#2cb565",
    "warning": "#f5aa14",
    "danger": "#e33c31",
    "text": "#272329",
    "bg": "#faf9fa"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.72,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 4.16,
      "level": "AA"
    }
  }
}

More palettes on this platform