Indigo to Redolenc Color Palette

About this palette

Indigo to Redolenc is a 5-color vibrant, cool palette: #4E107D (Indigo), #39EDFF (Sparky Blue), #A63137 (Desirable), #889E00 (Noxious), #EA8A79 (Redolenc). It mixes purple, turquoise, red, green tones and feels cool overall. The strongest text pairing is #4E107D on #39EDFF with a contrast ratio of 8.70:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Indigo	rgb(78, 16, 125)	hsl(274, 77%, 28%)
Sparky Blue	rgb(57, 237, 255)	hsl(185, 100%, 61%)
Desirable	rgb(166, 49, 55)	hsl(357, 54%, 42%)
Noxious	rgb(136, 158, 0)	hsl(68, 100%, 31%)
Redolenc	rgb(234, 138, 121)	hsl(9, 73%, 70%)

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.

Aa8.70:1 Very good#4E107D on #39EDFF
Aa8.70:1 Very good#39EDFF on #4E107D
Aa4.96:1 Good#4E107D on #EA8A79
Aa4.96:1 Good#EA8A79 on #4E107D
Aa4.73:1 Good#39EDFF on #A63137
Aa4.73:1 Good#A63137 on #39EDFF
Aa4.09:1 Poor#4E107D on #889E00
Aa4.09:1 Poor#889E00 on #4E107D

Color blindness preview

CSS variables

/* Indigo to Redolenc — https://swatchly.xyz/palette/4e107d-39edff-a63137-889e00-ea8a79 */
:root {
  --indigo: #4e107d;
  --sparky-blue: #39edff;
  --desirable: #a63137;
  --noxious: #889e00;
  --redolenc: #ea8a79;
}

Tailwind CSS v4

/* Indigo to Redolenc — https://swatchly.xyz/palette/4e107d-39edff-a63137-889e00-ea8a79 */
@theme {
  --color-indigo: #4e107d;
  --color-indigo-50: #f7f2ff;
  --color-indigo-100: #f0e6ff;
  --color-indigo-200: #e2ccff;
  --color-indigo-300: #d2aeff;
  --color-indigo-400: #b987f2;
  --color-indigo-500: #9f6bd8;
  --color-indigo-600: #8551bb;
  --color-indigo-700: #6e3d9f;
  --color-indigo-800: #5a2d86;
  --color-indigo-900: #4e107d;
  --color-indigo-950: #30124c;
  --color-sparky-blue: #39edff;
  --color-sparky-blue-50: #d5fbff;
  --color-sparky-blue-100: #aef6ff;
  --color-sparky-blue-200: #39edff;
  --color-sparky-blue-300: #44d4e3;
  --color-sparky-blue-400: #00b4c3;
  --color-sparky-blue-500: #0096a3;
  --color-sparky-blue-600: #007984;
  --color-sparky-blue-700: #006169;
  --color-sparky-blue-800: #004c53;
  --color-sparky-blue-900: #003b40;
  --color-sparky-blue-950: #002529;
  --color-desirable: #a63137;
  --color-desirable-50: #fff2f1;
  --color-desirable-100: #ffe1df;
  --color-desirable-200: #ffc2be;
  --color-desirable-300: #ff9b98;
  --color-desirable-400: #e76f6f;
  --color-desirable-500: #c75052;
  --color-desirable-600: #a63137;
  --color-desirable-700: #872228;
  --color-desirable-800: #6e151c;
  --color-desirable-900: #580c13;
  --color-desirable-950: #3a0409;
  --color-noxious: #889e00;
  --color-noxious-50: #f1ffc8;
  --color-noxious-100: #e8f9b3;
  --color-noxious-200: #d5e995;
  --color-noxious-300: #c0d572;
  --color-noxious-400: #a2b842;
  --color-noxious-500: #889e00;
  --color-noxious-600: #6d7f00;
  --color-noxious-700: #566500;
  --color-noxious-800: #424e00;
  --color-noxious-900: #323b00;
  --color-noxious-950: #1e2400;
  --color-redolenc: #ea8a79;
  --color-redolenc-50: #fff5f3;
  --color-redolenc-100: #ffe9e5;
  --color-redolenc-200: #ffcfc6;
  --color-redolenc-300: #ffafa1;
  --color-redolenc-400: #ea8a79;
  --color-redolenc-500: #ca6d5e;
  --color-redolenc-600: #aa5243;
  --color-redolenc-700: #8c3c2f;
  --color-redolenc-800: #712a20;
  --color-redolenc-900: #591d15;
  --color-redolenc-950: #3a0f09;
}