Cloudless to Her Highness Color Palette

About this palette

Cloudless to Her Highness is a 5-color cool, gradient palette: #DAE9FF (Cloudless), #00B8F1 (Blue Bikini), #4D90D5 (Magical Merlin), #1F677F (Sea Goddess), #3F3068 (Her Highness). It mixes gray, blue, purple tones and feels cool overall. The strongest text pairing is #DAE9FF on #3F3068 with a contrast ratio of 9.31:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cloudless	rgb(218, 233, 255)	hsl(216, 100%, 93%)
Blue Bikini	rgb(0, 184, 241)	hsl(194, 100%, 47%)
Magical Merlin	rgb(77, 144, 213)	hsl(210, 62%, 57%)
Sea Goddess	rgb(31, 103, 127)	hsl(195, 61%, 31%)
Her Highness	rgb(63, 48, 104)	hsl(256, 37%, 30%)

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.31:1 Very good#DAE9FF on #3F3068
Aa9.31:1 Very good#3F3068 on #DAE9FF
Aa5.17:1 Good#DAE9FF on #1F677F
Aa5.17:1 Good#1F677F on #DAE9FF
Aa4.98:1 Good#00B8F1 on #3F3068
Aa4.98:1 Good#3F3068 on #00B8F1
Aa3.42:1 Poor#4D90D5 on #3F3068
Aa3.42:1 Poor#3F3068 on #4D90D5

Color blindness preview

CSS variables

/* Cloudless to Her Highness — https://swatchly.xyz/palette/dae9ff-00b8f1-4d90d5-1f677f-3f3068 */
:root {
  --cloudless: #dae9ff;
  --blue-bikini: #00b8f1;
  --magical-merlin: #4d90d5;
  --sea-goddess: #1f677f;
  --her-highness: #3f3068;
}

Tailwind CSS v4

/* Cloudless to Her Highness — https://swatchly.xyz/palette/dae9ff-00b8f1-4d90d5-1f677f-3f3068 */
@theme {
  --color-cloudless: #dae9ff;
  --color-cloudless-50: #ebf3ff;
  --color-cloudless-100: #dae9ff;
  --color-cloudless-200: #cad6e6;
  --color-cloudless-300: #b3c0d2;
  --color-cloudless-400: #93a1b5;
  --color-cloudless-500: #79869a;
  --color-cloudless-600: #5f6c7f;
  --color-cloudless-700: #4b5667;
  --color-cloudless-800: #394352;
  --color-cloudless-900: #2b3340;
  --color-cloudless-950: #1a2029;
  --color-blue-bikini: #00b8f1;
  --color-blue-bikini-50: #effaff;
  --color-blue-bikini-100: #dcf3ff;
  --color-blue-bikini-200: #b1e5ff;
  --color-blue-bikini-300: #76d4ff;
  --color-blue-bikini-400: #00b8f1;
  --color-blue-bikini-500: #0099c9;
  --color-blue-bikini-600: #007ba2;
  --color-blue-bikini-700: #006181;
  --color-blue-bikini-800: #004b65;
  --color-blue-bikini-900: #00394e;
  --color-blue-bikini-950: #002331;
  --color-magical-merlin: #4d90d5;
  --color-magical-merlin-50: #f0f7ff;
  --color-magical-merlin-100: #e1efff;
  --color-magical-merlin-200: #c0deff;
  --color-magical-merlin-300: #99caff;
  --color-magical-merlin-400: #6cabee;
  --color-magical-merlin-500: #4d90d5;
  --color-magical-merlin-600: #3173b6;
  --color-magical-merlin-700: #1a5b97;
  --color-magical-merlin-800: #09467b;
  --color-magical-merlin-900: #013562;
  --color-magical-merlin-950: #002140;
  --color-sea-goddess: #1f677f;
  --color-sea-goddess-50: #e8f8ff;
  --color-sea-goddess-100: #d0f1ff;
  --color-sea-goddess-200: #b1e2f6;
  --color-sea-goddess-300: #96cee4;
  --color-sea-goddess-400: #71b1c9;
  --color-sea-goddess-500: #5397b0;
  --color-sea-goddess-600: #397d95;
  --color-sea-goddess-700: #1f677f;
  --color-sea-goddess-800: #125165;
  --color-sea-goddess-900: #063e50;
  --color-sea-goddess-950: #002734;
  --color-her-highness: #3f3068;
  --color-her-highness-50: #f5f3ff;
  --color-her-highness-100: #ece8ff;
  --color-her-highness-200: #d9d0ff;
  --color-her-highness-300: #c1b6f0;
  --color-her-highness-400: #a194d3;
  --color-her-highness-500: #8577b6;
  --color-her-highness-600: #6a5c97;
  --color-her-highness-700: #52467a;
  --color-her-highness-800: #3f3068;
  --color-her-highness-900: #2f264c;
  --color-her-highness-950: #1d1630;
}