What are the hex codes in the Indigo & Amethyst Haze palette?

The Indigo & Amethyst Haze color palette consists of Periwinkle #CCCAF1, Amethyst #826BC2, Indigo #530082, Obsidian #1B0014.

How should I use the Indigo & Amethyst Haze palette on a website?

Use Periwinkle #CCCAF1 as the background, Obsidian #1B0014 for text, Indigo #530082 for buttons and links, and Amethyst #826BC2 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Periwinkle on Obsidian at 12.57:1.

Which colors in Indigo & Amethyst Haze have enough contrast for text?

The highest-contrast pair is #CCCAF1 on #1B0014 with a ratio of 12.57:1, which passes WCAG AA for normal text.

#CCCAF1Periwinkle

#826BC2Amethyst

#530082Indigo

#1B0014Obsidian

Indigo & Amethyst Haze color palette

Dark Cold Purple Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Periwinkle	`#CCCAF1`	`rgb(204, 202, 241)`	`hsl(243, 58%, 87%)`	`oklch(85.3% 0.054 288)`
Amethyst	`#826BC2`	`rgb(130, 107, 194)`	`hsl(256, 42%, 59%)`	`oklch(58.8% 0.131 294)`
Indigo	`#530082`	`rgb(83, 0, 130)`	`hsl(278, 100%, 25%)`	`oklch(35.0% 0.181 306)`
Obsidian	`#1B0014`	`rgb(27, 0, 20)`	`hsl(316, 100%, 5%)`	`oklch(15.0% 0.066 339)`

Why it works and how to use it

Indigo & Amethyst Haze is a vivid analogous color palette tagged dark, cold, purple. Analogous neighbors on the wheel (Periwinkle, Amethyst, Indigo) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Indigo takes the lead while the rest support. Lightness runs from 5% to 87%. Well suited to websites, presentations and branding.

Background: Periwinkle (#CCCAF1) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#1B0014) on #CCCAF1 gives 12.57:1, passing WCAG AAA.
Primary: Indigo (#530082) is the most saturated mid-tone; use it for buttons and links (7.86:1 against the background, fine for UI elements).
Accent: Amethyst (#826BC2) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Periwinkle on Obsidian at 12.57:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Indigo & Amethyst Haze

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

#CCCAF1

#826BC2

#530082

#1B0014

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
`#CCCAF1` on `#1B0014`	Aa	12.57:1	AAA
`#CCCAF1` on `#530082`	Aa	7.86:1	AAA
`#826BC2` on `#1B0014`	Aa	4.57:1	AA
`#826BC2` on `#530082`	Aa	2.86:1	Fail
`#CCCAF1` on `#826BC2`	Aa	2.75:1	Fail
`#530082` on `#1B0014`	Aa	1.6:1	Fail

:root {
  --periwinkle: #CCCAF1;
  --amethyst: #826BC2;
  --indigo: #530082;
  --obsidian: #1B0014;
}

$periwinkle: #CCCAF1;
$amethyst: #826BC2;
$indigo: #530082;
$obsidian: #1B0014;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'periwinkle': '#CCCAF1',
        'amethyst': '#826BC2',
        'indigo': '#530082',
        'obsidian': '#1B0014',
      },
    },
  },
};

{
  "name": "Indigo & Amethyst Haze",
  "colors": [
    "#CCCAF1",
    "#826BC2",
    "#530082",
    "#1B0014"
  ]
}

background: linear-gradient(135deg, #CCCAF1, #826BC2, #530082, #1B0014);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-07-10 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood