Anger to Honey and Thyme color palette

DF005BAnger 00CE9AMagical Malachite 008715Lush Garden 9C73FFPeriwinkle A7B3FFWondrous Wisteria A2AD00Honey and Thyme

Open in generator Export PNG, PDF, ASE…

About this palette

Anger to Honey and Thyme is a 6-color vibrant, cool, neon palette: #DF005B (Anger), #00CE9A (Magical Malachite), #008715 (Lush Garden), #9C73FF (Periwinkle), #A7B3FF (Wondrous Wisteria), #A2AD00 (Honey and Thyme). It mixes red, turquoise, green, purple tones and feels cool overall. The strongest text pairing is #DF005B on #A7B3FF with a contrast ratio of 2.46:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Anger	rgb(223, 0, 91)	hsl(336, 100%, 44%)
Magical Malachite	rgb(0, 206, 154)	hsl(165, 100%, 40%)
Lush Garden	rgb(0, 135, 21)	hsl(129, 100%, 26%)
Periwinkle	rgb(156, 115, 255)	hsl(258, 100%, 73%)
Wondrous Wisteria	rgb(167, 179, 255)	hsl(232, 100%, 83%)
Honey and Thyme	rgb(162, 173, 0)	hsl(64, 100%, 34%)

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

/* Anger to Honey and Thyme — https://swatchly.xyz/palette/df005b-00ce9a-008715-9c73ff-a7b3ff-a2ad00 */
:root {
  --anger: #df005b;
  --magical-malachite: #00ce9a;
  --lush-garden: #008715;
  --periwinkle: #9c73ff;
  --wondrous-wisteria: #a7b3ff;
  --honey-and-thyme: #a2ad00;
}

Tailwind CSS v4

/* Anger to Honey and Thyme — https://swatchly.xyz/palette/df005b-00ce9a-008715-9c73ff-a7b3ff-a2ad00 */
@theme {
  --color-anger: #df005b;
  --color-anger-50: #ffeef0;
  --color-anger-100: #ffdde1;
  --color-anger-200: #ffbcc5;
  --color-anger-300: #ff93a5;
  --color-anger-400: #ff4678;
  --color-anger-500: #df005b;
  --color-anger-600: #b50048;
  --color-anger-700: #920039;
  --color-anger-800: #75002c;
  --color-anger-900: #5d0021;
  --color-anger-950: #3e0014;
  --color-magical-malachite: #00ce9a;
  --color-magical-malachite-50: #eefff7;
  --color-magical-malachite-100: #d1ffeb;
  --color-magical-malachite-200: #99f8d2;
  --color-magical-malachite-300: #73e7bc;
  --color-magical-malachite-400: #00ce9a;
  --color-magical-malachite-500: #00ab7f;
  --color-magical-malachite-600: #008966;
  --color-magical-malachite-700: #006c4f;
  --color-magical-malachite-800: #00543d;
  --color-magical-malachite-900: #003f2d;
  --color-magical-malachite-950: #00271a;
  --color-lush-garden: #008715;
  --color-lush-garden-50: #e1ffdf;
  --color-lush-garden-100: #c1ffbe;
  --color-lush-garden-200: #a3efa1;
  --color-lush-garden-300: #83db81;
  --color-lush-garden-400: #58be59;
  --color-lush-garden-500: #33a337;
  --color-lush-garden-600: #008715;
  --color-lush-garden-700: #006b0e;
  --color-lush-garden-800: #005409;
  --color-lush-garden-900: #004105;
  --color-lush-garden-950: #002902;
  --color-periwinkle: #9c73ff;
  --color-periwinkle-50: #f8f6ff;
  --color-periwinkle-100: #f0edff;
  --color-periwinkle-200: #dfd8ff;
  --color-periwinkle-300: #ccbfff;
  --color-periwinkle-400: #b299ff;
  --color-periwinkle-500: #9c73ff;
  --color-periwinkle-600: #8054dd;
  --color-periwinkle-700: #673bbb;
  --color-periwinkle-800: #51279a;
  --color-periwinkle-900: #3e197b;
  --color-periwinkle-950: #270a52;
  --color-wondrous-wisteria: #a7b3ff;
  --color-wondrous-wisteria-50: #edf0ff;
  --color-wondrous-wisteria-100: #dfe4ff;
  --color-wondrous-wisteria-200: #c5ceff;
  --color-wondrous-wisteria-300: #a7b3ff;
  --color-wondrous-wisteria-400: #8a95dd;
  --color-wondrous-wisteria-500: #717bc2;
  --color-wondrous-wisteria-600: #5961a5;
  --color-wondrous-wisteria-700: #454c89;
  --color-wondrous-wisteria-800: #363b71;
  --color-wondrous-wisteria-900: #292d5b;
  --color-wondrous-wisteria-950: #181b3c;
  --color-honey-and-thyme: #a2ad00;
  --color-honey-and-thyme-50: #f4fdb9;
  --color-honey-and-thyme-100: #eaf4a7;
  --color-honey-and-thyme-200: #d7e284;
  --color-honey-and-thyme-300: #c1cc5c;
  --color-honey-and-thyme-400: #a2ad00;
  --color-honey-and-thyme-500: #879000;
  --color-honey-and-thyme-600: #6c7400;
  --color-honey-and-thyme-700: #555c00;
  --color-honey-and-thyme-800: #424700;
  --color-honey-and-thyme-900: #333700;
  --color-honey-and-thyme-950: #1f2200;
}