Teal to Leafy Canopy color palette

007C81Teal 009B67Prairie 00AB43Fennel Fiasco 00B083Herbal B78FFFDreamy Candy Forest A6D000Leafy Canopy

Open in generator Export PNG, PDF, ASE…

About this palette

Teal to Leafy Canopy is a 6-color vibrant, cool palette: #007C81 (Teal), #009B67 (Prairie), #00AB43 (Fennel Fiasco), #00B083 (Herbal), #B78FFF (Dreamy Candy Forest), #A6D000 (Leafy Canopy). It mixes turquoise, green, purple tones and feels cool overall. The strongest text pairing is #007C81 on #A6D000 with a contrast ratio of 2.77:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Teal	rgb(0, 124, 129)	hsl(182, 100%, 25%)
Prairie	rgb(0, 155, 103)	hsl(160, 100%, 30%)
Fennel Fiasco	rgb(0, 171, 67)	hsl(144, 100%, 34%)
Herbal	rgb(0, 176, 131)	hsl(165, 100%, 35%)
Dreamy Candy Forest	rgb(183, 143, 255)	hsl(261, 100%, 78%)
Leafy Canopy	rgb(166, 208, 0)	hsl(72, 100%, 41%)

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.

Color blindness preview

CSS variables

/* Teal to Leafy Canopy — https://swatchly.xyz/palette/007c81-009b67-00ab43-00b083-b78fff-a6d000 */
:root {
  --teal: #007c81;
  --prairie: #009b67;
  --fennel-fiasco: #00ab43;
  --herbal: #00b083;
  --dreamy-candy-forest: #b78fff;
  --leafy-canopy: #a6d000;
}

Tailwind CSS v4

/* Teal to Leafy Canopy — https://swatchly.xyz/palette/007c81-009b67-00ab43-00b083-b78fff-a6d000 */
@theme {
  --color-teal: #007c81;
  --color-teal-50: #d9fdff;
  --color-teal-100: #c0f7fa;
  --color-teal-200: #a3e6e9;
  --color-teal-300: #83d1d5;
  --color-teal-400: #58b3b7;
  --color-teal-500: #33979c;
  --color-teal-600: #007c81;
  --color-teal-700: #006267;
  --color-teal-800: #004d50;
  --color-teal-900: #003b3e;
  --color-teal-950: #002527;
  --color-prairie: #009b67;
  --color-prairie-50: #daffea;
  --color-prairie-100: #b7fcd7;
  --color-prairie-200: #97ebc0;
  --color-prairie-300: #73d6a5;
  --color-prairie-400: #41b783;
  --color-prairie-500: #009b67;
  --color-prairie-600: #007d52;
  --color-prairie-700: #006340;
  --color-prairie-800: #004e32;
  --color-prairie-900: #003d26;
  --color-prairie-950: #002616;
  --color-fennel-fiasco: #00ab43;
  --color-fennel-fiasco-50: #e5ffe7;
  --color-fennel-fiasco-100: #c7ffcd;
  --color-fennel-fiasco-200: #9cf4a8;
  --color-fennel-fiasco-300: #79e28b;
  --color-fennel-fiasco-400: #47c563;
  --color-fennel-fiasco-500: #00ab43;
  --color-fennel-fiasco-600: #008a34;
  --color-fennel-fiasco-700: #006d28;
  --color-fennel-fiasco-800: #00551d;
  --color-fennel-fiasco-900: #004115;
  --color-fennel-fiasco-950: #00290a;
  --color-herbal: #00b083;
  --color-herbal-50: #caffe8;
  --color-herbal-100: #a9f9d8;
  --color-herbal-200: #84e6c0;
  --color-herbal-300: #5ad0a6;
  --color-herbal-400: #00b083;
  --color-herbal-500: #00936d;
  --color-herbal-600: #007757;
  --color-herbal-700: #005f45;
  --color-herbal-800: #004b36;
  --color-herbal-900: #003b2a;
  --color-herbal-950: #00271a;
  --color-dreamy-candy-forest: #b78fff;
  --color-dreamy-candy-forest-50: #f8f6ff;
  --color-dreamy-candy-forest-100: #f1ebff;
  --color-dreamy-candy-forest-200: #e1d5ff;
  --color-dreamy-candy-forest-300: #cfb9ff;
  --color-dreamy-candy-forest-400: #b78fff;
  --color-dreamy-candy-forest-500: #9a72df;
  --color-dreamy-candy-forest-600: #7e56bf;
  --color-dreamy-candy-forest-700: #653f9f;
  --color-dreamy-candy-forest-800: #502d82;
  --color-dreamy-candy-forest-900: #3e1f67;
  --color-dreamy-candy-forest-950: #261044;
  --color-leafy-canopy: #a6d000;
  --color-leafy-canopy-50: #e6ffb3;
  --color-leafy-canopy-100: #d9f797;
  --color-leafy-canopy-200: #c2e470;
  --color-leafy-canopy-300: #a6d000;
  --color-leafy-canopy-400: #8bae00;
  --color-leafy-canopy-500: #739100;
  --color-leafy-canopy-600: #5c7500;
  --color-leafy-canopy-700: #495d00;
  --color-leafy-canopy-800: #394900;
  --color-leafy-canopy-900: #2b3900;
  --color-leafy-canopy-950: #1a2300;
}