Cold and Dark to Blue Mana Color Palette

About this palette

Cold and Dark to Blue Mana is a 5-color cool palette: #00434F (Cold and Dark), #C5FFFE (Crushed Ice), #00796B (Emperor Jade), #2193D4 (Magical Merlin), #51C5EB (Blue Mana). It mixes turquoise, white, blue tones and feels cool overall. The strongest text pairing is #00434F on #C5FFFE with a contrast ratio of 9.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold and Dark	rgb(0, 67, 79)	hsl(189, 100%, 15%)
Crushed Ice	rgb(197, 255, 254)	hsl(179, 100%, 89%)
Emperor Jade	rgb(0, 121, 107)	hsl(173, 100%, 24%)
Magical Merlin	rgb(33, 147, 212)	hsl(202, 73%, 48%)
Blue Mana	rgb(81, 197, 235)	hsl(195, 79%, 62%)

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.97:1 Very good#00434F on #C5FFFE
Aa9.97:1 Very good#C5FFFE on #00434F
Aa5.50:1 Good#00434F on #51C5EB
Aa5.50:1 Good#51C5EB on #00434F
Aa4.84:1 Good#C5FFFE on #00796B
Aa4.84:1 Good#00796B on #C5FFFE
Aa3.23:1 Poor#00434F on #2193D4
Aa3.23:1 Poor#2193D4 on #00434F

Color blindness preview

CSS variables

/* Cold and Dark to Blue Mana — https://swatchly.xyz/palette/00434f-c5fffe-00796b-2193d4-51c5eb */
:root {
  --cold-and-dark: #00434f;
  --crushed-ice: #c5fffe;
  --emperor-jade: #00796b;
  --magical-merlin: #2193d4;
  --blue-mana: #51c5eb;
}

Tailwind CSS v4

/* Cold and Dark to Blue Mana — https://swatchly.xyz/palette/00434f-c5fffe-00796b-2193d4-51c5eb */
@theme {
  --color-cold-and-dark: #00434f;
  --color-cold-and-dark-50: #e4faff;
  --color-cold-and-dark-100: #cff2fb;
  --color-cold-and-dark-200: #b6e0ea;
  --color-cold-and-dark-300: #98c9d5;
  --color-cold-and-dark-400: #72a9b6;
  --color-cold-and-dark-500: #548c99;
  --color-cold-and-dark-600: #39707c;
  --color-cold-and-dark-700: #255762;
  --color-cold-and-dark-800: #00434f;
  --color-cold-and-dark-900: #0e323a;
  --color-cold-and-dark-950: #051f24;
  --color-crushed-ice: #c5fffe;
  --color-crushed-ice-50: #c5fffe;
  --color-crushed-ice-100: #cdf1f0;
  --color-crushed-ice-200: #b5dfde;
  --color-crushed-ice-300: #9acac9;
  --color-crushed-ice-400: #77acab;
  --color-crushed-ice-500: #5a9190;
  --color-crushed-ice-600: #417676;
  --color-crushed-ice-700: #2d5f5e;
  --color-crushed-ice-800: #1e4b4a;
  --color-crushed-ice-900: #133a3a;
  --color-crushed-ice-950: #082424;
  --color-emperor-jade: #00796b;
  --color-emperor-jade-50: #d8fff7;
  --color-emperor-jade-100: #c1f8ed;
  --color-emperor-jade-200: #a3e6d9;
  --color-emperor-jade-300: #82d0c2;
  --color-emperor-jade-400: #57b1a2;
  --color-emperor-jade-500: #339586;
  --color-emperor-jade-600: #00796b;
  --color-emperor-jade-700: #006055;
  --color-emperor-jade-800: #004b42;
  --color-emperor-jade-900: #003a33;
  --color-emperor-jade-950: #00251f;
  --color-magical-merlin: #2193d4;
  --color-magical-merlin-50: #eef7ff;
  --color-magical-merlin-100: #dcf0ff;
  --color-magical-merlin-200: #b6e0ff;
  --color-magical-merlin-300: #86cdff;
  --color-magical-merlin-400: #4dafee;
  --color-magical-merlin-500: #2193d4;
  --color-magical-merlin-600: #0076b0;
  --color-magical-merlin-700: #005e8d;
  --color-magical-merlin-800: #00496f;
  --color-magical-merlin-900: #003856;
  --color-magical-merlin-950: #002238;
  --color-blue-mana: #51c5eb;
  --color-blue-mana-50: #d9f4ff;
  --color-blue-mana-100: #baecff;
  --color-blue-mana-200: #86dbfa;
  --color-blue-mana-300: #51c5eb;
  --color-blue-mana-400: #2fa7cb;
  --color-blue-mana-500: #008caf;
  --color-blue-mana-600: #00728e;
  --color-blue-mana-700: #005b73;
  --color-blue-mana-800: #00485c;
  --color-blue-mana-900: #003949;
  --color-blue-mana-950: #00242f;
}