Hippy to Velvet Color Palette

About this palette

Hippy to Velvet is a 5-color cool palette: #E2EA7E (Hippy), #9DA5FF (Widowmaker), #8679CD (Matt Purple), #127F4F (Bold Irish), #6B0E49 (Velvet). It mixes green, purple, red tones and feels cool overall. The strongest text pairing is #E2EA7E on #6B0E49 with a contrast ratio of 9.14:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hippy	rgb(226, 234, 126)	hsl(64, 72%, 71%)
Widowmaker	rgb(157, 165, 255)	hsl(235, 100%, 81%)
Matt Purple	rgb(134, 121, 205)	hsl(249, 46%, 64%)
Bold Irish	rgb(18, 127, 79)	hsl(154, 75%, 28%)
Velvet	rgb(107, 14, 73)	hsl(322, 77%, 24%)

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.

Aa9.14:1 Very good#E2EA7E on #6B0E49
Aa9.14:1 Very good#6B0E49 on #E2EA7E
Aa5.19:1 Good#9DA5FF on #6B0E49
Aa5.19:1 Good#6B0E49 on #9DA5FF
Aa3.91:1 Poor#E2EA7E on #127F4F
Aa3.91:1 Poor#127F4F on #E2EA7E
Aa3.16:1 Poor#8679CD on #6B0E49
Aa3.16:1 Poor#6B0E49 on #8679CD

Color blindness preview

CSS variables

/* Hippy to Velvet — https://swatchly.xyz/palette/e2ea7e-9da5ff-8679cd-127f4f-6b0e49 */
:root {
  --hippy: #e2ea7e;
  --widowmaker: #9da5ff;
  --matt-purple: #8679cd;
  --bold-irish: #127f4f;
  --velvet: #6b0e49;
}

Tailwind CSS v4

/* Hippy to Velvet — https://swatchly.xyz/palette/e2ea7e-9da5ff-8679cd-127f4f-6b0e49 */
@theme {
  --color-hippy: #e2ea7e;
  --color-hippy-50: #fbffdf;
  --color-hippy-100: #f3f9bf;
  --color-hippy-200: #e2ea7e;
  --color-hippy-300: #c9d07b;
  --color-hippy-400: #a9af4a;
  --color-hippy-500: #8c921d;
  --color-hippy-600: #707500;
  --color-hippy-700: #585c00;
  --color-hippy-800: #434600;
  --color-hippy-900: #343600;
  --color-hippy-950: #202200;
  --color-widowmaker: #9da5ff;
  --color-widowmaker-50: #f8f9ff;
  --color-widowmaker-100: #eff1ff;
  --color-widowmaker-200: #d9deff;
  --color-widowmaker-300: #c0c7ff;
  --color-widowmaker-400: #9da5ff;
  --color-widowmaker-500: #8087dd;
  --color-widowmaker-600: #6569bd;
  --color-widowmaker-700: #4e519e;
  --color-widowmaker-800: #3b3c80;
  --color-widowmaker-900: #2b2c65;
  --color-widowmaker-950: #191941;
  --color-matt-purple: #8679cd;
  --color-matt-purple-50: #f5f4ff;
  --color-matt-purple-100: #eae9ff;
  --color-matt-purple-200: #d6d2ff;
  --color-matt-purple-300: #c0b7ff;
  --color-matt-purple-400: #a195e8;
  --color-matt-purple-500: #8679cd;
  --color-matt-purple-600: #6c5eae;
  --color-matt-purple-700: #564891;
  --color-matt-purple-800: #433676;
  --color-matt-purple-900: #33285e;
  --color-matt-purple-950: #1f183e;
  --color-bold-irish: #127f4f;
  --color-bold-irish-50: #ddffe9;
  --color-bold-irish-100: #c3fbd8;
  --color-bold-irish-200: #a6e9c1;
  --color-bold-irish-300: #86d5a7;
  --color-bold-irish-400: #5cb685;
  --color-bold-irish-500: #399b69;
  --color-bold-irish-600: #127f4f;
  --color-bold-irish-700: #00663d;
  --color-bold-irish-800: #00502e;
  --color-bold-irish-900: #003e23;
  --color-bold-irish-950: #002714;
  --color-velvet: #6b0e49;
  --color-velvet-50: #fff1f7;
  --color-velvet-100: #ffe2ef;
  --color-velvet-200: #ffc3e1;
  --color-velvet-300: #f8a0cd;
  --color-velvet-400: #da7bae;
  --color-velvet-500: #bd5d91;
  --color-velvet-600: #9d4275;
  --color-velvet-700: #7f2d5c;
  --color-velvet-800: #6b0e49;
  --color-velvet-900: #4f1437;
  --color-velvet-950: #330922;
}