Start generating

Kryptonite Green to Leafy Greens color palette

2F9E47Kryptonite GreenD2C2FFInnocent Snowdrop472986Galactic CivilizationB7307AVery Berry7BB964Leafy Greens
Open in generator Export PNG, PDF, ASE…

About this palette

Kryptonite Green to Leafy Greens is a 5-color vibrant, cool palette: #2F9E47 (Kryptonite Green), #D2C2FF (Innocent Snowdrop), #472986 (Galactic Civilization), #B7307A (Very Berry), #7BB964 (Leafy Greens). It mixes green, purple, red tones and feels cool overall. The strongest text pairing is #D2C2FF on #472986 with a contrast ratio of 6.69:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Kryptonite Greenrgb(47, 158, 71)hsl(133, 54%, 40%)
Innocent Snowdroprgb(210, 194, 255)hsl(256, 100%, 88%)
Galactic Civilizationrgb(71, 41, 134)hsl(259, 53%, 34%)
Very Berryrgb(183, 48, 122)hsl(327, 58%, 45%)
Leafy Greensrgb(123, 185, 100)hsl(104, 38%, 56%)

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.69:1 Good#D2C2FF on #472986
  • Aa6.69:1 Good#472986 on #D2C2FF
  • Aa4.65:1 Good#472986 on #7BB964
  • Aa4.65:1 Good#7BB964 on #472986
  • Aa3.47:1 Poor#D2C2FF on #B7307A
  • Aa3.47:1 Poor#B7307A on #D2C2FF
  • Aa3.16:1 Poor#2F9E47 on #472986
  • Aa3.16:1 Poor#472986 on #2F9E47

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Kryptonite Green to Leafy Greens — https://swatchly.xyz/palette/2f9e47-d2c2ff-472986-b7307a-7bb964 */
:root {
  --kryptonite-green: #2f9e47;
  --innocent-snowdrop: #d2c2ff;
  --galactic-civilization: #472986;
  --very-berry: #b7307a;
  --leafy-greens: #7bb964;
}

Tailwind CSS v4

/* Kryptonite Green to Leafy Greens — https://swatchly.xyz/palette/2f9e47-d2c2ff-472986-b7307a-7bb964 */
@theme {
  --color-kryptonite-green: #2f9e47;
  --color-kryptonite-green-50: #dfffe2;
  --color-kryptonite-green-100: #bffec5;
  --color-kryptonite-green-200: #a1eda9;
  --color-kryptonite-green-300: #81d88c;
  --color-kryptonite-green-400: #55ba65;
  --color-kryptonite-green-500: #2f9e47;
  --color-kryptonite-green-600: #00822d;
  --color-kryptonite-green-700: #006722;
  --color-kryptonite-green-800: #005119;
  --color-kryptonite-green-900: #003f11;
  --color-kryptonite-green-950: #002808;
  --color-innocent-snowdrop: #d2c2ff;
  --color-innocent-snowdrop-50: #efebff;
  --color-innocent-snowdrop-100: #e5dcff;
  --color-innocent-snowdrop-200: #d2c2ff;
  --color-innocent-snowdrop-300: #bdafe4;
  --color-innocent-snowdrop-400: #a090c9;
  --color-innocent-snowdrop-500: #8677af;
  --color-innocent-snowdrop-600: #6d5e93;
  --color-innocent-snowdrop-700: #584a7a;
  --color-innocent-snowdrop-800: #463a64;
  --color-innocent-snowdrop-900: #362b4f;
  --color-innocent-snowdrop-950: #221a34;
  --color-galactic-civilization: #472986;
  --color-galactic-civilization-50: #f5f3ff;
  --color-galactic-civilization-100: #ebe8ff;
  --color-galactic-civilization-200: #d8d0ff;
  --color-galactic-civilization-300: #c3b4ff;
  --color-galactic-civilization-400: #a58ff1;
  --color-galactic-civilization-500: #8a72d5;
  --color-galactic-civilization-600: #6f57b5;
  --color-galactic-civilization-700: #594197;
  --color-galactic-civilization-800: #472986;
  --color-galactic-civilization-900: #352362;
  --color-galactic-civilization-950: #211341;
  --color-very-berry: #b7307a;
  --color-very-berry-50: #fff1f6;
  --color-very-berry-100: #ffe3ee;
  --color-very-berry-200: #ffc5de;
  --color-very-berry-300: #ffa0cb;
  --color-very-berry-400: #f26eaf;
  --color-very-berry-500: #d64e95;
  --color-very-berry-600: #b7307a;
  --color-very-berry-700: #971962;
  --color-very-berry-800: #7b054d;
  --color-very-berry-900: #61003b;
  --color-very-berry-950: #400025;
  --color-leafy-greens: #7bb964;
  --color-leafy-greens-50: #e7ffdf;
  --color-leafy-greens-100: #d4fbc6;
  --color-leafy-greens-200: #bceaac;
  --color-leafy-greens-300: #a1d68e;
  --color-leafy-greens-400: #7bb964;
  --color-leafy-greens-500: #5f9c48;
  --color-leafy-greens-600: #457f2c;
  --color-leafy-greens-700: #306617;
  --color-leafy-greens-800: #215007;
  --color-leafy-greens-900: #153e00;
  --color-leafy-greens-950: #0a2700;
}

Similar palettes