Vegetation to Wasabi Nori color palette

00D8ADVegetation D257FFFlaming Flamingo 009A6ERainforest 6F6D00Topiary Green 7908A4Fuchsia Nebula 2F3800Wasabi Nori

Open in generator Export PNG, PDF, ASE…

About this palette

Vegetation to Wasabi Nori is a 6-color vibrant, cool palette: #00D8AD (Vegetation), #D257FF (Flaming Flamingo), #009A6E (Rainforest), #6F6D00 (Topiary Green), #7908A4 (Fuchsia Nebula), #2F3800 (Wasabi Nori). It mixes turquoise, purple, green, brown tones and feels cool overall. The strongest text pairing is #00D8AD on #2F3800 with a contrast ratio of 6.77:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vegetation	rgb(0, 216, 173)	hsl(168, 100%, 42%)
Flaming Flamingo	rgb(210, 87, 255)	hsl(284, 100%, 67%)
Rainforest	rgb(0, 154, 110)	hsl(163, 100%, 30%)
Topiary Green	rgb(111, 109, 0)	hsl(59, 100%, 22%)
Fuchsia Nebula	rgb(121, 8, 164)	hsl(283, 91%, 34%)
Wasabi Nori	rgb(47, 56, 0)	hsl(70, 100%, 11%)

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.77:1 Good#00D8AD on #2F3800
Aa6.77:1 Good#2F3800 on #00D8AD
Aa4.79:1 Good#00D8AD on #7908A4
Aa4.79:1 Good#7908A4 on #00D8AD
Aa3.88:1 Poor#D257FF on #2F3800
Aa3.88:1 Poor#2F3800 on #D257FF
Aa3.47:1 Poor#009A6E on #2F3800
Aa3.47:1 Poor#2F3800 on #009A6E

Color blindness preview

CSS variables

/* Vegetation to Wasabi Nori — https://swatchly.xyz/palette/00d8ad-d257ff-009a6e-6f6d00-7908a4-2f3800 */
:root {
  --vegetation: #00d8ad;
  --flaming-flamingo: #d257ff;
  --rainforest: #009a6e;
  --topiary-green: #6f6d00;
  --fuchsia-nebula: #7908a4;
  --wasabi-nori: #2f3800;
}

Tailwind CSS v4

/* Vegetation to Wasabi Nori — https://swatchly.xyz/palette/00d8ad-d257ff-009a6e-6f6d00-7908a4-2f3800 */
@theme {
  --color-vegetation: #00d8ad;
  --color-vegetation-50: #c9ffec;
  --color-vegetation-100: #9dfcde;
  --color-vegetation-200: #75eac7;
  --color-vegetation-300: #00d8ad;
  --color-vegetation-400: #00b591;
  --color-vegetation-500: #009779;
  --color-vegetation-600: #007b61;
  --color-vegetation-700: #00624d;
  --color-vegetation-800: #004e3c;
  --color-vegetation-900: #003d2f;
  --color-vegetation-950: #00261c;
  --color-flaming-flamingo: #d257ff;
  --color-flaming-flamingo-50: #f9edff;
  --color-flaming-flamingo-100: #f5ddff;
  --color-flaming-flamingo-200: #ecbeff;
  --color-flaming-flamingo-300: #e198ff;
  --color-flaming-flamingo-400: #d257ff;
  --color-flaming-flamingo-500: #b637e1;
  --color-flaming-flamingo-600: #9910c2;
  --color-flaming-flamingo-700: #7c009f;
  --color-flaming-flamingo-800: #63007f;
  --color-flaming-flamingo-900: #4e0065;
  --color-flaming-flamingo-950: #330044;
  --color-rainforest: #009a6e;
  --color-rainforest-50: #d9ffec;
  --color-rainforest-100: #b7fcdc;
  --color-rainforest-200: #97eac5;
  --color-rainforest-300: #73d5ac;
  --color-rainforest-400: #41b68a;
  --color-rainforest-500: #009a6e;
  --color-rainforest-600: #007c58;
  --color-rainforest-700: #006345;
  --color-rainforest-800: #004e36;
  --color-rainforest-900: #003c29;
  --color-rainforest-950: #002618;
  --color-topiary-green: #6f6d00;
  --color-topiary-green-50: #f8f9ca;
  --color-topiary-green-100: #eeefb9;
  --color-topiary-green-200: #dbdb9a;
  --color-topiary-green-300: #c4c57a;
  --color-topiary-green-400: #a5a54f;
  --color-topiary-green-500: #8a882d;
  --color-topiary-green-600: #6f6d00;
  --color-topiary-green-700: #585600;
  --color-topiary-green-800: #454300;
  --color-topiary-green-900: #353400;
  --color-topiary-green-950: #212000;
  --color-fuchsia-nebula: #7908a4;
  --color-fuchsia-nebula-50: #faf2ff;
  --color-fuchsia-nebula-100: #f4e4ff;
  --color-fuchsia-nebula-200: #eac8ff;
  --color-fuchsia-nebula-300: #dea5ff;
  --color-fuchsia-nebula-400: #cb71fa;
  --color-fuchsia-nebula-500: #af51de;
  --color-fuchsia-nebula-600: #9133bd;
  --color-fuchsia-nebula-700: #7908a4;
  --color-fuchsia-nebula-800: #5f0981;
  --color-fuchsia-nebula-900: #4b0068;
  --color-fuchsia-nebula-950: #300044;
  --color-wasabi-nori: #2f3800;
  --color-wasabi-nori-50: #f2fadb;
  --color-wasabi-nori-100: #e7f0ce;
  --color-wasabi-nori-200: #d3ddb4;
  --color-wasabi-nori-300: #bcc799;
  --color-wasabi-nori-400: #9ca875;
  --color-wasabi-nori-500: #818d58;
  --color-wasabi-nori-600: #67723f;
  --color-wasabi-nori-700: #515b2c;
  --color-wasabi-nori-800: #3f471e;
  --color-wasabi-nori-900: #2f3800;
  --color-wasabi-nori-950: #1d2208;
}