Devil’s Grass to Leek Color Palette

About this palette

Devil’s Grass to Leek is a 4-color cool palette: #49AA5F (Devil’s Grass), #006A5F (Peacock Pride), #001B21 (Black Stallion), #86E497 (Leek). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #001B21 on #86E497 with a contrast ratio of 11.50:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Devil’s Grass	rgb(73, 170, 95)	hsl(134, 40%, 48%)
Peacock Pride	rgb(0, 106, 95)	hsl(174, 100%, 21%)
Black Stallion	rgb(0, 27, 33)	hsl(191, 100%, 6%)
Leek	rgb(134, 228, 151)	hsl(131, 64%, 71%)

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.50:1 Very good#001B21 on #86E497
Aa11.50:1 Very good#86E497 on #001B21
Aa6.11:1 Good#49AA5F on #001B21
Aa6.11:1 Good#001B21 on #49AA5F
Aa4.20:1 Poor#006A5F on #86E497
Aa4.20:1 Poor#86E497 on #006A5F

Color blindness preview

CSS variables

/* Devil’s Grass to Leek — https://swatchly.xyz/palette/49aa5f-006a5f-001b21-86e497 */
:root {
  --devil-s-grass: #49aa5f;
  --peacock-pride: #006a5f;
  --black-stallion: #001b21;
  --leek: #86e497;
}

Tailwind CSS v4

/* Devil’s Grass to Leek — https://swatchly.xyz/palette/49aa5f-006a5f-001b21-86e497 */
@theme {
  --color-devil-s-grass: #49aa5f;
  --color-devil-s-grass-50: #e7ffea;
  --color-devil-s-grass-100: #cdffd3;
  --color-devil-s-grass-200: #b0f1ba;
  --color-devil-s-grass-300: #93df9f;
  --color-devil-s-grass-400: #6bc37c;
  --color-devil-s-grass-500: #49aa5f;
  --color-devil-s-grass-600: #268c43;
  --color-devil-s-grass-700: #01712d;
  --color-devil-s-grass-800: #005821;
  --color-devil-s-grass-900: #004317;
  --color-devil-s-grass-950: #002a0b;
  --color-peacock-pride: #006a5f;
  --color-peacock-pride-50: #d7fff7;
  --color-peacock-pride-100: #c6f7ee;
  --color-peacock-pride-200: #ace7dc;
  --color-peacock-pride-300: #8ed3c7;
  --color-peacock-pride-400: #67b5a9;
  --color-peacock-pride-500: #479b8f;
  --color-peacock-pride-600: #2a8075;
  --color-peacock-pride-700: #006a5f;
  --color-peacock-pride-800: #00534a;
  --color-peacock-pride-900: #004039;
  --color-peacock-pride-950: #002924;
  --color-black-stallion: #001b21;
  --color-black-stallion-50: #e7f9fd;
  --color-black-stallion-100: #dbeff4;
  --color-black-stallion-200: #c5dce2;
  --color-black-stallion-300: #abc6cd;
  --color-black-stallion-400: #8aa8af;
  --color-black-stallion-500: #6c8a92;
  --color-black-stallion-600: #516e75;
  --color-black-stallion-700: #3b555b;
  --color-black-stallion-800: #2a4045;
  --color-black-stallion-900: #1d2f33;
  --color-black-stallion-950: #001b21;
  --color-leek: #86e497;
  --color-leek-50: #f0fff2;
  --color-leek-100: #d5ffda;
  --color-leek-200: #b4f2bd;
  --color-leek-300: #86e497;
  --color-leek-400: #6ac07a;
  --color-leek-500: #45a35a;
  --color-leek-600: #23853f;
  --color-leek-700: #016b2a;
  --color-leek-800: #00531e;
  --color-leek-900: #003f15;
  --color-leek-950: #00280a;
}