What are the hex codes in the Hologram Slate Blue & Hot Pink palette?

The Hologram Slate Blue & Hot Pink color palette consists of Mauve #EDA6FF, Hot Pink #F46CB5, Slate Blue #865DFF, Licorice #280F1D.

How should I use the Hologram Slate Blue & Hot Pink palette on a website?

Use Mauve #EDA6FF as the background, Licorice #280F1D for text, Slate Blue #865DFF for buttons and links, and Hot Pink #F46CB5 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Mauve on Licorice at 9.78:1.

Which colors in Hologram Slate Blue & Hot Pink have enough contrast for text?

The highest-contrast pair is #EDA6FF on #280F1D with a ratio of 9.78:1, which passes WCAG AA for normal text.

#EDA6FFMauve

#F46CB5Hot Pink

#865DFFSlate Blue

#280F1DLicorice

Hologram Slate Blue & Hot Pink color palette

Cyberpunk Vibrant Neon Purple Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Mauve	`#EDA6FF`	`rgb(237, 166, 255)`	`hsl(288, 100%, 83%)`	`oklch(82.3% 0.142 319)`
Hot Pink	`#F46CB5`	`rgb(244, 108, 181)`	`hsl(328, 86%, 69%)`	`oklch(71.7% 0.184 349)`
Slate Blue	`#865DFF`	`rgb(134, 93, 255)`	`hsl(255, 100%, 68%)`	`oklch(60.9% 0.228 289)`
Licorice	`#280F1D`	`rgb(40, 15, 29)`	`hsl(326, 45%, 11%)`	`oklch(21.3% 0.047 347)`

Why it works and how to use it

Hologram Slate Blue & Hot Pink is a vivid split color palette tagged cyberpunk, vibrant, neon. A split scheme: Mauve plays against Licorice across roughly 73° of hue. 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 4 chromatic colors, Slate Blue takes the lead while the rest support. Lightness runs from 11% to 83%. Well suited to websites, presentations and branding.

Background: Mauve (#EDA6FF) is the lightest color, so it belongs on large surfaces.
Text: Licorice (#280F1D) on #EDA6FF gives 9.78:1, passing WCAG AAA.
Primary: Slate Blue (#865DFF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Hot Pink (#F46CB5) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Mauve on Licorice at 9.78:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Hologram Slate Blue & Hot Pink

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

#EDA6FF

#F46CB5

#865DFF

#280F1D

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
`#EDA6FF` on `#280F1D`	Aa	9.78:1	AAA
`#F46CB5` on `#280F1D`	Aa	6.51:1	AA
`#865DFF` on `#280F1D`	Aa	4.27:1	AA large only
`#EDA6FF` on `#865DFF`	Aa	2.29:1	Fail
`#F46CB5` on `#865DFF`	Aa	1.52:1	Fail
`#EDA6FF` on `#F46CB5`	Aa	1.5:1	Fail

:root {
  --mauve: #EDA6FF;
  --hot-pink: #F46CB5;
  --slate-blue: #865DFF;
  --licorice: #280F1D;
}

$mauve: #EDA6FF;
$hot-pink: #F46CB5;
$slate-blue: #865DFF;
$licorice: #280F1D;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'mauve': '#EDA6FF',
        'hot-pink': '#F46CB5',
        'slate-blue': '#865DFF',
        'licorice': '#280F1D',
      },
    },
  },
};

{
  "name": "Hologram Slate Blue & Hot Pink",
  "colors": [
    "#EDA6FF",
    "#F46CB5",
    "#865DFF",
    "#280F1D"
  ]
}

background: linear-gradient(135deg, #EDA6FF, #F46CB5, #865DFF, #280F1D);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-09-30 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood