Limestoned to Swamp Thing color palette

A2D0A6Limestoned 518F53Victorian Garden B9EDDFWater Leaf 155D61Beau Vert 012A21Swamp Thing

About this palette

Limestoned to Swamp Thing is a 5-color cool palette: #A2D0A6 (Limestoned), #518F53 (Victorian Garden), #B9EDDF (Water Leaf), #155D61 (Beau Vert), #012A21 (Swamp Thing). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #B9EDDF on #012A21 with a contrast ratio of 11.99:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Limestoned	rgb(162, 208, 166)	hsl(125, 33%, 73%)
Victorian Garden	rgb(81, 143, 83)	hsl(122, 28%, 44%)
Water Leaf	rgb(185, 237, 223)	hsl(164, 59%, 83%)
Beau Vert	rgb(21, 93, 97)	hsl(183, 64%, 23%)
Swamp Thing	rgb(1, 42, 33)	hsl(167, 95%, 8%)

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.

Aa11.99:1 Very good#B9EDDF on #012A21
Aa11.99:1 Very good#012A21 on #B9EDDF
Aa8.94:1 Very good#A2D0A6 on #012A21
Aa8.94:1 Very good#012A21 on #A2D0A6
Aa5.86:1 Good#B9EDDF on #155D61
Aa5.86:1 Good#155D61 on #B9EDDF
Aa4.37:1 Poor#A2D0A6 on #155D61
Aa4.37:1 Poor#155D61 on #A2D0A6

Color blindness preview

CSS variables

/* Limestoned to Swamp Thing — https://swatchly.xyz/palette/a2d0a6-518f53-b9eddf-155d61-012a21 */
:root {
  --limestoned: #a2d0a6;
  --victorian-garden: #518f53;
  --water-leaf: #b9eddf;
  --beau-vert: #155d61;
  --swamp-thing: #012a21;
}

Tailwind CSS v4

/* Limestoned to Swamp Thing — https://swatchly.xyz/palette/a2d0a6-518f53-b9eddf-155d61-012a21 */
@theme {
  --color-limestoned: #a2d0a6;
  --color-limestoned-50: #e4fee6;
  --color-limestoned-100: #d8f5da;
  --color-limestoned-200: #c1e3c4;
  --color-limestoned-300: #a2d0a6;
  --color-limestoned-400: #84af88;
  --color-limestoned-500: #68946c;
  --color-limestoned-600: #4e7853;
  --color-limestoned-700: #3a603e;
  --color-limestoned-800: #2a4c2e;
  --color-limestoned-900: #1e3b22;
  --color-limestoned-950: #102513;
  --color-victorian-garden: #518f53;
  --color-victorian-garden-50: #dcffdb;
  --color-victorian-garden-100: #ccf5cb;
  --color-victorian-garden-200: #b1e2b1;
  --color-victorian-garden-300: #94cc94;
  --color-victorian-garden-400: #6fac70;
  --color-victorian-garden-500: #518f53;
  --color-victorian-garden-600: #39753c;
  --color-victorian-garden-700: #275e2b;
  --color-victorian-garden-800: #1a4b1e;
  --color-victorian-garden-900: #113b14;
  --color-victorian-garden-950: #072509;
  --color-water-leaf: #b9eddf;
  --color-water-leaf-50: #f0fffb;
  --color-water-leaf-100: #ddfaf2;
  --color-water-leaf-200: #b9eddf;
  --color-water-leaf-300: #a9d2c7;
  --color-water-leaf-400: #83b2a6;
  --color-water-leaf-500: #649689;
  --color-water-leaf-600: #49796d;
  --color-water-leaf-700: #346056;
  --color-water-leaf-800: #244b42;
  --color-water-leaf-900: #183a32;
  --color-water-leaf-950: #0c241f;
  --color-beau-vert: #155d61;
  --color-beau-vert-50: #dafdff;
  --color-beau-vert-100: #ccf4f6;
  --color-beau-vert-200: #b1e1e4;
  --color-beau-vert-300: #93cbcf;
  --color-beau-vert-400: #6dacb0;
  --color-beau-vert-500: #4f9094;
  --color-beau-vert-600: #347478;
  --color-beau-vert-700: #155d61;
  --color-beau-vert-800: #11484c;
  --color-beau-vert-900: #07383b;
  --color-beau-vert-950: #022325;
  --color-swamp-thing: #012a21;
  --color-swamp-thing-50: #e4fbf4;
  --color-swamp-thing-100: #d8f2ea;
  --color-swamp-thing-200: #c1e0d6;
  --color-swamp-thing-300: #a7cabf;
  --color-swamp-thing-400: #84ab9f;
  --color-swamp-thing-500: #699185;
  --color-swamp-thing-600: #50766b;
  --color-swamp-thing-700: #3c6055;
  --color-swamp-thing-800: #2d4c43;
  --color-swamp-thing-900: #213c35;
  --color-swamp-thing-950: #012a21;
}