Perrywinkle to Sky Color Palette

About this palette

Perrywinkle to Sky is a 5-color cool palette: #829AF4 (Perrywinkle), #6B1B0F (Bloodlust), #6B600D (Himalaya), #0099B2 (Munsell Blue), #7CD4F4 (Sky). It mixes blue, brown, turquoise tones and feels cool overall. The strongest text pairing is #6B1B0F on #7CD4F4 with a contrast ratio of 7.03:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Perrywinkle	rgb(130, 154, 244)	hsl(227, 84%, 73%)
Bloodlust	rgb(107, 27, 15)	hsl(8, 75%, 24%)
Himalaya	rgb(107, 96, 13)	hsl(53, 78%, 24%)
Munsell Blue	rgb(0, 153, 178)	hsl(188, 100%, 35%)
Sky	rgb(124, 212, 244)	hsl(196, 85%, 72%)

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.

Aa7.03:1 Very good#6B1B0F on #7CD4F4
Aa7.03:1 Very good#7CD4F4 on #6B1B0F
Aa4.40:1 Poor#829AF4 on #6B1B0F
Aa4.40:1 Poor#6B1B0F on #829AF4
Aa3.81:1 Poor#6B600D on #7CD4F4
Aa3.81:1 Poor#7CD4F4 on #6B600D
Aa3.47:1 Poor#6B1B0F on #0099B2
Aa3.47:1 Poor#0099B2 on #6B1B0F

Color blindness preview

CSS variables

/* Perrywinkle to Sky — https://swatchly.xyz/palette/829af4-6b1b0f-6b600d-0099b2-7cd4f4 */
:root {
  --perrywinkle: #829af4;
  --bloodlust: #6b1b0f;
  --himalaya: #6b600d;
  --munsell-blue: #0099b2;
  --sky: #7cd4f4;
}

Tailwind CSS v4

/* Perrywinkle to Sky — https://swatchly.xyz/palette/829af4-6b1b0f-6b600d-0099b2-7cd4f4 */
@theme {
  --color-perrywinkle: #829af4;
  --color-perrywinkle-50: #f1f4ff;
  --color-perrywinkle-100: #e3eaff;
  --color-perrywinkle-200: #c8d5ff;
  --color-perrywinkle-300: #a9bdff;
  --color-perrywinkle-400: #829af4;
  --color-perrywinkle-500: #687ed6;
  --color-perrywinkle-600: #5064b7;
  --color-perrywinkle-700: #3d4d99;
  --color-perrywinkle-800: #2d3b7d;
  --color-perrywinkle-900: #212c65;
  --color-perrywinkle-950: #131b43;
  --color-bloodlust: #6b1b0f;
  --color-bloodlust-50: #fff2ef;
  --color-bloodlust-100: #ffe4df;
  --color-bloodlust-200: #ffc9be;
  --color-bloodlust-300: #f9a898;
  --color-bloodlust-400: #db8473;
  --color-bloodlust-500: #bd6656;
  --color-bloodlust-600: #9d4b3d;
  --color-bloodlust-700: #7e3629;
  --color-bloodlust-800: #6b1b0f;
  --color-bloodlust-900: #4e1a12;
  --color-bloodlust-950: #320e08;
  --color-himalaya: #6b600d;
  --color-himalaya-50: #fcf7ce;
  --color-himalaya-100: #f3edc0;
  --color-himalaya-200: #e3dba6;
  --color-himalaya-300: #d0c789;
  --color-himalaya-400: #b3a964;
  --color-himalaya-500: #9a8f45;
  --color-himalaya-600: #80762b;
  --color-himalaya-700: #6b600d;
  --color-himalaya-800: #544b01;
  --color-himalaya-900: #413900;
  --color-himalaya-950: #292400;
  --color-munsell-blue: #0099b2;
  --color-munsell-blue-50: #e6faff;
  --color-munsell-blue-100: #cbf5ff;
  --color-munsell-blue-200: #99e7fa;
  --color-munsell-blue-300: #75d3e8;
  --color-munsell-blue-400: #43b4cd;
  --color-munsell-blue-500: #0099b2;
  --color-munsell-blue-600: #007b90;
  --color-munsell-blue-700: #006272;
  --color-munsell-blue-800: #004c5a;
  --color-munsell-blue-900: #003b46;
  --color-munsell-blue-950: #00252c;
  --color-sky: #7cd4f4;
  --color-sky-50: #eefaff;
  --color-sky-100: #d9f4ff;
  --color-sky-200: #aae7fe;
  --color-sky-300: #7cd4f4;
  --color-sky-400: #60b2d0;
  --color-sky-500: #3b96b4;
  --color-sky-600: #177996;
  --color-sky-700: #00607a;
  --color-sky-800: #004b5f;
  --color-sky-900: #003949;
  --color-sky-950: #00242f;
}