Snarky Mint to Midnight Velvet Color Palette

About this palette

Snarky Mint to Midnight Velvet is a 4-color vibrant, cool palette: #A2E77D (Snarky Mint), #DA6DF9 (Venus Slipper Orchid), #007722 (Forestial), #371F41 (Midnight Velvet). It mixes green, purple tones and feels cool overall. The strongest text pairing is #A2E77D on #371F41 with a contrast ratio of 9.94:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Snarky Mint	rgb(162, 231, 125)	hsl(99, 69%, 70%)
Venus Slipper Orchid	rgb(218, 109, 249)	hsl(287, 92%, 70%)
Forestial	rgb(0, 119, 34)	hsl(137, 100%, 23%)
Midnight Velvet	rgb(55, 31, 65)	hsl(282, 35%, 19%)

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.94:1 Very good#A2E77D on #371F41
Aa9.94:1 Very good#371F41 on #A2E77D
Aa5.25:1 Good#DA6DF9 on #371F41
Aa5.25:1 Good#371F41 on #DA6DF9
Aa3.89:1 Poor#A2E77D on #007722
Aa3.89:1 Poor#007722 on #A2E77D

Color blindness preview

CSS variables

/* Snarky Mint to Midnight Velvet — https://swatchly.xyz/palette/a2e77d-da6df9-007722-371f41 */
:root {
  --snarky-mint: #a2e77d;
  --venus-slipper-orchid: #da6df9;
  --forestial: #007722;
  --midnight-velvet: #371f41;
}

Tailwind CSS v4

/* Snarky Mint to Midnight Velvet — https://swatchly.xyz/palette/a2e77d-da6df9-007722-371f41 */
@theme {
  --color-snarky-mint: #a2e77d;
  --color-snarky-mint-50: #d6ffc2;
  --color-snarky-mint-100: #c7f5b1;
  --color-snarky-mint-200: #a2e77d;
  --color-snarky-mint-300: #93cf74;
  --color-snarky-mint-400: #71b14c;
  --color-snarky-mint-500: #56962b;
  --color-snarky-mint-600: #3d7c06;
  --color-snarky-mint-700: #2f6300;
  --color-snarky-mint-800: #244f00;
  --color-snarky-mint-900: #1a3d00;
  --color-snarky-mint-950: #0e2600;
  --color-venus-slipper-orchid: #da6df9;
  --color-venus-slipper-orchid-50: #fcf2ff;
  --color-venus-slipper-orchid-100: #f9e4ff;
  --color-venus-slipper-orchid-200: #f2c7ff;
  --color-venus-slipper-orchid-300: #eaa3ff;
  --color-venus-slipper-orchid-400: #da6df9;
  --color-venus-slipper-orchid-500: #bc4fda;
  --color-venus-slipper-orchid-600: #9e30ba;
  --color-venus-slipper-orchid-700: #82179c;
  --color-venus-slipper-orchid-800: #68017f;
  --color-venus-slipper-orchid-900: #520064;
  --color-venus-slipper-orchid-950: #350041;
  --color-forestial: #007722;
  --color-forestial-50: #e0ffe1;
  --color-forestial-100: #c0fbc3;
  --color-forestial-200: #a2e8a5;
  --color-forestial-300: #80d286;
  --color-forestial-400: #55b25f;
  --color-forestial-500: #329440;
  --color-forestial-600: #007722;
  --color-forestial-700: #005f19;
  --color-forestial-800: #004a12;
  --color-forestial-900: #003a0c;
  --color-forestial-950: #002505;
  --color-midnight-velvet: #371f41;
  --color-midnight-velvet-50: #fbf1ff;
  --color-midnight-velvet-100: #f6e3ff;
  --color-midnight-velvet-200: #e4ceee;
  --color-midnight-velvet-300: #cfb6db;
  --color-midnight-velvet-400: #af94bc;
  --color-midnight-velvet-500: #92779f;
  --color-midnight-velvet-600: #765c81;
  --color-midnight-velvet-700: #5c4566;
  --color-midnight-velvet-800: #46324e;
  --color-midnight-velvet-900: #371f41;
  --color-midnight-velvet-950: #1f1423;
}