Blue Öyster Cult to Blasphemous Blue Color Palette

About this palette

Blue Öyster Cult to Blasphemous Blue is a 5-color cool, monochromatic palette: #506FF8 (Blue Öyster Cult), #2C3881 (Deep Space Royal), #AEC4FF (Pastel Blue), #839FF3 (Fennel Flower), #3B4EA6 (Blasphemous Blue). It mixes blue tones and feels cool overall. The strongest text pairing is #2C3881 on #AEC4FF with a contrast ratio of 6.10:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Öyster Cult	rgb(80, 111, 248)	hsl(229, 92%, 64%)
Deep Space Royal	rgb(44, 56, 129)	hsl(232, 49%, 34%)
Pastel Blue	rgb(174, 196, 255)	hsl(224, 100%, 84%)
Fennel Flower	rgb(131, 159, 243)	hsl(225, 82%, 73%)
Blasphemous Blue	rgb(59, 78, 166)	hsl(229, 48%, 44%)

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.10:1 Good#2C3881 on #AEC4FF
Aa6.10:1 Good#AEC4FF on #2C3881
Aa4.30:1 Poor#AEC4FF on #3B4EA6
Aa4.30:1 Poor#3B4EA6 on #AEC4FF
Aa4.13:1 Poor#2C3881 on #839FF3
Aa4.13:1 Poor#839FF3 on #2C3881

Color blindness preview

CSS variables

/* Blue Öyster Cult to Blasphemous Blue — https://swatchly.xyz/palette/506ff8-2c3881-aec4ff-839ff3-3b4ea6 */
:root {
  --blue-yster-cult: #506ff8;
  --deep-space-royal: #2c3881;
  --pastel-blue: #aec4ff;
  --fennel-flower: #839ff3;
  --blasphemous-blue: #3b4ea6;
}

Tailwind CSS v4

/* Blue Öyster Cult to Blasphemous Blue — https://swatchly.xyz/palette/506ff8-2c3881-aec4ff-839ff3-3b4ea6 */
@theme {
  --color-blue-yster-cult: #506ff8;
  --color-blue-yster-cult-50: #eff4ff;
  --color-blue-yster-cult-100: #e0e8ff;
  --color-blue-yster-cult-200: #c2d2ff;
  --color-blue-yster-cult-300: #a1b9ff;
  --color-blue-yster-cult-400: #7493ff;
  --color-blue-yster-cult-500: #506ff8;
  --color-blue-yster-cult-600: #3b54d7;
  --color-blue-yster-cult-700: #2c3fb6;
  --color-blue-yster-cult-800: #202e97;
  --color-blue-yster-cult-900: #17217b;
  --color-blue-yster-cult-950: #0c1254;
  --color-deep-space-royal: #2c3881;
  --color-deep-space-royal-50: #f2f5ff;
  --color-deep-space-royal-100: #e4ebff;
  --color-deep-space-royal-200: #cad6ff;
  --color-deep-space-royal-300: #abbdff;
  --color-deep-space-royal-400: #879ceb;
  --color-deep-space-royal-500: #6c7fcf;
  --color-deep-space-royal-600: #5364b0;
  --color-deep-space-royal-700: #3f4d92;
  --color-deep-space-royal-800: #2c3881;
  --color-deep-space-royal-900: #232c5f;
  --color-deep-space-royal-950: #141a3f;
  --color-pastel-blue: #aec4ff;
  --color-pastel-blue-50: #f4f7ff;
  --color-pastel-blue-100: #e8eeff;
  --color-pastel-blue-200: #cddbff;
  --color-pastel-blue-300: #aec4ff;
  --color-pastel-blue-400: #90a4da;
  --color-pastel-blue-500: #7387be;
  --color-pastel-blue-600: #596ca0;
  --color-pastel-blue-700: #445484;
  --color-pastel-blue-800: #33416a;
  --color-pastel-blue-900: #253154;
  --color-pastel-blue-950: #151e37;
  --color-fennel-flower: #839ff3;
  --color-fennel-flower-50: #f2f6ff;
  --color-fennel-flower-100: #e5ecff;
  --color-fennel-flower-200: #cad8ff;
  --color-fennel-flower-300: #aac1ff;
  --color-fennel-flower-400: #839ff3;
  --color-fennel-flower-500: #6983d4;
  --color-fennel-flower-600: #5067b5;
  --color-fennel-flower-700: #3c5097;
  --color-fennel-flower-800: #2c3d7b;
  --color-fennel-flower-900: #202e63;
  --color-fennel-flower-950: #121c41;
  --color-blasphemous-blue: #3b4ea6;
  --color-blasphemous-blue-50: #f1f5ff;
  --color-blasphemous-blue-100: #e4ebff;
  --color-blasphemous-blue-200: #c9d7ff;
  --color-blasphemous-blue-300: #abbfff;
  --color-blasphemous-blue-400: #839df8;
  --color-blasphemous-blue-500: #6881dd;
  --color-blasphemous-blue-600: #5066bf;
  --color-blasphemous-blue-700: #3b4ea6;
  --color-blasphemous-blue-800: #2d3c84;
  --color-blasphemous-blue-900: #212d6a;
  --color-blasphemous-blue-950: #121b47;
}