Cyberpunk Palette

CSS variables

:root {
  --color-1: #0D0221;
  --color-2: #FF2A6D;
  --color-3: #05D9E8;
  --color-4: #D1F7FF;
  --color-5: #7700A6;
}

Tailwind config

// tailwind.config.js
colors: {
  "cyberpunk-1": "#0D0221",
  "cyberpunk-2": "#FF2A6D",
  "cyberpunk-3": "#05D9E8",
  "cyberpunk-4": "#D1F7FF",
  "cyberpunk-5": "#7700A6",
}

About this palette

The Cyberpunk palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.

Readable text on each color

White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.

#0D0221White20.04:1AA

#FF2A6DNear-black5.22:1AA

#05D9E8Near-black10.88:1AA

#D1F7FFNear-black16.61:1AA

#7700A6White8.99:1AA

These colours on each other

10 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#0D0221	#FF2A6D	#05D9E8	#D1F7FF	#7700A6
#0D0221	·	5.54AA	11.55AA	17.62AA	2.23Fails
#FF2A6D	5.54AA	·	2.08Fails	3.18Large only	2.49Fails
#05D9E8	11.55AA	2.08Fails	·	1.53Fails	5.18AA
#D1F7FF	17.62AA	3.18Large only	1.53Fails	·	7.91AA
#7700A6	2.23Fails	2.49Fails	5.18AA	7.91AA	·

More palettes

Gradients in the same range

Midnight Blue Slate Fade Cosmic

Cyberpunk Palette

Related

Gradients in the same range