Onsen to Nightmare Color Palette

About this palette

Onsen to Nightmare is a 5-color cool, monochromatic, gradient palette: #6FE8C4 (Onsen), #00BA97 (Slime Girl), #008B73 (Elf), #005340 (Cape Verde), #002018 (Nightmare). It mixes turquoise tones and feels cool overall. The strongest text pairing is #6FE8C4 on #002018 with a contrast ratio of 11.49:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Onsen	rgb(111, 232, 196)	hsl(162, 72%, 67%)
Slime Girl	rgb(0, 186, 151)	hsl(169, 100%, 36%)
Elf	rgb(0, 139, 115)	hsl(170, 100%, 27%)
Cape Verde	rgb(0, 83, 64)	hsl(166, 100%, 16%)
Nightmare	rgb(0, 32, 24)	hsl(165, 100%, 6%)

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.49:1 Very good#6FE8C4 on #002018
Aa11.49:1 Very good#002018 on #6FE8C4
Aa6.94:1 Good#00BA97 on #002018
Aa6.94:1 Good#002018 on #00BA97
Aa6.06:1 Good#6FE8C4 on #005340
Aa6.06:1 Good#005340 on #6FE8C4
Aa4.05:1 Poor#008B73 on #002018
Aa4.05:1 Poor#002018 on #008B73

Color blindness preview

CSS variables

/* Onsen to Nightmare — https://swatchly.xyz/palette/6fe8c4-00ba97-008b73-005340-002018 */
:root {
  --onsen: #6fe8c4;
  --slime-girl: #00ba97;
  --elf: #008b73;
  --cape-verde: #005340;
  --nightmare: #002018;
}

Tailwind CSS v4

/* Onsen to Nightmare — https://swatchly.xyz/palette/6fe8c4-00ba97-008b73-005340-002018 */
@theme {
  --color-onsen: #6fe8c4;
  --color-onsen-50: #bfffe9;
  --color-onsen-100: #abf6dc;
  --color-onsen-200: #6fe8c4;
  --color-onsen-300: #68d0b0;
  --color-onsen-400: #37b392;
  --color-onsen-500: #009879;
  --color-onsen-600: #007b61;
  --color-onsen-700: #00634e;
  --color-onsen-800: #004f3d;
  --color-onsen-900: #003d2f;
  --color-onsen-950: #00261c;
  --color-slime-girl: #00ba97;
  --color-slime-girl-50: #d6fff1;
  --color-slime-girl-100: #aefde4;
  --color-slime-girl-200: #8beccf;
  --color-slime-girl-300: #62d8b8;
  --color-slime-girl-400: #00ba97;
  --color-slime-girl-500: #009b7d;
  --color-slime-girl-600: #007d65;
  --color-slime-girl-700: #006350;
  --color-slime-girl-800: #004e3e;
  --color-slime-girl-900: #003c2f;
  --color-slime-girl-950: #00261d;
  --color-elf: #008b73;
  --color-elf-50: #d9fff3;
  --color-elf-100: #c0fceb;
  --color-elf-200: #a5edd8;
  --color-elf-300: #86dac3;
  --color-elf-400: #5bbea6;
  --color-elf-500: #35a58c;
  --color-elf-600: #008b73;
  --color-elf-700: #006f5b;
  --color-elf-800: #005647;
  --color-elf-900: #004236;
  --color-elf-950: #002a21;
  --color-cape-verde: #005340;
  --color-cape-verde-50: #dafff1;
  --color-cape-verde-100: #ccf6e7;
  --color-cape-verde-200: #b2e4d2;
  --color-cape-verde-300: #97d0bc;
  --color-cape-verde-400: #72b29c;
  --color-cape-verde-500: #549882;
  --color-cape-verde-600: #3a7d68;
  --color-cape-verde-700: #256553;
  --color-cape-verde-800: #005340;
  --color-cape-verde-900: #0b3f31;
  --color-cape-verde-950: #03281e;
  --color-nightmare: #002018;
  --color-nightmare-50: #e7faf4;
  --color-nightmare-100: #dbf1e9;
  --color-nightmare-200: #c4dfd5;
  --color-nightmare-300: #aac9bf;
  --color-nightmare-400: #89aa9f;
  --color-nightmare-500: #6c8e83;
  --color-nightmare-600: #517267;
  --color-nightmare-700: #3c5950;
  --color-nightmare-800: #2b443d;
  --color-nightmare-900: #1e332d;
  --color-nightmare-950: #002018;
}