Start generating

Prairie to Grotesque Green color palette

00A06FPrairie00693CBucolicEF94E7Diva MechaB90085Vibrant Velvet710159Velvet74EB9CGrotesque Green
Open in generator Export PNG, PDF, ASE…

About this palette

Prairie to Grotesque Green is a 6-color vibrant, neon palette: #00A06F (Prairie), #00693C (Bucolic), #EF94E7 (Diva Mecha), #B90085 (Vibrant Velvet), #710159 (Velvet), #74EB9C (Grotesque Green). It mixes green, pink, red tones and feels balanced overall. The strongest text pairing is #710159 on #74EB9C with a contrast ratio of 7.62:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Prairiergb(0, 160, 111)hsl(162, 100%, 31%)
Bucolicrgb(0, 105, 60)hsl(154, 100%, 21%)
Diva Mechargb(239, 148, 231)hsl(305, 74%, 76%)
Vibrant Velvetrgb(185, 0, 133)hsl(317, 100%, 36%)
Velvetrgb(113, 1, 89)hsl(313, 98%, 22%)
Grotesque Greenrgb(116, 235, 156)hsl(140, 75%, 69%)

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.62:1 Very good#710159 on #74EB9C
  • Aa7.62:1 Very good#74EB9C on #710159
  • Aa5.44:1 Good#EF94E7 on #710159
  • Aa5.44:1 Good#710159 on #EF94E7
  • Aa4.57:1 Good#00693C on #74EB9C
  • Aa4.57:1 Good#74EB9C on #00693C
  • Aa4.15:1 Poor#B90085 on #74EB9C
  • Aa4.15:1 Poor#74EB9C on #B90085

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Prairie to Grotesque Green — https://swatchly.xyz/palette/00a06f-00693c-ef94e7-b90085-710159-74eb9c */
:root {
  --prairie: #00a06f;
  --bucolic: #00693c;
  --diva-mecha: #ef94e7;
  --vibrant-velvet: #b90085;
  --velvet: #710159;
  --grotesque-green: #74eb9c;
}

Tailwind CSS v4

/* Prairie to Grotesque Green — https://swatchly.xyz/palette/00a06f-00693c-ef94e7-b90085-710159-74eb9c */
@theme {
  --color-prairie: #00a06f;
  --color-prairie-50: #ddffed;
  --color-prairie-100: #b9fedc;
  --color-prairie-200: #99edc5;
  --color-prairie-300: #76d9ac;
  --color-prairie-400: #43bb8b;
  --color-prairie-500: #00a06f;
  --color-prairie-600: #008159;
  --color-prairie-700: #006646;
  --color-prairie-800: #005036;
  --color-prairie-900: #003e28;
  --color-prairie-950: #002718;
  --color-bucolic: #00693c;
  --color-bucolic-50: #ddffe8;
  --color-bucolic-100: #c7fad8;
  --color-bucolic-200: #ace9c2;
  --color-bucolic-300: #8ed4a8;
  --color-bucolic-400: #67b787;
  --color-bucolic-500: #479b6b;
  --color-bucolic-600: #2a8052;
  --color-bucolic-700: #00693c;
  --color-bucolic-800: #00522e;
  --color-bucolic-900: #004022;
  --color-bucolic-950: #002814;
  --color-diva-mecha: #ef94e7;
  --color-diva-mecha-50: #ffeafc;
  --color-diva-mecha-100: #ffd8fa;
  --color-diva-mecha-200: #fdb5f6;
  --color-diva-mecha-300: #ef94e7;
  --color-diva-mecha-400: #cd77c6;
  --color-diva-mecha-500: #b25cac;
  --color-diva-mecha-600: #954390;
  --color-diva-mecha-700: #7b3077;
  --color-diva-mecha-800: #642160;
  --color-diva-mecha-900: #50174d;
  --color-diva-mecha-950: #340b32;
  --color-vibrant-velvet: #b90085;
  --color-vibrant-velvet-50: #fff0f8;
  --color-vibrant-velvet-100: #ffe1f0;
  --color-vibrant-velvet-200: #ffc2e3;
  --color-vibrant-velvet-300: #ff9ad3;
  --color-vibrant-velvet-400: #f75cbd;
  --color-vibrant-velvet-500: #d936a1;
  --color-vibrant-velvet-600: #b90085;
  --color-vibrant-velvet-700: #94006a;
  --color-vibrant-velvet-800: #760053;
  --color-vibrant-velvet-900: #5c0040;
  --color-vibrant-velvet-950: #3c0029;
  --color-velvet: #710159;
  --color-velvet-50: #fff0f9;
  --color-velvet-100: #ffe1f4;
  --color-velvet-200: #ffc2e9;
  --color-velvet-300: #fb9cdc;
  --color-velvet-400: #de77be;
  --color-velvet-500: #c158a2;
  --color-velvet-600: #a23d85;
  --color-velvet-700: #84286c;
  --color-velvet-800: #710159;
  --color-velvet-900: #540f42;
  --color-velvet-950: #37062a;
  --color-grotesque-green: #74eb9c;
  --color-grotesque-green-50: #c7ffd5;
  --color-grotesque-green-100: #adf8c2;
  --color-grotesque-green-200: #74eb9c;
  --color-grotesque-green-300: #6cd28e;
  --color-grotesque-green-400: #3eb66c;
  --color-grotesque-green-500: #079b52;
  --color-grotesque-green-600: #007e41;
  --color-grotesque-green-700: #006533;
  --color-grotesque-green-800: #005127;
  --color-grotesque-green-900: #003e1d;
  --color-grotesque-green-950: #002710;
}

Similar palettes