Orion Nebula to Caribbean Blue Color Palette

About this palette

Orion Nebula to Caribbean Blue is a 5-color vibrant, cool, neon palette: #9B54F0 (Orion Nebula), #009EEF (Out of the Blue), #D40048 (Demon Princess), #FFA071 (Butternut), #00C1DC (Caribbean Blue). It mixes purple, blue, red, orange, turquoise tones and feels cool overall. The strongest text pairing is #D40048 on #FFA071 with a contrast ratio of 2.70:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Orion Nebula	rgb(155, 84, 240)	hsl(267, 84%, 64%)
Out of the Blue	rgb(0, 158, 239)	hsl(200, 100%, 47%)
Demon Princess	rgb(212, 0, 72)	hsl(340, 100%, 42%)
Butternut	rgb(255, 160, 113)	hsl(20, 100%, 72%)
Caribbean Blue	rgb(0, 193, 220)	hsl(187, 100%, 43%)

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.

Color blindness preview

CSS variables

/* Orion Nebula to Caribbean Blue — https://swatchly.xyz/palette/9b54f0-009eef-d40048-ffa071-00c1dc */
:root {
  --orion-nebula: #9b54f0;
  --out-of-the-blue: #009eef;
  --demon-princess: #d40048;
  --butternut: #ffa071;
  --caribbean-blue: #00c1dc;
}

Tailwind CSS v4

/* Orion Nebula to Caribbean Blue — https://swatchly.xyz/palette/9b54f0-009eef-d40048-ffa071-00c1dc */
@theme {
  --color-orion-nebula: #9b54f0;
  --color-orion-nebula-50: #f6f2ff;
  --color-orion-nebula-100: #ede5ff;
  --color-orion-nebula-200: #ddcbff;
  --color-orion-nebula-300: #cbacff;
  --color-orion-nebula-400: #b37dff;
  --color-orion-nebula-500: #9b54f0;
  --color-orion-nebula-600: #8037cf;
  --color-orion-nebula-700: #6921af;
  --color-orion-nebula-800: #540f91;
  --color-orion-nebula-900: #420375;
  --color-orion-nebula-950: #2b004f;
  --color-out-of-the-blue: #009eef;
  --color-out-of-the-blue-50: #e4f3ff;
  --color-out-of-the-blue-100: #cde9ff;
  --color-out-of-the-blue-200: #a2d6ff;
  --color-out-of-the-blue-300: #69bfff;
  --color-out-of-the-blue-400: #009eef;
  --color-out-of-the-blue-500: #0084c8;
  --color-out-of-the-blue-600: #006aa3;
  --color-out-of-the-blue-700: #005583;
  --color-out-of-the-blue-800: #004369;
  --color-out-of-the-blue-900: #003454;
  --color-out-of-the-blue-950: #002238;
  --color-demon-princess: #d40048;
  --color-demon-princess-50: #fff1f2;
  --color-demon-princess-100: #ffe5e6;
  --color-demon-princess-200: #ffcbce;
  --color-demon-princess-300: #ffaab0;
  --color-demon-princess-400: #ff7284;
  --color-demon-princess-500: #f33961;
  --color-demon-princess-600: #d40048;
  --color-demon-princess-700: #aa0038;
  --color-demon-princess-800: #87002a;
  --color-demon-princess-900: #69001f;
  --color-demon-princess-950: #450011;
  --color-butternut: #ffa071;
  --color-butternut-50: #ffeee7;
  --color-butternut-100: #ffe0d1;
  --color-butternut-200: #ffc3a7;
  --color-butternut-300: #ffa071;
  --color-butternut-400: #dc8356;
  --color-butternut-500: #c06738;
  --color-butternut-600: #a24e1e;
  --color-butternut-700: #863a08;
  --color-butternut-800: #6c2b00;
  --color-butternut-900: #562000;
  --color-butternut-950: #381200;
  --color-caribbean-blue: #00c1dc;
  --color-caribbean-blue-50: #eefcff;
  --color-caribbean-blue-100: #d7f8ff;
  --color-caribbean-blue-200: #9deeff;
  --color-caribbean-blue-300: #6edcf2;
  --color-caribbean-blue-400: #00c1dc;
  --color-caribbean-blue-500: #00a0b7;
  --color-caribbean-blue-600: #008193;
  --color-caribbean-blue-700: #006675;
  --color-caribbean-blue-800: #004f5b;
  --color-caribbean-blue-900: #003c45;
  --color-caribbean-blue-950: #00242b;
}