Nightmare to Turquoise Pearl Color Palette

About this palette

Nightmare to Turquoise Pearl is a 5-color cool, monochromatic, gradient palette: #002016 (Nightmare), #005849 (Evergreen), #19937F (Pool Table), #73B89F (Sereni Teal), #86F6D3 (Turquoise Pearl). It mixes turquoise tones and feels cool overall. The strongest text pairing is #002016 on #86F6D3 with a contrast ratio of 13.25:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(0, 32, 22)	hsl(161, 100%, 6%)
Evergreen	rgb(0, 88, 73)	hsl(170, 100%, 17%)
Pool Table	rgb(25, 147, 127)	hsl(170, 71%, 34%)
Sereni Teal	rgb(115, 184, 159)	hsl(158, 33%, 59%)
Turquoise Pearl	rgb(134, 246, 211)	hsl(161, 86%, 75%)

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.

Aa13.25:1 Super#002016 on #86F6D3
Aa13.25:1 Super#86F6D3 on #002016
Aa7.46:1 Very good#002016 on #73B89F
Aa7.46:1 Very good#73B89F on #002016
Aa6.48:1 Good#005849 on #86F6D3
Aa6.48:1 Good#86F6D3 on #005849
Aa4.53:1 Good#002016 on #19937F
Aa4.53:1 Good#19937F on #002016

Color blindness preview

CSS variables

/* Nightmare to Turquoise Pearl — https://swatchly.xyz/palette/002016-005849-19937f-73b89f-86f6d3 */
:root {
  --nightmare: #002016;
  --evergreen: #005849;
  --pool-table: #19937f;
  --sereni-teal: #73b89f;
  --turquoise-pearl: #86f6d3;
}

Tailwind CSS v4

/* Nightmare to Turquoise Pearl — https://swatchly.xyz/palette/002016-005849-19937f-73b89f-86f6d3 */
@theme {
  --color-nightmare: #002016;
  --color-nightmare-50: #e7fbf2;
  --color-nightmare-100: #dbf1e8;
  --color-nightmare-200: #c4dfd4;
  --color-nightmare-300: #abc9bc;
  --color-nightmare-400: #89aa9d;
  --color-nightmare-500: #6c8e80;
  --color-nightmare-600: #517265;
  --color-nightmare-700: #3c594e;
  --color-nightmare-800: #2b443b;
  --color-nightmare-900: #1e332b;
  --color-nightmare-950: #002016;
  --color-evergreen: #005849;
  --color-evergreen-50: #d9fff4;
  --color-evergreen-100: #cbf6ea;
  --color-evergreen-200: #b0e4d6;
  --color-evergreen-300: #96d1c1;
  --color-evergreen-400: #71b4a3;
  --color-evergreen-500: #549a89;
  --color-evergreen-600: #398070;
  --color-evergreen-700: #256a5b;
  --color-evergreen-800: #005849;
  --color-evergreen-900: #084438;
  --color-evergreen-950: #012c23;
  --color-pool-table: #19937f;
  --color-pool-table-50: #d3fff4;
  --color-pool-table-100: #b9f8e8;
  --color-pool-table-200: #99e5d3;
  --color-pool-table-300: #76cfbc;
  --color-pool-table-400: #47b09b;
  --color-pool-table-500: #19937f;
  --color-pool-table-600: #007766;
  --color-pool-table-700: #005f51;
  --color-pool-table-800: #004b3f;
  --color-pool-table-900: #003a31;
  --color-pool-table-950: #00251e;
  --color-sereni-teal: #73b89f;
  --color-sereni-teal-50: #e3fff3;
  --color-sereni-teal-100: #d1f9e9;
  --color-sereni-teal-200: #b8e8d5;
  --color-sereni-teal-300: #9cd4bf;
  --color-sereni-teal-400: #73b89f;
  --color-sereni-teal-500: #569b83;
  --color-sereni-teal-600: #3a7e68;
  --color-sereni-teal-700: #246551;
  --color-sereni-teal-800: #14503e;
  --color-sereni-teal-900: #093d2e;
  --color-sereni-teal-950: #02261c;
  --color-turquoise-pearl: #86f6d3;
  --color-turquoise-pearl-50: #e8fff6;
  --color-turquoise-pearl-100: #c3ffea;
  --color-turquoise-pearl-200: #86f6d3;
  --color-turquoise-pearl-300: #81dabd;
  --color-turquoise-pearl-400: #50bb9c;
  --color-turquoise-pearl-500: #219f80;
  --color-turquoise-pearl-600: #008165;
  --color-turquoise-pearl-700: #00664f;
  --color-turquoise-pearl-800: #004f3d;
  --color-turquoise-pearl-900: #003d2f;
  --color-turquoise-pearl-950: #00261c;
}