Cloudless to Tardis Blue Color Palette

About this palette

Cloudless to Tardis Blue is a 5-color cool, monochromatic palette: #DFE7FF (Cloudless), #0D6E8A (Waterworld), #1EA5C9 (Laguna), #72BCFF (Cooler Than Ever), #003F6B (Tardis Blue). It mixes gray, blue tones and feels cool overall. The strongest text pairing is #DFE7FF on #003F6B with a contrast ratio of 8.85:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cloudless	rgb(223, 231, 255)	hsl(225, 100%, 94%)
Waterworld	rgb(13, 110, 138)	hsl(193, 83%, 30%)
Laguna	rgb(30, 165, 201)	hsl(193, 74%, 45%)
Cooler Than Ever	rgb(114, 188, 255)	hsl(209, 100%, 72%)
Tardis Blue	rgb(0, 63, 107)	hsl(205, 100%, 21%)

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.

Aa8.85:1 Very good#DFE7FF on #003F6B
Aa8.85:1 Very good#003F6B on #DFE7FF
Aa5.38:1 Good#72BCFF on #003F6B
Aa5.38:1 Good#003F6B on #72BCFF
Aa4.71:1 Good#DFE7FF on #0D6E8A
Aa4.71:1 Good#0D6E8A on #DFE7FF
Aa3.79:1 Poor#1EA5C9 on #003F6B
Aa3.79:1 Poor#003F6B on #1EA5C9

Color blindness preview

CSS variables

/* Cloudless to Tardis Blue — https://swatchly.xyz/palette/dfe7ff-0d6e8a-1ea5c9-72bcff-003f6b */
:root {
  --cloudless: #dfe7ff;
  --waterworld: #0d6e8a;
  --laguna: #1ea5c9;
  --cooler-than-ever: #72bcff;
  --tardis-blue: #003f6b;
}

Tailwind CSS v4

/* Cloudless to Tardis Blue — https://swatchly.xyz/palette/dfe7ff-0d6e8a-1ea5c9-72bcff-003f6b */
@theme {
  --color-cloudless: #dfe7ff;
  --color-cloudless-50: #edf2ff;
  --color-cloudless-100: #dfe7ff;
  --color-cloudless-200: #ced4e6;
  --color-cloudless-300: #b7bed2;
  --color-cloudless-400: #989fb5;
  --color-cloudless-500: #7d849a;
  --color-cloudless-600: #646b7f;
  --color-cloudless-700: #4f5567;
  --color-cloudless-800: #3d4252;
  --color-cloudless-900: #2e3240;
  --color-cloudless-950: #1c1f29;
  --color-waterworld: #0d6e8a;
  --color-waterworld-50: #e8f8ff;
  --color-waterworld-100: #ccf0ff;
  --color-waterworld-200: #a3dff6;
  --color-waterworld-300: #82c8e3;
  --color-waterworld-400: #58a7c4;
  --color-waterworld-500: #368aa7;
  --color-waterworld-600: #0d6e8a;
  --color-waterworld-700: #00576f;
  --color-waterworld-800: #004458;
  --color-waterworld-900: #003545;
  --color-waterworld-950: #00212c;
  --color-laguna: #1ea5c9;
  --color-laguna-50: #ddf6ff;
  --color-laguna-100: #beeeff;
  --color-laguna-200: #87ddfb;
  --color-laguna-300: #5fc6e7;
  --color-laguna-400: #1ea5c9;
  --color-laguna-500: #008aaa;
  --color-laguna-600: #00708a;
  --color-laguna-700: #00596f;
  --color-laguna-800: #004658;
  --color-laguna-900: #003746;
  --color-laguna-950: #00242e;
  --color-cooler-than-ever: #72bcff;
  --color-cooler-than-ever-50: #e3f1ff;
  --color-cooler-than-ever-100: #cde7ff;
  --color-cooler-than-ever-200: #a5d3ff;
  --color-cooler-than-ever-300: #72bcff;
  --color-cooler-than-ever-400: #569ede;
  --color-cooler-than-ever-500: #3a84c3;
  --color-cooler-than-ever-600: #206ba6;
  --color-cooler-than-ever-700: #0a558b;
  --color-cooler-than-ever-800: #004372;
  --color-cooler-than-ever-900: #00355b;
  --color-cooler-than-ever-950: #00213c;
  --color-tardis-blue: #003f6b;
  --color-tardis-blue-50: #edf6ff;
  --color-tardis-blue-100: #dceeff;
  --color-tardis-blue-200: #b7dcff;
  --color-tardis-blue-300: #95c5f2;
  --color-tardis-blue-400: #70a5d5;
  --color-tardis-blue-500: #5188b9;
  --color-tardis-blue-600: #376c9a;
  --color-tardis-blue-700: #24547d;
  --color-tardis-blue-800: #003f6b;
  --color-tardis-blue-900: #0c304e;
  --color-tardis-blue-950: #051d32;
}