Grotesque Green to Siren Color Palette

About this palette

Grotesque Green to Siren is a 5-color cool palette: #7AEF9E (Grotesque Green), #BFA3F0 (Diva), #7F68B6 (Lavish Spending), #146218 (Woodland Wonder), #622635 (Siren). It mixes green, purple, red tones and feels cool overall. The strongest text pairing is #7AEF9E on #622635 with a contrast ratio of 7.94:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grotesque Green	rgb(122, 239, 158)	hsl(138, 79%, 71%)
Diva	rgb(191, 163, 240)	hsl(262, 72%, 79%)
Lavish Spending	rgb(127, 104, 182)	hsl(258, 35%, 56%)
Woodland Wonder	rgb(20, 98, 24)	hsl(123, 66%, 23%)
Siren	rgb(98, 38, 53)	hsl(345, 44%, 27%)

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.94:1 Very good#7AEF9E on #622635
Aa7.94:1 Very good#622635 on #7AEF9E
Aa5.26:1 Good#7AEF9E on #146218
Aa5.26:1 Good#146218 on #7AEF9E
Aa5.26:1 Good#BFA3F0 on #622635
Aa5.26:1 Good#622635 on #BFA3F0
Aa3.48:1 Poor#BFA3F0 on #146218
Aa3.48:1 Poor#146218 on #BFA3F0

Color blindness preview

CSS variables

/* Grotesque Green to Siren — https://swatchly.xyz/palette/7aef9e-bfa3f0-7f68b6-146218-622635 */
:root {
  --grotesque-green: #7aef9e;
  --diva: #bfa3f0;
  --lavish-spending: #7f68b6;
  --woodland-wonder: #146218;
  --siren: #622635;
}

Tailwind CSS v4

/* Grotesque Green to Siren — https://swatchly.xyz/palette/7aef9e-bfa3f0-7f68b6-146218-622635 */
@theme {
  --color-grotesque-green: #7aef9e;
  --color-grotesque-green-50: #d1ffdc;
  --color-grotesque-green-100: #b4fbc5;
  --color-grotesque-green-200: #7aef9e;
  --color-grotesque-green-300: #73d590;
  --color-grotesque-green-400: #45b86d;
  --color-grotesque-green-500: #159d51;
  --color-grotesque-green-600: #00803f;
  --color-grotesque-green-700: #006631;
  --color-grotesque-green-800: #005125;
  --color-grotesque-green-900: #003e1b;
  --color-grotesque-green-950: #00270f;
  --color-diva: #bfa3f0;
  --color-diva-50: #f1eaff;
  --color-diva-100: #e7dbff;
  --color-diva-200: #d5bffe;
  --color-diva-300: #bfa3f0;
  --color-diva-400: #a287d0;
  --color-diva-500: #896db6;
  --color-diva-600: #70569a;
  --color-diva-700: #5b4280;
  --color-diva-800: #493369;
  --color-diva-900: #3a2756;
  --color-diva-950: #241738;
  --color-lavish-spending: #7f68b6;
  --color-lavish-spending-50: #f6f3ff;
  --color-lavish-spending-100: #efeaff;
  --color-lavish-spending-200: #dfd5ff;
  --color-lavish-spending-300: #cdbcff;
  --color-lavish-spending-400: #b19ce9;
  --color-lavish-spending-500: #9881d1;
  --color-lavish-spending-600: #7f68b6;
  --color-lavish-spending-700: #665098;
  --color-lavish-spending-800: #503c7b;
  --color-lavish-spending-900: #3d2c62;
  --color-lavish-spending-950: #261941;
  --color-woodland-wonder: #146218;
  --color-woodland-wonder-50: #e1ffdf;
  --color-woodland-wonder-100: #ccfac9;
  --color-woodland-wonder-200: #b1e8ae;
  --color-woodland-wonder-300: #93d290;
  --color-woodland-wonder-400: #6db36b;
  --color-woodland-wonder-500: #4e974d;
  --color-woodland-wonder-600: #337a33;
  --color-woodland-wonder-700: #146218;
  --color-woodland-wonder-800: #114c13;
  --color-woodland-wonder-900: #073b0a;
  --color-woodland-wonder-950: #022504;
  --color-siren: #622635;
  --color-siren-50: #fff1f3;
  --color-siren-100: #ffe3e7;
  --color-siren-200: #ffc6d0;
  --color-siren-300: #ebacb7;
  --color-siren-400: #ce8996;
  --color-siren-500: #b06c7a;
  --color-siren-600: #92525f;
  --color-siren-700: #753d49;
  --color-siren-800: #622635;
  --color-siren-900: #482029;
  --color-siren-950: #2e1218;
}