Periwinkle to Sour Lime Color Palette

About this palette

Periwinkle to Sour Lime is a 5-color vibrant, cool palette: #8487FF (Periwinkle), #7ABC00 (Kiwi Crush), #009EB0 (Baltic), #0072D8 (Fading Night), #B5C500 (Sour Lime). It mixes purple, green, turquoise, blue tones and feels cool overall. The strongest text pairing is #0072D8 on #B5C500 with a contrast ratio of 2.49:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Periwinkle	rgb(132, 135, 255)	hsl(239, 100%, 76%)
Kiwi Crush	rgb(122, 188, 0)	hsl(81, 100%, 37%)
Baltic	rgb(0, 158, 176)	hsl(186, 100%, 35%)
Fading Night	rgb(0, 114, 216)	hsl(208, 100%, 42%)
Sour Lime	rgb(181, 197, 0)	hsl(65, 100%, 39%)

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.

Color blindness preview

CSS variables

/* Periwinkle to Sour Lime — https://swatchly.xyz/palette/8487ff-7abc00-009eb0-0072d8-b5c500 */
:root {
  --periwinkle: #8487ff;
  --kiwi-crush: #7abc00;
  --baltic: #009eb0;
  --fading-night: #0072d8;
  --sour-lime: #b5c500;
}

Tailwind CSS v4

/* Periwinkle to Sour Lime — https://swatchly.xyz/palette/8487ff-7abc00-009eb0-0072d8-b5c500 */
@theme {
  --color-periwinkle: #8487ff;
  --color-periwinkle-50: #eef0ff;
  --color-periwinkle-100: #e0e4ff;
  --color-periwinkle-200: #c6ccff;
  --color-periwinkle-300: #a9b0ff;
  --color-periwinkle-400: #8487ff;
  --color-periwinkle-500: #6c6ce2;
  --color-periwinkle-600: #5653c2;
  --color-periwinkle-700: #443fa4;
  --color-periwinkle-800: #342f88;
  --color-periwinkle-900: #28236f;
  --color-periwinkle-950: #19144c;
  --color-kiwi-crush: #7abc00;
  --color-kiwi-crush-50: #eaffd7;
  --color-kiwi-crush-100: #d3fea9;
  --color-kiwi-crush-200: #baed87;
  --color-kiwi-crush-300: #a0d95f;
  --color-kiwi-crush-400: #7abc00;
  --color-kiwi-crush-500: #659c00;
  --color-kiwi-crush-600: #507e00;
  --color-kiwi-crush-700: #3f6400;
  --color-kiwi-crush-800: #304e00;
  --color-kiwi-crush-900: #233c00;
  --color-kiwi-crush-950: #142500;
  --color-baltic: #009eb0;
  --color-baltic-50: #e5fbff;
  --color-baltic-100: #c9f7ff;
  --color-baltic-200: #9aeaf7;
  --color-baltic-300: #77d6e5;
  --color-baltic-400: #45b9ca;
  --color-baltic-500: #009eb0;
  --color-baltic-600: #007f8e;
  --color-baltic-700: #006571;
  --color-baltic-800: #004f58;
  --color-baltic-900: #003c44;
  --color-baltic-950: #00252b;
  --color-fading-night: #0072d8;
  --color-fading-night-50: #eff6ff;
  --color-fading-night-100: #e1eeff;
  --color-fading-night-200: #c2ddff;
  --color-fading-night-300: #9dc9ff;
  --color-fading-night-400: #63aaff;
  --color-fading-night-500: #2f8df5;
  --color-fading-night-600: #0072d8;
  --color-fading-night-700: #005aad;
  --color-fading-night-800: #004689;
  --color-fading-night-900: #00356b;
  --color-fading-night-950: #002146;
  --color-sour-lime: #b5c500;
  --color-sour-lime-50: #edfaa9;
  --color-sour-lime-100: #e2ef93;
  --color-sour-lime-200: #cddb6a;
  --color-sour-lime-300: #b5c500;
  --color-sour-lime-400: #98a500;
  --color-sour-lime-500: #7e8a00;
  --color-sour-lime-600: #666f00;
  --color-sour-lime-700: #515900;
  --color-sour-lime-800: #404600;
  --color-sour-lime-900: #323700;
  --color-sour-lime-950: #1e2200;
}