Baby Blue to Aegean Blue Color Palette

About this palette

Baby Blue to Aegean Blue is a 5-color cool, monochromatic, gradient palette: #A1D5FF (Baby Blue), #4BACF2 (Cerulean), #0087C6 (Way Beyond the Blue), #006891 (Hydra), #00426C (Aegean Blue). It mixes blue tones and feels cool overall. The strongest text pairing is #A1D5FF on #00426C with a contrast ratio of 6.75:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baby Blue	rgb(161, 213, 255)	hsl(207, 100%, 82%)
Cerulean	rgb(75, 172, 242)	hsl(205, 87%, 62%)
Way Beyond the Blue	rgb(0, 135, 198)	hsl(199, 100%, 39%)
Hydra	rgb(0, 104, 145)	hsl(197, 100%, 28%)
Aegean Blue	rgb(0, 66, 108)	hsl(203, 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.

Aa6.75:1 Good#A1D5FF on #00426C
Aa6.75:1 Good#00426C on #A1D5FF
Aa4.25:1 Poor#4BACF2 on #00426C
Aa4.25:1 Poor#00426C on #4BACF2
Aa3.98:1 Poor#A1D5FF on #006891
Aa3.98:1 Poor#006891 on #A1D5FF

Color blindness preview

CSS variables

/* Baby Blue to Aegean Blue — https://swatchly.xyz/palette/a1d5ff-4bacf2-0087c6-006891-00426c */
:root {
  --baby-blue: #a1d5ff;
  --cerulean: #4bacf2;
  --way-beyond-the-blue: #0087c6;
  --hydra: #006891;
  --aegean-blue: #00426c;
}

Tailwind CSS v4

/* Baby Blue to Aegean Blue — https://swatchly.xyz/palette/a1d5ff-4bacf2-0087c6-006891-00426c */
@theme {
  --color-baby-blue: #a1d5ff;
  --color-baby-blue-50: #e1f1ff;
  --color-baby-blue-100: #cbe8ff;
  --color-baby-blue-200: #a1d5ff;
  --color-baby-blue-300: #92bfe4;
  --color-baby-blue-400: #71a2c8;
  --color-baby-blue-500: #5688ae;
  --color-baby-blue-600: #3e6e93;
  --color-baby-blue-700: #2c587a;
  --color-baby-blue-800: #1e4663;
  --color-baby-blue-900: #14364f;
  --color-baby-blue-950: #092133;
  --color-cerulean: #4bacf2;
  --color-cerulean-50: #eef7ff;
  --color-cerulean-100: #dcefff;
  --color-cerulean-200: #b7dfff;
  --color-cerulean-300: #88cbff;
  --color-cerulean-400: #4bacf2;
  --color-cerulean-500: #298fd3;
  --color-cerulean-600: #0073b2;
  --color-cerulean-700: #005b8e;
  --color-cerulean-800: #004770;
  --color-cerulean-900: #003658;
  --color-cerulean-950: #002139;
  --color-way-beyond-the-blue: #0087c6;
  --color-way-beyond-the-blue-50: #e9f6ff;
  --color-way-beyond-the-blue-100: #d3ecff;
  --color-way-beyond-the-blue-200: #a7dbff;
  --color-way-beyond-the-blue-300: #6fc5ff;
  --color-way-beyond-the-blue-400: #3ca4e4;
  --color-way-beyond-the-blue-500: #0087c6;
  --color-way-beyond-the-blue-600: #006da1;
  --color-way-beyond-the-blue-700: #005681;
  --color-way-beyond-the-blue-800: #004466;
  --color-way-beyond-the-blue-900: #003451;
  --color-way-beyond-the-blue-950: #002135;
  --color-hydra: #006891;
  --color-hydra-50: #ebf7ff;
  --color-hydra-100: #d6f0ff;
  --color-hydra-200: #b0e1ff;
  --color-hydra-300: #8ccff5;
  --color-hydra-400: #65b1db;
  --color-hydra-500: #4697c3;
  --color-hydra-600: #287ea8;
  --color-hydra-700: #006891;
  --color-hydra-800: #005173;
  --color-hydra-900: #003f59;
  --color-hydra-950: #00273a;
  --color-aegean-blue: #00426c;
  --color-aegean-blue-50: #edf6ff;
  --color-aegean-blue-100: #dbeeff;
  --color-aegean-blue-200: #b6ddff;
  --color-aegean-blue-300: #95c6f1;
  --color-aegean-blue-400: #70a6d5;
  --color-aegean-blue-500: #528ab8;
  --color-aegean-blue-600: #386e9a;
  --color-aegean-blue-700: #24567e;
  --color-aegean-blue-800: #00426c;
  --color-aegean-blue-900: #0c334f;
  --color-aegean-blue-950: #041f33;
}