Vaporwave Blue to Crown of Thorns Color Palette

About this palette

Vaporwave Blue to Crown of Thorns is a 5-color cool, vintage palette: #3FD8F2 (Vaporwave Blue), #777519 (Jungle Look), #003F3F (Rich Black), #A5A5EC (Cold Lips), #77372E (Crown of Thorns). It mixes turquoise, brown, purple tones and feels cool overall. The strongest text pairing is #3FD8F2 on #003F3F with a contrast ratio of 6.91:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vaporwave Blue	rgb(63, 216, 242)	hsl(189, 87%, 60%)
Jungle Look	rgb(119, 117, 25)	hsl(59, 65%, 28%)
Rich Black	rgb(0, 63, 63)	hsl(180, 100%, 12%)
Cold Lips	rgb(165, 165, 236)	hsl(240, 65%, 79%)
Crown of Thorns	rgb(119, 55, 46)	hsl(7, 44%, 32%)

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.

Aa6.91:1 Good#3FD8F2 on #003F3F
Aa6.91:1 Good#003F3F on #3FD8F2
Aa5.20:1 Good#3FD8F2 on #77372E
Aa5.20:1 Good#77372E on #3FD8F2
Aa5.16:1 Good#003F3F on #A5A5EC
Aa5.16:1 Good#A5A5EC on #003F3F
Aa3.88:1 Poor#A5A5EC on #77372E
Aa3.88:1 Poor#77372E on #A5A5EC

Color blindness preview

CSS variables

/* Vaporwave Blue to Crown of Thorns — https://swatchly.xyz/palette/3fd8f2-777519-003f3f-a5a5ec-77372e */
:root {
  --vaporwave-blue: #3fd8f2;
  --jungle-look: #777519;
  --rich-black: #003f3f;
  --cold-lips: #a5a5ec;
  --crown-of-thorns: #77372e;
}

Tailwind CSS v4

/* Vaporwave Blue to Crown of Thorns — https://swatchly.xyz/palette/3fd8f2-777519-003f3f-a5a5ec-77372e */
@theme {
  --color-vaporwave-blue: #3fd8f2;
  --color-vaporwave-blue-50: #e5fbff;
  --color-vaporwave-blue-100: #c8f6ff;
  --color-vaporwave-blue-200: #8beafd;
  --color-vaporwave-blue-300: #3fd8f2;
  --color-vaporwave-blue-400: #10b6cf;
  --color-vaporwave-blue-500: #0098ad;
  --color-vaporwave-blue-600: #007a8b;
  --color-vaporwave-blue-700: #00616f;
  --color-vaporwave-blue-800: #004c57;
  --color-vaporwave-blue-900: #003a43;
  --color-vaporwave-blue-950: #00242b;
  --color-jungle-look: #777519;
  --color-jungle-look-50: #f8f9cb;
  --color-jungle-look-100: #f0f0bd;
  --color-jungle-look-200: #dedea1;
  --color-jungle-look-300: #c9c982;
  --color-jungle-look-400: #abaa5a;
  --color-jungle-look-500: #918f39;
  --color-jungle-look-600: #777519;
  --color-jungle-look-700: #5f5d00;
  --color-jungle-look-800: #4a4800;
  --color-jungle-look-900: #393700;
  --color-jungle-look-950: #232200;
  --color-rich-black: #003f3f;
  --color-rich-black-50: #defcfb;
  --color-rich-black-100: #d1f3f2;
  --color-rich-black-200: #b8e1e0;
  --color-rich-black-300: #9dcbca;
  --color-rich-black-400: #7aadac;
  --color-rich-black-500: #5d9392;
  --color-rich-black-600: #447878;
  --color-rich-black-700: #306161;
  --color-rich-black-800: #214d4d;
  --color-rich-black-900: #003f3f;
  --color-rich-black-950: #0a2727;
  --color-cold-lips: #a5a5ec;
  --color-cold-lips-50: #f8f9ff;
  --color-cold-lips-100: #eff0ff;
  --color-cold-lips-200: #dbdcff;
  --color-cold-lips-300: #c4c5ff;
  --color-cold-lips-400: #a5a5ec;
  --color-cold-lips-500: #8887cb;
  --color-cold-lips-600: #6c6aac;
  --color-cold-lips-700: #54528e;
  --color-cold-lips-800: #403e73;
  --color-cold-lips-900: #302e5a;
  --color-cold-lips-950: #1c1a3a;
  --color-crown-of-thorns: #77372e;
  --color-crown-of-thorns-50: #fff2ef;
  --color-crown-of-thorns-100: #ffe4df;
  --color-crown-of-thorns-200: #ffc6bc;
  --color-crown-of-thorns-300: #edaba0;
  --color-crown-of-thorns-400: #ce887c;
  --color-crown-of-thorns-500: #b06a5f;
  --color-crown-of-thorns-600: #915046;
  --color-crown-of-thorns-700: #77372e;
  --color-crown-of-thorns-800: #5c2b24;
  --color-crown-of-thorns-900: #49201a;
  --color-crown-of-thorns-950: #2f120e;
}