Violet to Ice Climber color palette

9E00F2Violet 009C97Green Dynasty D041F6Flamingo Queen E85AB3Fugitive Flamingo 11BEFFCapri 00DFD2Ice Climber

Open in generator Export PNG, PDF, ASE…

About this palette

Violet to Ice Climber is a 6-color vibrant, cool, neon palette: #9E00F2 (Violet), #009C97 (Green Dynasty), #D041F6 (Flamingo Queen), #E85AB3 (Fugitive Flamingo), #11BEFF (Capri), #00DFD2 (Ice Climber). It mixes purple, turquoise, pink, blue tones and feels cool overall. The strongest text pairing is #9E00F2 on #00DFD2 with a contrast ratio of 3.34:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet	rgb(158, 0, 242)	hsl(279, 100%, 47%)
Green Dynasty	rgb(0, 156, 151)	hsl(178, 100%, 31%)
Flamingo Queen	rgb(208, 65, 246)	hsl(287, 91%, 61%)
Fugitive Flamingo	rgb(232, 90, 179)	hsl(322, 76%, 63%)
Capri	rgb(17, 190, 255)	hsl(196, 100%, 53%)
Ice Climber	rgb(0, 223, 210)	hsl(177, 100%, 44%)

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.

Aa3.34:1 Poor#9E00F2 on #00DFD2
Aa3.34:1 Poor#00DFD2 on #9E00F2

Color blindness preview

CSS variables

/* Violet to Ice Climber — https://swatchly.xyz/palette/9e00f2-009c97-d041f6-e85ab3-11beff-00dfd2 */
:root {
  --violet: #9e00f2;
  --green-dynasty: #009c97;
  --flamingo-queen: #d041f6;
  --fugitive-flamingo: #e85ab3;
  --capri: #11beff;
  --ice-climber: #00dfd2;
}

Tailwind CSS v4

/* Violet to Ice Climber — https://swatchly.xyz/palette/9e00f2-009c97-d041f6-e85ab3-11beff-00dfd2 */
@theme {
  --color-violet: #9e00f2;
  --color-violet-50: #f8f2ff;
  --color-violet-100: #f2e7ff;
  --color-violet-200: #e5cfff;
  --color-violet-300: #d7b2ff;
  --color-violet-400: #c384ff;
  --color-violet-500: #b252ff;
  --color-violet-600: #9e00f2;
  --color-violet-700: #7e00c2;
  --color-violet-800: #63009a;
  --color-violet-900: #4d0079;
  --color-violet-950: #310050;
  --color-green-dynasty: #009c97;
  --color-green-dynasty-50: #d7fffc;
  --color-green-dynasty-100: #b8fbf6;
  --color-green-dynasty-200: #99eae5;
  --color-green-dynasty-300: #75d5d0;
  --color-green-dynasty-400: #43b7b2;
  --color-green-dynasty-500: #009c97;
  --color-green-dynasty-600: #007e7a;
  --color-green-dynasty-700: #006460;
  --color-green-dynasty-800: #004e4b;
  --color-green-dynasty-900: #003c3a;
  --color-green-dynasty-950: #002624;
  --color-flamingo-queen: #d041f6;
  --color-flamingo-queen-50: #fcf4ff;
  --color-flamingo-queen-100: #fae8ff;
  --color-flamingo-queen-200: #f3ceff;
  --color-flamingo-queen-300: #ecadff;
  --color-flamingo-queen-400: #e077ff;
  --color-flamingo-queen-500: #d041f6;
  --color-flamingo-queen-600: #b00fd4;
  --color-flamingo-queen-700: #8d00ac;
  --color-flamingo-queen-800: #6f0087;
  --color-flamingo-queen-900: #550069;
  --color-flamingo-queen-950: #360044;
  --color-fugitive-flamingo: #e85ab3;
  --color-fugitive-flamingo-50: #ffebf5;
  --color-fugitive-flamingo-100: #ffdaed;
  --color-fugitive-flamingo-200: #ffb7df;
  --color-fugitive-flamingo-300: #ff8bcf;
  --color-fugitive-flamingo-400: #e85ab3;
  --color-fugitive-flamingo-500: #ca3d99;
  --color-fugitive-flamingo-600: #ab217e;
  --color-fugitive-flamingo-700: #8e0667;
  --color-fugitive-flamingo-800: #730052;
  --color-fugitive-flamingo-900: #5b0040;
  --color-fugitive-flamingo-950: #3d002a;
  --color-capri: #11beff;
  --color-capri-50: #f4fbff;
  --color-capri-100: #e5f5ff;
  --color-capri-200: #bfe8ff;
  --color-capri-300: #8dd8ff;
  --color-capri-400: #11beff;
  --color-capri-500: #009ed5;
  --color-capri-600: #007fac;
  --color-capri-700: #006488;
  --color-capri-800: #004d6a;
  --color-capri-900: #003a51;
  --color-capri-950: #002333;
  --color-ice-climber: #00dfd2;
  --color-ice-climber-50: #d9fffa;
  --color-ice-climber-100: #a9fff6;
  --color-ice-climber-200: #7fefe4;
  --color-ice-climber-300: #00dfd2;
  --color-ice-climber-400: #00bbb0;
  --color-ice-climber-500: #009c92;
  --color-ice-climber-600: #007d76;
  --color-ice-climber-700: #00635d;
  --color-ice-climber-800: #004e49;
  --color-ice-climber-900: #003c38;
  --color-ice-climber-950: #002623;
}