Moor-Monster to Eternal Winter color palette

005337Moor-Monster 007D98Pacific Pleasure 00AD93Hobgoblin 00D8D5Fish Boy 97F5FFEternal Winter

About this palette

Moor-Monster to Eternal Winter is a 5-color cool, gradient palette: #005337 (Moor-Monster), #007D98 (Pacific Pleasure), #00AD93 (Hobgoblin), #00D8D5 (Fish Boy), #97F5FF (Eternal Winter). It mixes green, blue, turquoise tones and feels cool overall. The strongest text pairing is #005337 on #97F5FF with a contrast ratio of 7.34:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moor-Monster	rgb(0, 83, 55)	hsl(160, 100%, 16%)
Pacific Pleasure	rgb(0, 125, 152)	hsl(191, 100%, 30%)
Hobgoblin	rgb(0, 173, 147)	hsl(171, 100%, 34%)
Fish Boy	rgb(0, 216, 213)	hsl(179, 100%, 42%)
Eternal Winter	rgb(151, 245, 255)	hsl(186, 100%, 80%)

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.

Aa7.34:1 Very good#005337 on #97F5FF
Aa7.34:1 Very good#97F5FF on #005337
Aa5.14:1 Good#005337 on #00D8D5
Aa5.14:1 Good#00D8D5 on #005337
Aa3.83:1 Poor#007D98 on #97F5FF
Aa3.83:1 Poor#97F5FF on #007D98
Aa3.23:1 Poor#005337 on #00AD93
Aa3.23:1 Poor#00AD93 on #005337

Color blindness preview

CSS variables

/* Moor-Monster to Eternal Winter — https://swatchly.xyz/palette/005337-007d98-00ad93-00d8d5-97f5ff */
:root {
  --moor-monster: #005337;
  --pacific-pleasure: #007d98;
  --hobgoblin: #00ad93;
  --fish-boy: #00d8d5;
  --eternal-winter: #97f5ff;
}

Tailwind CSS v4

/* Moor-Monster to Eternal Winter — https://swatchly.xyz/palette/005337-007d98-00ad93-00d8d5-97f5ff */
@theme {
  --color-moor-monster: #005337;
  --color-moor-monster-50: #dcffec;
  --color-moor-monster-100: #cdf7e1;
  --color-moor-monster-200: #b3e5cb;
  --color-moor-monster-300: #97d1b3;
  --color-moor-monster-400: #72b393;
  --color-moor-monster-500: #549878;
  --color-moor-monster-600: #3a7d5f;
  --color-moor-monster-700: #25664a;
  --color-moor-monster-800: #005337;
  --color-moor-monster-900: #0b3f2b;
  --color-moor-monster-950: #03281a;
  --color-pacific-pleasure: #007d98;
  --color-pacific-pleasure-50: #e7f9ff;
  --color-pacific-pleasure-100: #cff3ff;
  --color-pacific-pleasure-200: #a3e5fb;
  --color-pacific-pleasure-300: #83d1e9;
  --color-pacific-pleasure-400: #58b3ce;
  --color-pacific-pleasure-500: #3398b3;
  --color-pacific-pleasure-600: #007d98;
  --color-pacific-pleasure-700: #006379;
  --color-pacific-pleasure-800: #004d5f;
  --color-pacific-pleasure-900: #003c4a;
  --color-pacific-pleasure-950: #00252f;
  --color-hobgoblin: #00ad93;
  --color-hobgoblin-50: #c5ffef;
  --color-hobgoblin-100: #a8f7e3;
  --color-hobgoblin-200: #83e4cd;
  --color-hobgoblin-300: #59cdb4;
  --color-hobgoblin-400: #00ad93;
  --color-hobgoblin-500: #00907a;
  --color-hobgoblin-600: #007563;
  --color-hobgoblin-700: #005d4f;
  --color-hobgoblin-800: #004a3e;
  --color-hobgoblin-900: #003a30;
  --color-hobgoblin-950: #00261f;
  --color-fish-boy: #00d8d5;
  --color-fish-boy-50: #cbfffd;
  --color-fish-boy-100: #a1fbf8;
  --color-fish-boy-200: #79eae7;
  --color-fish-boy-300: #00d8d5;
  --color-fish-boy-400: #00b5b3;
  --color-fish-boy-500: #009795;
  --color-fish-boy-600: #007a78;
  --color-fish-boy-700: #006160;
  --color-fish-boy-800: #004c4b;
  --color-fish-boy-900: #003b3a;
  --color-fish-boy-950: #002525;
  --color-eternal-winter: #97f5ff;
  --color-eternal-winter-50: #c5f9ff;
  --color-eternal-winter-100: #97f5ff;
  --color-eternal-winter-200: #99dfe6;
  --color-eternal-winter-300: #7bcbd3;
  --color-eternal-winter-400: #52aeb7;
  --color-eternal-winter-500: #2f939d;
  --color-eternal-winter-600: #057982;
  --color-eternal-winter-700: #006169;
  --color-eternal-winter-800: #004c52;
  --color-eternal-winter-900: #003b40;
  --color-eternal-winter-950: #002528;
}