Cyantific to Song of the Sea Color Palette

About this palette

Cyantific to Song of the Sea is a 4-color cool palette: #6EC5C4 (Cyantific), #004444 (Rich Black), #B9F2FF (Pale Sky), #406FA8 (Song of the Sea). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #004444 on #B9F2FF with a contrast ratio of 9.01:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cyantific	rgb(110, 197, 196)	hsl(179, 43%, 60%)
Rich Black	rgb(0, 68, 68)	hsl(180, 100%, 13%)
Pale Sky	rgb(185, 242, 255)	hsl(191, 100%, 86%)
Song of the Sea	rgb(64, 111, 168)	hsl(213, 45%, 45%)

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.

Aa9.01:1 Very good#004444 on #B9F2FF
Aa9.01:1 Very good#B9F2FF on #004444
Aa5.47:1 Good#6EC5C4 on #004444
Aa5.47:1 Good#004444 on #6EC5C4
Aa4.24:1 Poor#B9F2FF on #406FA8
Aa4.24:1 Poor#406FA8 on #B9F2FF

Color blindness preview

CSS variables

/* Cyantific to Song of the Sea — https://swatchly.xyz/palette/6ec5c4-004444-b9f2ff-406fa8 */
:root {
  --cyantific: #6ec5c4;
  --rich-black: #004444;
  --pale-sky: #b9f2ff;
  --song-of-the-sea: #406fa8;
}

Tailwind CSS v4

/* Cyantific to Song of the Sea — https://swatchly.xyz/palette/6ec5c4-004444-b9f2ff-406fa8 */
@theme {
  --color-cyantific: #6ec5c4;
  --color-cyantific-50: #c8faf8;
  --color-cyantific-100: #b6efee;
  --color-cyantific-200: #98dbda;
  --color-cyantific-300: #6ec5c4;
  --color-cyantific-400: #52a7a6;
  --color-cyantific-500: #338e8d;
  --color-cyantific-600: #147474;
  --color-cyantific-700: #005e5e;
  --color-cyantific-800: #004b4b;
  --color-cyantific-900: #003b3b;
  --color-cyantific-950: #002525;
  --color-rich-black: #004444;
  --color-rich-black-50: #ddfdfc;
  --color-rich-black-100: #d0f3f3;
  --color-rich-black-200: #b7e1e0;
  --color-rich-black-300: #99cac9;
  --color-rich-black-400: #73aaa9;
  --color-rich-black-500: #558d8d;
  --color-rich-black-600: #3a7170;
  --color-rich-black-700: #265857;
  --color-rich-black-800: #004444;
  --color-rich-black-900: #0e3333;
  --color-rich-black-950: #061f1f;
  --color-pale-sky: #b9f2ff;
  --color-pale-sky-50: #d9f8ff;
  --color-pale-sky-100: #b9f2ff;
  --color-pale-sky-200: #b2dce6;
  --color-pale-sky-300: #98c7d2;
  --color-pale-sky-400: #75a9b5;
  --color-pale-sky-500: #588f9b;
  --color-pale-sky-600: #3f7480;
  --color-pale-sky-700: #2c5d68;
  --color-pale-sky-800: #1d4952;
  --color-pale-sky-900: #123940;
  --color-pale-sky-950: #082329;
  --color-song-of-the-sea: #406fa8;
  --color-song-of-the-sea-50: #eff6ff;
  --color-song-of-the-sea-100: #dfedff;
  --color-song-of-the-sea-200: #bedbff;
  --color-song-of-the-sea-300: #9ac5fa;
  --color-song-of-the-sea-400: #77a6e0;
  --color-song-of-the-sea-500: #5a8ac5;
  --color-song-of-the-sea-600: #406fa8;
  --color-song-of-the-sea-700: #2d588b;
  --color-song-of-the-sea-800: #1e4471;
  --color-song-of-the-sea-900: #14345a;
  --color-song-of-the-sea-950: #09203b;
}