Mermaid Dreams to True Sky Blue color palette

0088B5Mermaid Dreams 9FB8F4Wondrous Wisteria 006A73Aqua Obscura 79B9DFMalibu 2E345AMidnight Escapade 29A3B6True Sky Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Mermaid Dreams to True Sky Blue is a 6-color cool palette: #0088B5 (Mermaid Dreams), #9FB8F4 (Wondrous Wisteria), #006A73 (Aqua Obscura), #79B9DF (Malibu), #2E345A (Midnight Escapade), #29A3B6 (True Sky Blue). It mixes blue, turquoise, purple tones and feels cool overall. The strongest text pairing is #9FB8F4 on #2E345A with a contrast ratio of 6.06:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mermaid Dreams	rgb(0, 136, 181)	hsl(195, 100%, 35%)
Wondrous Wisteria	rgb(159, 184, 244)	hsl(222, 79%, 79%)
Aqua Obscura	rgb(0, 106, 115)	hsl(185, 100%, 23%)
Malibu	rgb(121, 185, 223)	hsl(202, 61%, 67%)
Midnight Escapade	rgb(46, 52, 90)	hsl(232, 32%, 27%)
True Sky Blue	rgb(41, 163, 182)	hsl(188, 63%, 44%)

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.

Aa6.06:1 Good#9FB8F4 on #2E345A
Aa6.06:1 Good#2E345A on #9FB8F4
Aa5.59:1 Good#79B9DF on #2E345A
Aa5.59:1 Good#2E345A on #79B9DF
Aa3.99:1 Poor#2E345A on #29A3B6
Aa3.99:1 Poor#29A3B6 on #2E345A
Aa3.21:1 Poor#9FB8F4 on #006A73
Aa3.21:1 Poor#006A73 on #9FB8F4

Color blindness preview

CSS variables

/* Mermaid Dreams to True Sky Blue — https://swatchly.xyz/palette/0088b5-9fb8f4-006a73-79b9df-2e345a-29a3b6 */
:root {
  --mermaid-dreams: #0088b5;
  --wondrous-wisteria: #9fb8f4;
  --aqua-obscura: #006a73;
  --malibu: #79b9df;
  --midnight-escapade: #2e345a;
  --true-sky-blue: #29a3b6;
}

Tailwind CSS v4

/* Mermaid Dreams to True Sky Blue — https://swatchly.xyz/palette/0088b5-9fb8f4-006a73-79b9df-2e345a-29a3b6 */
@theme {
  --color-mermaid-dreams: #0088b5;
  --color-mermaid-dreams-50: #e6f6ff;
  --color-mermaid-dreams-100: #cceeff;
  --color-mermaid-dreams-200: #99ddff;
  --color-mermaid-dreams-300: #6ec6f0;
  --color-mermaid-dreams-400: #3da6d3;
  --color-mermaid-dreams-500: #0088b5;
  --color-mermaid-dreams-600: #006e93;
  --color-mermaid-dreams-700: #005775;
  --color-mermaid-dreams-800: #00445d;
  --color-mermaid-dreams-900: #003549;
  --color-mermaid-dreams-950: #002230;
  --color-wondrous-wisteria: #9fb8f4;
  --color-wondrous-wisteria-50: #ebf1ff;
  --color-wondrous-wisteria-100: #dbe6ff;
  --color-wondrous-wisteria-200: #bdd0ff;
  --color-wondrous-wisteria-300: #9fb8f4;
  --color-wondrous-wisteria-400: #839ad2;
  --color-wondrous-wisteria-500: #6980b8;
  --color-wondrous-wisteria-600: #51669b;
  --color-wondrous-wisteria-700: #3e5181;
  --color-wondrous-wisteria-800: #2f3f69;
  --color-wondrous-wisteria-900: #233155;
  --color-wondrous-wisteria-950: #141e38;
  --color-aqua-obscura: #006a73;
  --color-aqua-obscura-50: #defcff;
  --color-aqua-obscura-100: #c5f6fb;
  --color-aqua-obscura-200: #abe5ec;
  --color-aqua-obscura-300: #8ed1d9;
  --color-aqua-obscura-400: #67b4bd;
  --color-aqua-obscura-500: #479aa3;
  --color-aqua-obscura-600: #298089;
  --color-aqua-obscura-700: #006a73;
  --color-aqua-obscura-800: #00535a;
  --color-aqua-obscura-900: #004046;
  --color-aqua-obscura-950: #00282d;
  --color-malibu: #79b9df;
  --color-malibu-50: #f5fbff;
  --color-malibu-100: #e7f5ff;
  --color-malibu-200: #c3e8ff;
  --color-malibu-300: #a3d5f4;
  --color-malibu-400: #79b9df;
  --color-malibu-500: #5c9abf;
  --color-malibu-600: #3d7ca0;
  --color-malibu-700: #266283;
  --color-malibu-800: #144c68;
  --color-malibu-900: #083951;
  --color-malibu-950: #022233;
  --color-midnight-escapade: #2e345a;
  --color-midnight-escapade-50: #f2f5ff;
  --color-midnight-escapade-100: #e5eaff;
  --color-midnight-escapade-200: #ced6f9;
  --color-midnight-escapade-300: #b6bfe7;
  --color-midnight-escapade-400: #97a0cb;
  --color-midnight-escapade-500: #7c85b1;
  --color-midnight-escapade-600: #636b95;
  --color-midnight-escapade-700: #4f567c;
  --color-midnight-escapade-800: #3e4466;
  --color-midnight-escapade-900: #2e345a;
  --color-midnight-escapade-950: #1d2137;
  --color-true-sky-blue: #29a3b6;
  --color-true-sky-blue-50: #e9fbff;
  --color-true-sky-blue-100: #d1f8ff;
  --color-true-sky-blue-200: #a4ecfa;
  --color-true-sky-blue-300: #84d9e9;
  --color-true-sky-blue-400: #56bcce;
  --color-true-sky-blue-500: #29a3b6;
  --color-true-sky-blue-600: #008495;
  --color-true-sky-blue-700: #006977;
  --color-true-sky-blue-800: #00515d;
  --color-true-sky-blue-900: #003e47;
  --color-true-sky-blue-950: #00262c;
}