Hyperpop Green to Kabuki Color Palette

About this palette

Hyperpop Green to Kabuki is a 5-color cool palette: #50F2A1 (Hyperpop Green), #0E0F31 (Infinite Night), #69B163 (Arugula), #880024 (Barbera), #AB3D45 (Kabuki). It mixes green, purple, red tones and feels cool overall. The strongest text pairing is #50F2A1 on #0E0F31 with a contrast ratio of 12.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hyperpop Green	rgb(80, 242, 161)	hsl(150, 86%, 63%)
Infinite Night	rgb(14, 15, 49)	hsl(238, 56%, 12%)
Arugula	rgb(105, 177, 99)	hsl(115, 33%, 54%)
Barbera	rgb(136, 0, 36)	hsl(344, 100%, 27%)
Kabuki	rgb(171, 61, 69)	hsl(356, 47%, 45%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa12.87:1 Super#50F2A1 on #0E0F31
Aa12.87:1 Super#0E0F31 on #50F2A1
Aa7.13:1 Very good#0E0F31 on #69B163
Aa7.13:1 Very good#69B163 on #0E0F31
Aa7.02:1 Very good#50F2A1 on #880024
Aa7.02:1 Very good#880024 on #50F2A1
Aa4.18:1 Poor#50F2A1 on #AB3D45
Aa4.18:1 Poor#AB3D45 on #50F2A1

Color blindness preview

CSS variables

/* Hyperpop Green to Kabuki — https://swatchly.xyz/palette/50f2a1-0e0f31-69b163-880024-ab3d45 */
:root {
  --hyperpop-green: #50f2a1;
  --infinite-night: #0e0f31;
  --arugula: #69b163;
  --barbera: #880024;
  --kabuki: #ab3d45;
}

Tailwind CSS v4

/* Hyperpop Green to Kabuki — https://swatchly.xyz/palette/50f2a1-0e0f31-69b163-880024-ab3d45 */
@theme {
  --color-hyperpop-green: #50f2a1;
  --color-hyperpop-green-50: #cbffde;
  --color-hyperpop-green-100: #a1fdc6;
  --color-hyperpop-green-200: #50f2a1;
  --color-hyperpop-green-300: #51d892;
  --color-hyperpop-green-400: #00ba72;
  --color-hyperpop-green-500: #009c5f;
  --color-hyperpop-green-600: #007e4c;
  --color-hyperpop-green-700: #00653c;
  --color-hyperpop-green-800: #00502e;
  --color-hyperpop-green-900: #003e23;
  --color-hyperpop-green-950: #002714;
  --color-infinite-night: #0e0f31;
  --color-infinite-night-50: #f2f4ff;
  --color-infinite-night-100: #e6eaff;
  --color-infinite-night-200: #cfd5f8;
  --color-infinite-night-300: #b7bee6;
  --color-infinite-night-400: #979eca;
  --color-infinite-night-500: #7980ac;
  --color-infinite-night-600: #5e648c;
  --color-infinite-night-700: #464c6f;
  --color-infinite-night-800: #333755;
  --color-infinite-night-900: #23273e;
  --color-infinite-night-950: #0e0f31;
  --color-arugula: #69b163;
  --color-arugula-50: #dcffd8;
  --color-arugula-100: #c9f8c4;
  --color-arugula-200: #aee5a8;
  --color-arugula-300: #91d08b;
  --color-arugula-400: #69b163;
  --color-arugula-500: #4e9649;
  --color-arugula-600: #357b31;
  --color-arugula-700: #22631e;
  --color-arugula-800: #144f11;
  --color-arugula-900: #0a3e08;
  --color-arugula-950: #032703;
  --color-barbera: #880024;
  --color-barbera-50: #fff1f1;
  --color-barbera-100: #ffe4e4;
  --color-barbera-200: #ffc7c8;
  --color-barbera-300: #ffa6a8;
  --color-barbera-400: #f3777f;
  --color-barbera-500: #d75964;
  --color-barbera-600: #b93e4b;
  --color-barbera-700: #9b2938;
  --color-barbera-800: #880024;
  --color-barbera-900: #670c1d;
  --color-barbera-950: #45030f;
  --color-kabuki: #ab3d45;
  --color-kabuki-50: #fff1f1;
  --color-kabuki-100: #ffe3e2;
  --color-kabuki-200: #ffc5c4;
  --color-kabuki-300: #ffa1a1;
  --color-kabuki-400: #e8787b;
  --color-kabuki-500: #ca5a5f;
  --color-kabuki-600: #ab3d45;
  --color-kabuki-700: #8c2b33;
  --color-kabuki-800: #721c25;
  --color-kabuki-900: #5b111a;
  --color-kabuki-950: #3c070e;
}