Cucumber to Magentleman color palette

005F0DCucumber F9E9FFStrawberry Bonbon 75C465Mantis CD48E9Bubblegum Baby Girl A830C3Magentleman

About this palette

Cucumber to Magentleman is a 5-color vibrant, cool, neon palette: #005F0D (Cucumber), #F9E9FF (Strawberry Bonbon), #75C465 (Mantis), #CD48E9 (Bubblegum Baby Girl), #A830C3 (Magentleman). It mixes green, white, purple tones and feels cool overall. The strongest text pairing is #005F0D on #F9E9FF with a contrast ratio of 6.86:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cucumber	rgb(0, 95, 13)	hsl(128, 100%, 19%)
Strawberry Bonbon	rgb(249, 233, 255)	hsl(284, 100%, 96%)
Mantis	rgb(117, 196, 101)	hsl(110, 45%, 58%)
Bubblegum Baby Girl	rgb(205, 72, 233)	hsl(290, 79%, 60%)
Magentleman	rgb(168, 48, 195)	hsl(289, 60%, 48%)

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.

Aa6.86:1 Good#005F0D on #F9E9FF
Aa6.86:1 Good#F9E9FF on #005F0D
Aa4.68:1 Good#F9E9FF on #A830C3
Aa4.68:1 Good#A830C3 on #F9E9FF
Aa3.72:1 Poor#005F0D on #75C465
Aa3.72:1 Poor#75C465 on #005F0D
Aa3.18:1 Poor#F9E9FF on #CD48E9
Aa3.18:1 Poor#CD48E9 on #F9E9FF

Color blindness preview

CSS variables

/* Cucumber to Magentleman — https://swatchly.xyz/palette/005f0d-f9e9ff-75c465-cd48e9-a830c3 */
:root {
  --cucumber: #005f0d;
  --strawberry-bonbon: #f9e9ff;
  --mantis: #75c465;
  --bubblegum-baby-girl: #cd48e9;
  --magentleman: #a830c3;
}

Tailwind CSS v4

/* Cucumber to Magentleman — https://swatchly.xyz/palette/005f0d-f9e9ff-75c465-cd48e9-a830c3 */
@theme {
  --color-cucumber: #005f0d;
  --color-cucumber-50: #e1ffdf;
  --color-cucumber-100: #cafbc7;
  --color-cucumber-200: #ade8ab;
  --color-cucumber-300: #8ed28c;
  --color-cucumber-400: #66b265;
  --color-cucumber-500: #469547;
  --color-cucumber-600: #2a782d;
  --color-cucumber-700: #005f0d;
  --color-cucumber-800: #074a0d;
  --color-cucumber-900: #013906;
  --color-cucumber-950: #002402;
  --color-strawberry-bonbon: #f9e9ff;
  --color-strawberry-bonbon-50: #fdf6ff;
  --color-strawberry-bonbon-100: #f9e9ff;
  --color-strawberry-bonbon-200: #e2d6e6;
  --color-strawberry-bonbon-300: #cbbed0;
  --color-strawberry-bonbon-400: #ac9eb1;
  --color-strawberry-bonbon-500: #908195;
  --color-strawberry-bonbon-600: #746779;
  --color-strawberry-bonbon-700: #5c5061;
  --color-strawberry-bonbon-800: #493e4d;
  --color-strawberry-bonbon-900: #382f3b;
  --color-strawberry-bonbon-950: #231c25;
  --color-mantis: #75c465;
  --color-mantis-50: #eeffeb;
  --color-mantis-100: #d6ffce;
  --color-mantis-200: #baf1af;
  --color-mantis-300: #9fdf92;
  --color-mantis-400: #75c465;
  --color-mantis-500: #58a548;
  --color-mantis-600: #3a8729;
  --color-mantis-700: #226c0f;
  --color-mantis-800: #135500;
  --color-mantis-900: #0c4000;
  --color-mantis-950: #052700;
  --color-bubblegum-baby-girl: #cd48e9;
  --color-bubblegum-baby-girl-50: #fdf3ff;
  --color-bubblegum-baby-girl-100: #fbe6ff;
  --color-bubblegum-baby-girl-200: #f6cbff;
  --color-bubblegum-baby-girl-300: #efa9ff;
  --color-bubblegum-baby-girl-400: #e56fff;
  --color-bubblegum-baby-girl-500: #cd48e9;
  --color-bubblegum-baby-girl-600: #ad21c8;
  --color-bubblegum-baby-girl-700: #8d00a6;
  --color-bubblegum-baby-girl-800: #6f0083;
  --color-bubblegum-baby-girl-900: #560066;
  --color-bubblegum-baby-girl-950: #370042;
  --color-magentleman: #a830c3;
  --color-magentleman-50: #fcf1ff;
  --color-magentleman-100: #fae4ff;
  --color-magentleman-200: #f4c8ff;
  --color-magentleman-300: #eda5ff;
  --color-magentleman-400: #de71f9;
  --color-magentleman-500: #c450e0;
  --color-magentleman-600: #a830c3;
  --color-magentleman-700: #8a13a3;
  --color-magentleman-800: #6f0084;
  --color-magentleman-900: #560067;
  --color-magentleman-950: #380044;
}