Evening Magic to Black Sea Night color palette

304480Evening Magic AF66C1Prickly Purple 6E5400Ayahuasca Vine D081D1Pink Punk 88F1ACJittery Jade 0F255EBlack Sea Night

Open in generator Export PNG, PDF, ASE…

About this palette

Evening Magic to Black Sea Night is a 6-color cool palette: #304480 (Evening Magic), #AF66C1 (Prickly Purple), #6E5400 (Ayahuasca Vine), #D081D1 (Pink Punk), #88F1AC (Jittery Jade), #0F255E (Black Sea Night). It mixes blue, purple, brown, pink, green tones and feels cool overall. The strongest text pairing is #88F1AC on #0F255E with a contrast ratio of 10.52:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Evening Magic	rgb(48, 68, 128)	hsl(225, 45%, 35%)
Prickly Purple	rgb(175, 102, 193)	hsl(288, 42%, 58%)
Ayahuasca Vine	rgb(110, 84, 0)	hsl(46, 100%, 22%)
Pink Punk	rgb(208, 129, 209)	hsl(299, 47%, 66%)
Jittery Jade	rgb(136, 241, 172)	hsl(141, 79%, 74%)
Black Sea Night	rgb(15, 37, 94)	hsl(223, 72%, 21%)

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.

Aa10.52:1 Very good#88F1AC on #0F255E
Aa10.52:1 Very good#0F255E on #88F1AC
Aa6.72:1 Good#304480 on #88F1AC
Aa6.72:1 Good#88F1AC on #304480
Aa5.35:1 Good#D081D1 on #0F255E
Aa5.35:1 Good#0F255E on #D081D1
Aa5.19:1 Good#6E5400 on #88F1AC
Aa5.19:1 Good#88F1AC on #6E5400

Color blindness preview

CSS variables

/* Evening Magic to Black Sea Night — https://swatchly.xyz/palette/304480-af66c1-6e5400-d081d1-88f1ac-0f255e */
:root {
  --evening-magic: #304480;
  --prickly-purple: #af66c1;
  --ayahuasca-vine: #6e5400;
  --pink-punk: #d081d1;
  --jittery-jade: #88f1ac;
  --black-sea-night: #0f255e;
}

Tailwind CSS v4

/* Evening Magic to Black Sea Night — https://swatchly.xyz/palette/304480-af66c1-6e5400-d081d1-88f1ac-0f255e */
@theme {
  --color-evening-magic: #304480;
  --color-evening-magic-50: #f1f5ff;
  --color-evening-magic-100: #e3ebff;
  --color-evening-magic-200: #c7d7ff;
  --color-evening-magic-300: #a9c1fc;
  --color-evening-magic-400: #89a2e3;
  --color-evening-magic-500: #6e87c9;
  --color-evening-magic-600: #566dac;
  --color-evening-magic-700: #435791;
  --color-evening-magic-800: #304480;
  --color-evening-magic-900: #253561;
  --color-evening-magic-950: #162141;
  --color-prickly-purple: #af66c1;
  --color-prickly-purple-50: #fcf1ff;
  --color-prickly-purple-100: #f9e3ff;
  --color-prickly-purple-200: #f3c5ff;
  --color-prickly-purple-300: #e7a6f7;
  --color-prickly-purple-400: #ca83dc;
  --color-prickly-purple-500: #af66c1;
  --color-prickly-purple-600: #924ba3;
  --color-prickly-purple-700: #773687;
  --color-prickly-purple-800: #5f266d;
  --color-prickly-purple-900: #4b1a57;
  --color-prickly-purple-950: #300d39;
  --color-ayahuasca-vine: #6e5400;
  --color-ayahuasca-vine-50: #fff4db;
  --color-ayahuasca-vine-100: #fceabf;
  --color-ayahuasca-vine-200: #ebd6a4;
  --color-ayahuasca-vine-300: #d8c086;
  --color-ayahuasca-vine-400: #bba05f;
  --color-ayahuasca-vine-500: #a08540;
  --color-ayahuasca-vine-600: #856b25;
  --color-ayahuasca-vine-700: #6e5400;
  --color-ayahuasca-vine-800: #564100;
  --color-ayahuasca-vine-900: #433200;
  --color-ayahuasca-vine-950: #2b1f00;
  --color-pink-punk: #d081d1;
  --color-pink-punk-50: #fff0ff;
  --color-pink-punk-100: #ffe0fe;
  --color-pink-punk-200: #fdc0fd;
  --color-pink-punk-300: #eba6eb;
  --color-pink-punk-400: #d081d1;
  --color-pink-punk-500: #b265b4;
  --color-pink-punk-600: #954b96;
  --color-pink-punk-700: #7a367c;
  --color-pink-punk-800: #622663;
  --color-pink-punk-900: #4d1a4f;
  --color-pink-punk-950: #320d33;
  --color-jittery-jade: #88f1ac;
  --color-jittery-jade-50: #dcffe5;
  --color-jittery-jade-100: #befcd0;
  --color-jittery-jade-200: #88f1ac;
  --color-jittery-jade-300: #80d79d;
  --color-jittery-jade-400: #54b97a;
  --color-jittery-jade-500: #2e9d5d;
  --color-jittery-jade-600: #008145;
  --color-jittery-jade-700: #006736;
  --color-jittery-jade-800: #005129;
  --color-jittery-jade-900: #003e1e;
  --color-jittery-jade-950: #002711;
  --color-black-sea-night: #0f255e;
  --color-black-sea-night-50: #f0f5ff;
  --color-black-sea-night-100: #e2ebff;
  --color-black-sea-night-200: #c5d8ff;
  --color-black-sea-night-300: #a4c1fc;
  --color-black-sea-night-400: #809fe0;
  --color-black-sea-night-500: #6381c2;
  --color-black-sea-night-600: #4965a2;
  --color-black-sea-night-700: #354d83;
  --color-black-sea-night-800: #253967;
  --color-black-sea-night-900: #0f255e;
  --color-black-sea-night-950: #0c1731;
}