Into the Night to Whirlpool color palette

1E3746Into the Night 36656EMediterranea 4C828BParadiso 6BAEA3Turquoise Fantasies B0D4CBWhirlpool

About this palette

Into the Night to Whirlpool is a 5-color muted, cool, gradient palette: #1E3746 (Into the Night), #36656E (Mediterranea), #4C828B (Paradiso), #6BAEA3 (Turquoise Fantasies), #B0D4CB (Whirlpool). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #1E3746 on #B0D4CB with a contrast ratio of 7.77:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Into the Night	rgb(30, 55, 70)	hsl(202, 40%, 20%)
Mediterranea	rgb(54, 101, 110)	hsl(190, 34%, 32%)
Paradiso	rgb(76, 130, 139)	hsl(189, 29%, 42%)
Turquoise Fantasies	rgb(107, 174, 163)	hsl(170, 29%, 55%)
Whirlpool	rgb(176, 212, 203)	hsl(165, 30%, 76%)

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.77:1 Very good#1E3746 on #B0D4CB
Aa7.77:1 Very good#B0D4CB on #1E3746
Aa4.86:1 Good#1E3746 on #6BAEA3
Aa4.86:1 Good#6BAEA3 on #1E3746
Aa4.05:1 Poor#36656E on #B0D4CB
Aa4.05:1 Poor#B0D4CB on #36656E

Color blindness preview

CSS variables

/* Into the Night to Whirlpool — https://swatchly.xyz/palette/1e3746-36656e-4c828b-6baea3-b0d4cb */
:root {
  --into-the-night: #1e3746;
  --mediterranea: #36656e;
  --paradiso: #4c828b;
  --turquoise-fantasies: #6baea3;
  --whirlpool: #b0d4cb;
}

Tailwind CSS v4

/* Into the Night to Whirlpool — https://swatchly.xyz/palette/1e3746-36656e-4c828b-6baea3-b0d4cb */
@theme {
  --color-into-the-night: #1e3746;
  --color-into-the-night-50: #ebf7ff;
  --color-into-the-night-100: #dceefa;
  --color-into-the-night-200: #c5dbe9;
  --color-into-the-night-300: #acc5d5;
  --color-into-the-night-400: #8ba6b7;
  --color-into-the-night-500: #6f8b9c;
  --color-into-the-night-600: #567081;
  --color-into-the-night-700: #425969;
  --color-into-the-night-800: #314653;
  --color-into-the-night-900: #1e3746;
  --color-into-the-night-950: #15222a;
  --color-mediterranea: #36656e;
  --color-mediterranea-50: #e3faff;
  --color-mediterranea-100: #d3f2f8;
  --color-mediterranea-200: #bde0e8;
  --color-mediterranea-300: #a3ccd4;
  --color-mediterranea-400: #81afb8;
  --color-mediterranea-500: #65959e;
  --color-mediterranea-600: #4c7b84;
  --color-mediterranea-700: #36656e;
  --color-mediterranea-800: #284f57;
  --color-mediterranea-900: #1b3d44;
  --color-mediterranea-950: #0d272b;
  --color-paradiso: #4c828b;
  --color-paradiso-50: #e1fbff;
  --color-paradiso-100: #d3f5fa;
  --color-paradiso-200: #bde4eb;
  --color-paradiso-300: #a4d1d9;
  --color-paradiso-400: #81b4bd;
  --color-paradiso-500: #659ba4;
  --color-paradiso-600: #4c828b;
  --color-paradiso-700: #356870;
  --color-paradiso-800: #235259;
  --color-paradiso-900: #163f45;
  --color-paradiso-950: #0a272c;
  --color-turquoise-fantasies: #6baea3;
  --color-turquoise-fantasies-50: #d9fef6;
  --color-turquoise-fantasies-100: #cbf4ec;
  --color-turquoise-fantasies-200: #b0e2d9;
  --color-turquoise-fantasies-300: #93ccc2;
  --color-turquoise-fantasies-400: #6baea3;
  --color-turquoise-fantasies-500: #509288;
  --color-turquoise-fantasies-600: #36786e;
  --color-turquoise-fantasies-700: #216057;
  --color-turquoise-fantasies-800: #134c44;
  --color-turquoise-fantasies-900: #093b35;
  --color-turquoise-fantasies-950: #032521;
  --color-whirlpool: #b0d4cb;
  --color-whirlpool-50: #edfffa;
  --color-whirlpool-100: #e3f7f2;
  --color-whirlpool-200: #cee6e0;
  --color-whirlpool-300: #b0d4cb;
  --color-whirlpool-400: #91b2aa;
  --color-whirlpool-500: #73958c;
  --color-whirlpool-600: #577870;
  --color-whirlpool-700: #415f58;
  --color-whirlpool-800: #2f4a44;
  --color-whirlpool-900: #223833;
  --color-whirlpool-950: #13231f;
}