Start generating

Frozen Turquoise to Subnautical color palette

58F3FFFrozen Turquoise73B9E5Malibu009099Oasis0065D8Epic Blue004B6CSeafarer092353Subnautical
Open in generator Export PNG, PDF, ASE…

About this palette

Frozen Turquoise to Subnautical is a 6-color cool, gradient palette: #58F3FF (Frozen Turquoise), #73B9E5 (Malibu), #009099 (Oasis), #0065D8 (Epic Blue), #004B6C (Seafarer), #092353 (Subnautical). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #58F3FF on #092353 with a contrast ratio of 11.39:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Frozen Turquoisergb(88, 243, 255)hsl(184, 100%, 67%)
Maliburgb(115, 185, 229)hsl(203, 69%, 67%)
Oasisrgb(0, 144, 153)hsl(184, 100%, 30%)
Epic Bluergb(0, 101, 216)hsl(212, 100%, 42%)
Seafarerrgb(0, 75, 108)hsl(198, 100%, 21%)
Subnauticalrgb(9, 35, 83)hsl(219, 80%, 18%)

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.39:1 Very good#58F3FF on #092353
  • Aa11.39:1 Very good#092353 on #58F3FF
  • Aa7.12:1 Very good#73B9E5 on #092353
  • Aa7.12:1 Very good#092353 on #73B9E5
  • Aa7.05:1 Very good#58F3FF on #004B6C
  • Aa7.05:1 Very good#004B6C on #58F3FF
  • Aa4.41:1 Poor#73B9E5 on #004B6C
  • Aa4.41:1 Poor#004B6C on #73B9E5

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Frozen Turquoise to Subnautical — https://swatchly.xyz/palette/58f3ff-73b9e5-009099-0065d8-004b6c-092353 */
:root {
  --frozen-turquoise: #58f3ff;
  --malibu: #73b9e5;
  --oasis: #009099;
  --epic-blue: #0065d8;
  --seafarer: #004b6c;
  --subnautical: #092353;
}

Tailwind CSS v4

/* Frozen Turquoise to Subnautical — https://swatchly.xyz/palette/58f3ff-73b9e5-009099-0065d8-004b6c-092353 */
@theme {
  --color-frozen-turquoise: #58f3ff;
  --color-frozen-turquoise-50: #e3fdff;
  --color-frozen-turquoise-100: #befaff;
  --color-frozen-turquoise-200: #58f3ff;
  --color-frozen-turquoise-300: #5ed8e2;
  --color-frozen-turquoise-400: #00b9c4;
  --color-frozen-turquoise-500: #009aa3;
  --color-frozen-turquoise-600: #007c83;
  --color-frozen-turquoise-700: #006268;
  --color-frozen-turquoise-800: #004c51;
  --color-frozen-turquoise-900: #003b3f;
  --color-frozen-turquoise-950: #002528;
  --color-malibu: #73b9e5;
  --color-malibu-50: #f6fbff;
  --color-malibu-100: #e7f5ff;
  --color-malibu-200: #c4e7ff;
  --color-malibu-300: #9ed5f9;
  --color-malibu-400: #73b9e5;
  --color-malibu-500: #559ac4;
  --color-malibu-600: #367ca5;
  --color-malibu-700: #1e6288;
  --color-malibu-800: #0a4c6d;
  --color-malibu-900: #003955;
  --color-malibu-950: #002235;
  --color-oasis: #009099;
  --color-oasis-50: #d7fcff;
  --color-oasis-100: #b6f6fb;
  --color-oasis-200: #95e3ea;
  --color-oasis-300: #70cdd4;
  --color-oasis-400: #3fadb6;
  --color-oasis-500: #009099;
  --color-oasis-600: #00747b;
  --color-oasis-700: #005c62;
  --color-oasis-800: #00494d;
  --color-oasis-900: #00383c;
  --color-oasis-950: #002427;
  --color-epic-blue: #0065d8;
  --color-epic-blue-50: #eff6ff;
  --color-epic-blue-100: #dfecff;
  --color-epic-blue-200: #c0d9ff;
  --color-epic-blue-300: #9ac3ff;
  --color-epic-blue-400: #61a1ff;
  --color-epic-blue-500: #2c82f7;
  --color-epic-blue-600: #0065d8;
  --color-epic-blue-700: #0050ae;
  --color-epic-blue-800: #003e8a;
  --color-epic-blue-900: #002f6d;
  --color-epic-blue-950: #001d48;
  --color-seafarer: #004b6c;
  --color-seafarer-50: #ebf7ff;
  --color-seafarer-100: #d7efff;
  --color-seafarer-200: #b1dffc;
  --color-seafarer-300: #95c9ea;
  --color-seafarer-400: #70abcf;
  --color-seafarer-500: #5290b4;
  --color-seafarer-600: #387598;
  --color-seafarer-700: #245e7e;
  --color-seafarer-800: #004b6c;
  --color-seafarer-900: #0a3a51;
  --color-seafarer-950: #032435;
  --color-subnautical: #092353;
  --color-subnautical-50: #f0f5ff;
  --color-subnautical-100: #e1ecff;
  --color-subnautical-200: #c2d9ff;
  --color-subnautical-300: #a4c2f5;
  --color-subnautical-400: #82a2da;
  --color-subnautical-500: #6888c0;
  --color-subnautical-600: #506ea4;
  --color-subnautical-700: #3d598a;
  --color-subnautical-800: #2e4773;
  --color-subnautical-900: #23385f;
  --color-subnautical-950: #092353;
}

Similar palettes