Start generating

Sage Sensation to Evergreen color palette

A7E095Sage Sensation00C7B9Pristine Oceanic589665Leafy007587Waterworld00584AEvergreen
Open in generator Export PNG, PDF, ASE…

About this palette

Sage Sensation to Evergreen is a 5-color cool, gradient palette: #A7E095 (Sage Sensation), #00C7B9 (Pristine Oceanic), #589665 (Leafy), #007587 (Waterworld), #00584A (Evergreen). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #A7E095 on #00584A with a contrast ratio of 5.51:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sage Sensationrgb(167, 224, 149)hsl(106, 55%, 73%)
Pristine Oceanicrgb(0, 199, 185)hsl(176, 100%, 39%)
Leafyrgb(88, 150, 101)hsl(133, 26%, 47%)
Waterworldrgb(0, 117, 135)hsl(188, 100%, 26%)
Evergreenrgb(0, 88, 74)hsl(170, 100%, 17%)

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.

  • Aa5.51:1 Good#A7E095 on #00584A
  • Aa5.51:1 Good#00584A on #A7E095
  • Aa3.96:1 Poor#00C7B9 on #00584A
  • Aa3.96:1 Poor#00584A on #00C7B9
  • Aa3.53:1 Poor#A7E095 on #007587
  • Aa3.53:1 Poor#007587 on #A7E095

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sage Sensation to Evergreen — https://swatchly.xyz/palette/a7e095-00c7b9-589665-007587-00584a */
:root {
  --sage-sensation: #a7e095;
  --pristine-oceanic: #00c7b9;
  --leafy: #589665;
  --waterworld: #007587;
  --evergreen: #00584a;
}

Tailwind CSS v4

/* Sage Sensation to Evergreen — https://swatchly.xyz/palette/a7e095-00c7b9-589665-007587-00584a */
@theme {
  --color-sage-sensation: #a7e095;
  --color-sage-sensation-50: #d8facd;
  --color-sage-sensation-100: #c9f0bd;
  --color-sage-sensation-200: #a7e095;
  --color-sage-sensation-300: #97c988;
  --color-sage-sensation-400: #77ac66;
  --color-sage-sensation-500: #5c924b;
  --color-sage-sensation-600: #457833;
  --color-sage-sensation-700: #326122;
  --color-sage-sensation-800: #244e15;
  --color-sage-sensation-900: #193d0b;
  --color-sage-sensation-950: #0d2604;
  --color-pristine-oceanic: #00c7b9;
  --color-pristine-oceanic-50: #e8fffc;
  --color-pristine-oceanic-100: #c5fff7;
  --color-pristine-oceanic-200: #96f4e8;
  --color-pristine-oceanic-300: #6fe1d5;
  --color-pristine-oceanic-400: #00c7b9;
  --color-pristine-oceanic-500: #00a59a;
  --color-pristine-oceanic-600: #00857b;
  --color-pristine-oceanic-700: #006961;
  --color-pristine-oceanic-800: #00514b;
  --color-pristine-oceanic-900: #003e39;
  --color-pristine-oceanic-950: #002622;
  --color-leafy: #589665;
  --color-leafy-50: #dfffe4;
  --color-leafy-100: #cff7d6;
  --color-leafy-200: #b6e5be;
  --color-leafy-300: #9ad0a3;
  --color-leafy-400: #76b281;
  --color-leafy-500: #589665;
  --color-leafy-600: #3e7b4c;
  --color-leafy-700: #2a6338;
  --color-leafy-800: #1c4e29;
  --color-leafy-900: #113d1d;
  --color-leafy-950: #072610;
  --color-waterworld: #007587;
  --color-waterworld-50: #e4faff;
  --color-waterworld-100: #c4f4ff;
  --color-waterworld-200: #a2e2f1;
  --color-waterworld-300: #81ccdd;
  --color-waterworld-400: #56adbf;
  --color-waterworld-500: #3291a3;
  --color-waterworld-600: #007587;
  --color-waterworld-700: #005d6c;
  --color-waterworld-800: #004955;
  --color-waterworld-900: #003842;
  --color-waterworld-950: #00232a;
  --color-evergreen: #00584a;
  --color-evergreen-50: #d9fff5;
  --color-evergreen-100: #cbf6ea;
  --color-evergreen-200: #b0e4d7;
  --color-evergreen-300: #95d1c2;
  --color-evergreen-400: #71b4a4;
  --color-evergreen-500: #549a8a;
  --color-evergreen-600: #398071;
  --color-evergreen-700: #256a5c;
  --color-evergreen-800: #00584a;
  --color-evergreen-900: #084439;
  --color-evergreen-950: #012c24;
}

Similar palettes