Warm Blue to Purple Illusion Color Palette

About this palette

Warm Blue to Purple Illusion is a 4-color vibrant, cool, neon palette: #3858EC (Warm Blue), #00A257 (Jungle), #AD82FF (Illicit Purple), #B6BDFF (Purple Illusion). It mixes blue, green, purple tones and feels cool overall. The strongest text pairing is #3858EC on #B6BDFF with a contrast ratio of 3.10:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Warm Blue	rgb(56, 88, 236)	hsl(229, 83%, 57%)
Jungle	rgb(0, 162, 87)	hsl(152, 100%, 32%)
Illicit Purple	rgb(173, 130, 255)	hsl(261, 100%, 75%)
Purple Illusion	rgb(182, 189, 255)	hsl(234, 100%, 86%)

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.10:1 Poor#3858EC on #B6BDFF
Aa3.10:1 Poor#B6BDFF on #3858EC

Color blindness preview

CSS variables

/* Warm Blue to Purple Illusion — https://swatchly.xyz/palette/3858ec-00a257-ad82ff-b6bdff */
:root {
  --warm-blue: #3858ec;
  --jungle: #00a257;
  --illicit-purple: #ad82ff;
  --purple-illusion: #b6bdff;
}

Tailwind CSS v4

/* Warm Blue to Purple Illusion — https://swatchly.xyz/palette/3858ec-00a257-ad82ff-b6bdff */
@theme {
  --color-warm-blue: #3858ec;
  --color-warm-blue-50: #f1f5ff;
  --color-warm-blue-100: #e3ebff;
  --color-warm-blue-200: #c7d7ff;
  --color-warm-blue-300: #a7c0ff;
  --color-warm-blue-400: #7a9cff;
  --color-warm-blue-500: #547aff;
  --color-warm-blue-600: #3858ec;
  --color-warm-blue-700: #2841c7;
  --color-warm-blue-800: #1c2ea5;
  --color-warm-blue-900: #132086;
  --color-warm-blue-950: #09115b;
  --color-jungle: #00a257;
  --color-jungle-50: #dfffe7;
  --color-jungle-100: #baffce;
  --color-jungle-200: #99efb4;
  --color-jungle-300: #75db98;
  --color-jungle-400: #43be74;
  --color-jungle-500: #00a257;
  --color-jungle-600: #008345;
  --color-jungle-700: #006836;
  --color-jungle-800: #005129;
  --color-jungle-900: #003f1e;
  --color-jungle-950: #002711;
  --color-illicit-purple: #ad82ff;
  --color-illicit-purple-50: #f5f2ff;
  --color-illicit-purple-100: #ece5ff;
  --color-illicit-purple-200: #dacdff;
  --color-illicit-purple-300: #c7afff;
  --color-illicit-purple-400: #ad82ff;
  --color-illicit-purple-500: #9266e0;
  --color-illicit-purple-600: #784bc1;
  --color-illicit-purple-700: #6136a2;
  --color-illicit-purple-800: #4d2685;
  --color-illicit-purple-900: #3c1a6c;
  --color-illicit-purple-950: #260d48;
  --color-purple-illusion: #b6bdff;
  --color-purple-illusion-50: #f4f5ff;
  --color-purple-illusion-100: #e8ebff;
  --color-purple-illusion-200: #d1d6ff;
  --color-purple-illusion-300: #b6bdff;
  --color-purple-illusion-400: #979ddb;
  --color-purple-illusion-500: #7c81bf;
  --color-purple-illusion-600: #6266a1;
  --color-purple-illusion-700: #4c5085;
  --color-purple-illusion-800: #3a3d6c;
  --color-purple-illusion-900: #2c2e55;
  --color-purple-illusion-950: #1a1c38;
}