Elf to Tropical Funk Color Palette

About this palette

Elf to Tropical Funk is a 5-color vibrant, cool, neon palette: #008972 (Elf), #7A9400 (Green Thumb), #8180FF (Orchid), #B8B800 (Lush Bamboo), #67DC00 (Tropical Funk). It mixes turquoise, green, purple, yellow tones and feels cool overall. The strongest text pairing is #008972 on #67DC00 with a contrast ratio of 2.45:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elf	rgb(0, 137, 114)	hsl(170, 100%, 27%)
Green Thumb	rgb(122, 148, 0)	hsl(71, 100%, 29%)
Orchid	rgb(129, 128, 255)	hsl(240, 100%, 75%)
Lush Bamboo	rgb(184, 184, 0)	hsl(60, 100%, 36%)
Tropical Funk	rgb(103, 220, 0)	hsl(92, 100%, 43%)

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

/* Elf to Tropical Funk — https://swatchly.xyz/palette/008972-7a9400-8180ff-b8b800-67dc00 */
:root {
  --elf: #008972;
  --green-thumb: #7a9400;
  --orchid: #8180ff;
  --lush-bamboo: #b8b800;
  --tropical-funk: #67dc00;
}

Tailwind CSS v4

/* Elf to Tropical Funk — https://swatchly.xyz/palette/008972-7a9400-8180ff-b8b800-67dc00 */
@theme {
  --color-elf: #008972;
  --color-elf-50: #d9fff4;
  --color-elf-100: #c0fceb;
  --color-elf-200: #a5ecd8;
  --color-elf-300: #86d9c3;
  --color-elf-400: #5bbda5;
  --color-elf-500: #35a38b;
  --color-elf-600: #008972;
  --color-elf-700: #006d5a;
  --color-elf-800: #005546;
  --color-elf-900: #004135;
  --color-elf-950: #002921;
  --color-green-thumb: #7a9400;
  --color-green-thumb-50: #ecffc1;
  --color-green-thumb-100: #e2f6b0;
  --color-green-thumb-200: #cde490;
  --color-green-thumb-300: #b5ce6d;
  --color-green-thumb-400: #95b03c;
  --color-green-thumb-500: #7a9400;
  --color-green-thumb-600: #627700;
  --color-green-thumb-700: #4d5e00;
  --color-green-thumb-800: #3c4a00;
  --color-green-thumb-900: #2d3900;
  --color-green-thumb-950: #1b2300;
  --color-orchid: #8180ff;
  --color-orchid-50: #f6f7ff;
  --color-orchid-100: #edefff;
  --color-orchid-200: #d8dbff;
  --color-orchid-300: #bfc5ff;
  --color-orchid-400: #9da2ff;
  --color-orchid-500: #8180ff;
  --color-orchid-600: #6662dd;
  --color-orchid-700: #5048bb;
  --color-orchid-800: #3d349a;
  --color-orchid-900: #2e247b;
  --color-orchid-950: #1b1352;
  --color-lush-bamboo: #b8b800;
  --color-lush-bamboo-50: #fdffcd;
  --color-lush-bamboo-100: #f7f9b0;
  --color-lush-bamboo-200: #e6e98f;
  --color-lush-bamboo-300: #d3d569;
  --color-lush-bamboo-400: #b8b800;
  --color-lush-bamboo-500: #999900;
  --color-lush-bamboo-600: #7a7a00;
  --color-lush-bamboo-700: #606000;
  --color-lush-bamboo-800: #4a4a00;
  --color-lush-bamboo-900: #383800;
  --color-lush-bamboo-950: #212100;
  --color-tropical-funk: #67dc00;
  --color-tropical-funk-50: #dcffcd;
  --color-tropical-funk-100: #b8ff99;
  --color-tropical-funk-200: #97ee6f;
  --color-tropical-funk-300: #67dc00;
  --color-tropical-funk-400: #55b900;
  --color-tropical-funk-500: #469a00;
  --color-tropical-funk-600: #377d00;
  --color-tropical-funk-700: #2b6300;
  --color-tropical-funk-800: #204e00;
  --color-tropical-funk-900: #173d00;
  --color-tropical-funk-950: #0c2600;
}