Oasis to Sky color palette

00959FOasis 58BEF0Blue Mana 004870Mermaid Blues 2545CCFlying Fish Blue DDE4FFVeiling Waterfalls 84E0FFSky

Open in generator Export PNG, PDF, ASE…

About this palette

Oasis to Sky is a 6-color cool palette: #00959F (Oasis), #58BEF0 (Blue Mana), #004870 (Mermaid Blues), #2545CC (Flying Fish Blue), #DDE4FF (Veiling Waterfalls), #84E0FF (Sky). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #004870 on #DDE4FF with a contrast ratio of 7.69:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oasis	rgb(0, 149, 159)	hsl(184, 100%, 31%)
Blue Mana	rgb(88, 190, 240)	hsl(200, 84%, 64%)
Mermaid Blues	rgb(0, 72, 112)	hsl(201, 100%, 22%)
Flying Fish Blue	rgb(37, 69, 204)	hsl(229, 69%, 47%)
Veiling Waterfalls	rgb(221, 228, 255)	hsl(228, 100%, 93%)
Sky	rgb(132, 224, 255)	hsl(195, 100%, 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.69:1 Very good#004870 on #DDE4FF
Aa7.69:1 Very good#DDE4FF on #004870
Aa6.52:1 Good#004870 on #84E0FF
Aa6.52:1 Good#84E0FF on #004870
Aa5.93:1 Good#2545CC on #DDE4FF
Aa5.93:1 Good#DDE4FF on #2545CC
Aa5.03:1 Good#2545CC on #84E0FF
Aa5.03:1 Good#84E0FF on #2545CC

Color blindness preview

CSS variables

/* Oasis to Sky — https://swatchly.xyz/palette/00959f-58bef0-004870-2545cc-dde4ff-84e0ff */
:root {
  --oasis: #00959f;
  --blue-mana: #58bef0;
  --mermaid-blues: #004870;
  --flying-fish-blue: #2545cc;
  --veiling-waterfalls: #dde4ff;
  --sky: #84e0ff;
}

Tailwind CSS v4

/* Oasis to Sky — https://swatchly.xyz/palette/00959f-58bef0-004870-2545cc-dde4ff-84e0ff */
@theme {
  --color-oasis: #00959f;
  --color-oasis-50: #dbfcff;
  --color-oasis-100: #b7f8fe;
  --color-oasis-200: #97e6ed;
  --color-oasis-300: #73d0d9;
  --color-oasis-400: #41b1bb;
  --color-oasis-500: #00959f;
  --color-oasis-600: #007880;
  --color-oasis-700: #005f66;
  --color-oasis-800: #004b50;
  --color-oasis-900: #003a3e;
  --color-oasis-950: #002427;
  --color-blue-mana: #58bef0;
  --color-blue-mana-50: #d9f1ff;
  --color-blue-mana-100: #bde8ff;
  --color-blue-mana-200: #88d6ff;
  --color-blue-mana-300: #58bef0;
  --color-blue-mana-400: #39a1d0;
  --color-blue-mana-500: #0b87b7;
  --color-blue-mana-600: #006e96;
  --color-blue-mana-700: #005879;
  --color-blue-mana-800: #004662;
  --color-blue-mana-900: #00384f;
  --color-blue-mana-950: #002333;
  --color-mermaid-blues: #004870;
  --color-mermaid-blues-50: #ecf7ff;
  --color-mermaid-blues-100: #daeeff;
  --color-mermaid-blues-200: #b3ddff;
  --color-mermaid-blues-300: #94c8f0;
  --color-mermaid-blues-400: #6fa9d5;
  --color-mermaid-blues-500: #528dba;
  --color-mermaid-blues-600: #38739d;
  --color-mermaid-blues-700: #245b82;
  --color-mermaid-blues-800: #004870;
  --color-mermaid-blues-900: #0b3754;
  --color-mermaid-blues-950: #032237;
  --color-flying-fish-blue: #2545cc;
  --color-flying-fish-blue-50: #f1f5ff;
  --color-flying-fish-blue-100: #e2ebff;
  --color-flying-fish-blue-200: #c7d8ff;
  --color-flying-fish-blue-300: #a7c1ff;
  --color-flying-fish-blue-400: #7a9fff;
  --color-flying-fish-blue-500: #527dff;
  --color-flying-fish-blue-600: #385fe6;
  --color-flying-fish-blue-700: #2545cc;
  --color-flying-fish-blue-800: #1b35a4;
  --color-flying-fish-blue-900: #122685;
  --color-flying-fish-blue-950: #08155a;
  --color-veiling-waterfalls: #dde4ff;
  --color-veiling-waterfalls-50: #ebefff;
  --color-veiling-waterfalls-100: #dde4ff;
  --color-veiling-waterfalls-200: #ccd2e6;
  --color-veiling-waterfalls-300: #b6bcd3;
  --color-veiling-waterfalls-400: #979eb6;
  --color-veiling-waterfalls-500: #7d839b;
  --color-veiling-waterfalls-600: #646a81;
  --color-veiling-waterfalls-700: #4f5469;
  --color-veiling-waterfalls-800: #3d4153;
  --color-veiling-waterfalls-900: #2e3241;
  --color-veiling-waterfalls-950: #1c1f2a;
  --color-sky: #84e0ff;
  --color-sky-50: #ddf6ff;
  --color-sky-100: #c1eeff;
  --color-sky-200: #84e0ff;
  --color-sky-300: #7ac9e3;
  --color-sky-400: #51abc7;
  --color-sky-500: #2e90ad;
  --color-sky-600: #037691;
  --color-sky-700: #005e75;
  --color-sky-800: #004a5d;
  --color-sky-900: #003948;
  --color-sky-950: #00242e;
}