Broad Daylight to Aegean Blue Color Palette

About this palette

Broad Daylight to Aegean Blue is a 5-color cool, gradient palette: #B3DEFF (Broad Daylight), #85B5FF (Fly Away), #836FC6 (Venus Violet), #005BDB (Frosted Blueberries), #00476B (Aegean Blue). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #B3DEFF on #00476B with a contrast ratio of 7.01:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Broad Daylight	rgb(179, 222, 255)	hsl(206, 100%, 85%)
Fly Away	rgb(133, 181, 255)	hsl(216, 100%, 76%)
Venus Violet	rgb(131, 111, 198)	hsl(254, 43%, 61%)
Frosted Blueberries	rgb(0, 91, 219)	hsl(215, 100%, 43%)
Aegean Blue	rgb(0, 71, 107)	hsl(200, 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.

Aa7.01:1 Very good#B3DEFF on #00476B
Aa7.01:1 Very good#00476B on #B3DEFF
Aa4.76:1 Good#85B5FF on #00476B
Aa4.76:1 Good#00476B on #85B5FF
Aa4.21:1 Poor#B3DEFF on #005BDB
Aa4.21:1 Poor#005BDB on #B3DEFF

Color blindness preview

CSS variables

/* Broad Daylight to Aegean Blue — https://swatchly.xyz/palette/b3deff-85b5ff-836fc6-005bdb-00476b */
:root {
  --broad-daylight: #b3deff;
  --fly-away: #85b5ff;
  --venus-violet: #836fc6;
  --frosted-blueberries: #005bdb;
  --aegean-blue: #00476b;
}

Tailwind CSS v4

/* Broad Daylight to Aegean Blue — https://swatchly.xyz/palette/b3deff-85b5ff-836fc6-005bdb-00476b */
@theme {
  --color-broad-daylight: #b3deff;
  --color-broad-daylight-50: #edf7ff;
  --color-broad-daylight-100: #daefff;
  --color-broad-daylight-200: #b3deff;
  --color-broad-daylight-300: #a3c6e2;
  --color-broad-daylight-400: #80a7c5;
  --color-broad-daylight-500: #638caa;
  --color-broad-daylight-600: #4a718d;
  --color-broad-daylight-700: #365973;
  --color-broad-daylight-800: #27465d;
  --color-broad-daylight-900: #1b3649;
  --color-broad-daylight-950: #0e212f;
  --color-fly-away: #85b5ff;
  --color-fly-away-50: #e5efff;
  --color-fly-away-100: #d1e3ff;
  --color-fly-away-200: #aeceff;
  --color-fly-away-300: #85b5ff;
  --color-fly-away-400: #6a98de;
  --color-fly-away-500: #517ec4;
  --color-fly-away-600: #3b65a7;
  --color-fly-away-700: #2a508c;
  --color-fly-away-800: #1d3f74;
  --color-fly-away-900: #14325f;
  --color-fly-away-950: #091e3f;
  --color-venus-violet: #836fc6;
  --color-venus-violet-50: #f4f2ff;
  --color-venus-violet-100: #e9e5ff;
  --color-venus-violet-200: #d5ccff;
  --color-venus-violet-300: #beafff;
  --color-venus-violet-400: #9f8ce3;
  --color-venus-violet-500: #836fc6;
  --color-venus-violet-600: #6a56a8;
  --color-venus-violet-700: #55428c;
  --color-venus-violet-800: #433172;
  --color-venus-violet-900: #34255c;
  --color-venus-violet-950: #20153d;
  --color-frosted-blueberries: #005bdb;
  --color-frosted-blueberries-50: #f0f6ff;
  --color-frosted-blueberries-100: #dfebff;
  --color-frosted-blueberries-200: #bed7ff;
  --color-frosted-blueberries-300: #98bfff;
  --color-frosted-blueberries-400: #609cff;
  --color-frosted-blueberries-500: #2a79fc;
  --color-frosted-blueberries-600: #005bdb;
  --color-frosted-blueberries-700: #0048b0;
  --color-frosted-blueberries-800: #00378c;
  --color-frosted-blueberries-900: #002a6f;
  --color-frosted-blueberries-950: #00194a;
  --color-aegean-blue: #00476b;
  --color-aegean-blue-50: #ecf7ff;
  --color-aegean-blue-100: #d9efff;
  --color-aegean-blue-200: #b2defe;
  --color-aegean-blue-300: #95c8ec;
  --color-aegean-blue-400: #70a9d0;
  --color-aegean-blue-500: #528db5;
  --color-aegean-blue-600: #387298;
  --color-aegean-blue-700: #245a7d;
  --color-aegean-blue-800: #00476b;
  --color-aegean-blue-900: #0b3650;
  --color-aegean-blue-950: #042234;
}