Lindworm Green to Fizz color palette

About this palette

Lindworm Green to Fizz is a 5-color cool, gradient palette: #162A10 (Lindworm Green), #264F4A (Pine Needle), #437B81 (Mysterious Blue), #63B2A8 (Turquoise Fantasies), #ADDAAB (Fizz). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #162A10 on #ADDAAB with a contrast ratio of 9.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Lindworm Greenrgb(22, 42, 16)hsl(106, 45%, 11%)
Pine Needlergb(38, 79, 74)hsl(173, 35%, 23%)
Mysterious Bluergb(67, 123, 129)hsl(186, 32%, 38%)
Turquoise Fantasiesrgb(99, 178, 168)hsl(172, 34%, 54%)
Fizzrgb(173, 218, 171)hsl(117, 39%, 76%)

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.

  • Aa9.76:1 Very good#162A10 on #ADDAAB
  • Aa9.76:1 Very good#ADDAAB on #162A10
  • Aa6.17:1 Good#162A10 on #63B2A8
  • Aa6.17:1 Good#63B2A8 on #162A10
  • Aa5.82:1 Good#264F4A on #ADDAAB
  • Aa5.82:1 Good#ADDAAB on #264F4A
  • Aa3.68:1 Poor#264F4A on #63B2A8
  • Aa3.68:1 Poor#63B2A8 on #264F4A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Lindworm Green to Fizz — https://swatchly.xyz/palette/162a10-264f4a-437b81-63b2a8-addaab */
:root {
  --lindworm-green: #162a10;
  --pine-needle: #264f4a;
  --mysterious-blue: #437b81;
  --turquoise-fantasies: #63b2a8;
  --fizz: #addaab;
}

Tailwind CSS v4

/* Lindworm Green to Fizz — https://swatchly.xyz/palette/162a10-264f4a-437b81-63b2a8-addaab */
@theme {
  --color-lindworm-green: #162a10;
  --color-lindworm-green-50: #ecfae8;
  --color-lindworm-green-100: #e1f1dc;
  --color-lindworm-green-200: #cbdec6;
  --color-lindworm-green-300: #b3c8ad;
  --color-lindworm-green-400: #92aa8b;
  --color-lindworm-green-500: #778f71;
  --color-lindworm-green-600: #5f7558;
  --color-lindworm-green-700: #4a5f44;
  --color-lindworm-green-800: #3a4c34;
  --color-lindworm-green-900: #2c3c28;
  --color-lindworm-green-950: #162a10;
  --color-pine-needle: #264f4a;
  --color-pine-needle-50: #e3fbf7;
  --color-pine-needle-100: #d7f2ee;
  --color-pine-needle-200: #bfdfda;
  --color-pine-needle-300: #a6cbc5;
  --color-pine-needle-400: #84ada7;
  --color-pine-needle-500: #68928c;
  --color-pine-needle-600: #4f7872;
  --color-pine-needle-700: #3b615c;
  --color-pine-needle-800: #264f4a;
  --color-pine-needle-900: #1f3c39;
  --color-pine-needle-950: #112624;
  --color-mysterious-blue: #437b81;
  --color-mysterious-blue-50: #defcff;
  --color-mysterious-blue-100: #d1f4f8;
  --color-mysterious-blue-200: #b9e2e7;
  --color-mysterious-blue-300: #9eced3;
  --color-mysterious-blue-400: #7ab0b6;
  --color-mysterious-blue-500: #5d959b;
  --color-mysterious-blue-600: #437b81;
  --color-mysterious-blue-700: #2e6268;
  --color-mysterious-blue-800: #1e4d52;
  --color-mysterious-blue-900: #133c40;
  --color-mysterious-blue-950: #082528;
  --color-turquoise-fantasies: #63b2a8;
  --color-turquoise-fantasies-50: #d7fff9;
  --color-turquoise-fantasies-100: #c7f7ef;
  --color-turquoise-fantasies-200: #ace5dd;
  --color-turquoise-fantasies-300: #8ed0c7;
  --color-turquoise-fantasies-400: #63b2a8;
  --color-turquoise-fantasies-500: #46968c;
  --color-turquoise-fantasies-600: #297a72;
  --color-turquoise-fantasies-700: #12625b;
  --color-turquoise-fantasies-800: #004e47;
  --color-turquoise-fantasies-900: #003c37;
  --color-turquoise-fantasies-950: #002622;
  --color-fizz: #addaab;
  --color-fizz-50: #f2fff2;
  --color-fizz-100: #e1fbe0;
  --color-fizz-200: #ccebca;
  --color-fizz-300: #addaab;
  --color-fizz-400: #8eb78c;
  --color-fizz-500: #6f9a6e;
  --color-fizz-600: #547d53;
  --color-fizz-700: #3e633d;
  --color-fizz-800: #2c4d2c;
  --color-fizz-900: #1f3b1f;
  --color-fizz-950: #112511;
}

Similar palettes