Blue Bay to Prophet Violet Color Palette

About this palette

Blue Bay to Prophet Violet is a 5-color cool palette: #539BE2 (Blue Bay), #00436A (Aegean Blue), #DBBEF0 (Beefy Pink), #221B46 (Azulado), #665AA9 (Prophet Violet). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #DBBEF0 on #221B46 with a contrast ratio of 9.62:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Bay	rgb(83, 155, 226)	hsl(210, 71%, 61%)
Aegean Blue	rgb(0, 67, 106)	hsl(202, 100%, 21%)
Beefy Pink	rgb(219, 190, 240)	hsl(275, 62%, 84%)
Azulado	rgb(34, 27, 70)	hsl(250, 44%, 19%)
Prophet Violet	rgb(102, 90, 169)	hsl(249, 31%, 51%)

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.62:1 Very good#DBBEF0 on #221B46
Aa9.62:1 Very good#221B46 on #DBBEF0
Aa6.28:1 Good#00436A on #DBBEF0
Aa6.28:1 Good#DBBEF0 on #00436A
Aa5.45:1 Good#539BE2 on #221B46
Aa5.45:1 Good#221B46 on #539BE2
Aa3.56:1 Poor#539BE2 on #00436A
Aa3.56:1 Poor#00436A on #539BE2

Color blindness preview

CSS variables

/* Blue Bay to Prophet Violet — https://swatchly.xyz/palette/539be2-00436a-dbbef0-221b46-665aa9 */
:root {
  --blue-bay: #539be2;
  --aegean-blue: #00436a;
  --beefy-pink: #dbbef0;
  --azulado: #221b46;
  --prophet-violet: #665aa9;
}

Tailwind CSS v4

/* Blue Bay to Prophet Violet — https://swatchly.xyz/palette/539be2-00436a-dbbef0-221b46-665aa9 */
@theme {
  --color-blue-bay: #539be2;
  --color-blue-bay-50: #e7f3ff;
  --color-blue-bay-100: #d2e8ff;
  --color-blue-bay-200: #abd4ff;
  --color-blue-bay-300: #7dbdfe;
  --color-blue-bay-400: #539be2;
  --color-blue-bay-500: #3881c6;
  --color-blue-bay-600: #1f68a9;
  --color-blue-bay-700: #0a528d;
  --color-blue-bay-800: #004173;
  --color-blue-bay-900: #00325c;
  --color-blue-bay-950: #00203e;
  --color-aegean-blue: #00436a;
  --color-aegean-blue-50: #edf7ff;
  --color-aegean-blue-100: #daeeff;
  --color-aegean-blue-200: #b4ddff;
  --color-aegean-blue-300: #95c7ee;
  --color-aegean-blue-400: #70a7d2;
  --color-aegean-blue-500: #528ab6;
  --color-aegean-blue-600: #386f98;
  --color-aegean-blue-700: #24577c;
  --color-aegean-blue-800: #00436a;
  --color-aegean-blue-900: #0c334e;
  --color-aegean-blue-950: #041f32;
  --color-beefy-pink: #dbbef0;
  --color-beefy-pink-50: #fcf9ff;
  --color-beefy-pink-100: #f8eeff;
  --color-beefy-pink-200: #ebd7fa;
  --color-beefy-pink-300: #dbbef0;
  --color-beefy-pink-400: #b89ecb;
  --color-beefy-pink-500: #9b80ae;
  --color-beefy-pink-600: #7e6491;
  --color-beefy-pink-700: #654d75;
  --color-beefy-pink-800: #4f3a5d;
  --color-beefy-pink-900: #3c2a48;
  --color-beefy-pink-950: #26192e;
  --color-azulado: #221b46;
  --color-azulado-50: #f4f4ff;
  --color-azulado-100: #e9e9ff;
  --color-azulado-200: #d4d2fc;
  --color-azulado-300: #bdbbea;
  --color-azulado-400: #9e9bce;
  --color-azulado-500: #8480b4;
  --color-azulado-600: #6a6698;
  --color-azulado-700: #55517e;
  --color-azulado-800: #433f67;
  --color-azulado-900: #353153;
  --color-azulado-950: #221b46;
  --color-prophet-violet: #665aa9;
  --color-prophet-violet-50: #f4f4ff;
  --color-prophet-violet-100: #e9e8ff;
  --color-prophet-violet-200: #d3d0ff;
  --color-prophet-violet-300: #bbb4ff;
  --color-prophet-violet-400: #9c92e4;
  --color-prophet-violet-500: #8075c7;
  --color-prophet-violet-600: #665aa9;
  --color-prophet-violet-700: #51458b;
  --color-prophet-violet-800: #3f3571;
  --color-prophet-violet-900: #30275b;
  --color-prophet-violet-950: #1e173c;
}