Arcane Brew to Flash in the Pan Color Palette

About this palette

Arcane Brew to Flash in the Pan is a 4-color vibrant, neon palette: #6955D4 (Arcane Brew), #0093E5 (Out of the Blue), #F554C2 (Kinky Pinky), #FF997E (Flash in the Pan). It mixes purple, blue, pink tones and feels balanced overall. The strongest text pairing is #6955D4 on #FF997E with a contrast ratio of 2.63:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Arcane Brew	rgb(105, 85, 212)	hsl(249, 60%, 58%)
Out of the Blue	rgb(0, 147, 229)	hsl(201, 100%, 45%)
Kinky Pinky	rgb(245, 84, 194)	hsl(319, 89%, 65%)
Flash in the Pan	rgb(255, 153, 126)	hsl(13, 100%, 75%)

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

/* Arcane Brew to Flash in the Pan — https://swatchly.xyz/palette/6955d4-0093e5-f554c2-ff997e */
:root {
  --arcane-brew: #6955d4;
  --out-of-the-blue: #0093e5;
  --kinky-pinky: #f554c2;
  --flash-in-the-pan: #ff997e;
}

Tailwind CSS v4

/* Arcane Brew to Flash in the Pan — https://swatchly.xyz/palette/6955d4-0093e5-f554c2-ff997e */
@theme {
  --color-arcane-brew: #6955d4;
  --color-arcane-brew-50: #f4f4ff;
  --color-arcane-brew-100: #e9e9ff;
  --color-arcane-brew-200: #d4d4ff;
  --color-arcane-brew-300: #bcbaff;
  --color-arcane-brew-400: #9c93ff;
  --color-arcane-brew-500: #8171f2;
  --color-arcane-brew-600: #6955d4;
  --color-arcane-brew-700: #533fb2;
  --color-arcane-brew-800: #412d93;
  --color-arcane-brew-900: #321f77;
  --color-arcane-brew-950: #1f1050;
  --color-out-of-the-blue: #0093e5;
  --color-out-of-the-blue-50: #eff7ff;
  --color-out-of-the-blue-100: #dff0ff;
  --color-out-of-the-blue-200: #bbe0ff;
  --color-out-of-the-blue-300: #8fccff;
  --color-out-of-the-blue-400: #42affe;
  --color-out-of-the-blue-500: #0093e5;
  --color-out-of-the-blue-600: #0076ba;
  --color-out-of-the-blue-700: #005e94;
  --color-out-of-the-blue-800: #004975;
  --color-out-of-the-blue-900: #00375b;
  --color-out-of-the-blue-950: #00223b;
  --color-kinky-pinky: #f554c2;
  --color-kinky-pinky-50: #ffeef8;
  --color-kinky-pinky-100: #ffdef1;
  --color-kinky-pinky-200: #ffbee4;
  --color-kinky-pinky-300: #ff94d7;
  --color-kinky-pinky-400: #f554c2;
  --color-kinky-pinky-500: #d633a6;
  --color-kinky-pinky-600: #b5078a;
  --color-kinky-pinky-700: #92006f;
  --color-kinky-pinky-800: #740057;
  --color-kinky-pinky-900: #5c0044;
  --color-kinky-pinky-950: #3d002c;
  --color-flash-in-the-pan: #ff997e;
  --color-flash-in-the-pan-50: #ffece7;
  --color-flash-in-the-pan-100: #ffdcd3;
  --color-flash-in-the-pan-200: #ffbead;
  --color-flash-in-the-pan-300: #ff997e;
  --color-flash-in-the-pan-400: #dc7c63;
  --color-flash-in-the-pan-500: #c16148;
  --color-flash-in-the-pan-600: #a34931;
  --color-flash-in-the-pan-700: #873520;
  --color-flash-in-the-pan-800: #6f2613;
  --color-flash-in-the-pan-900: #591b0a;
  --color-flash-in-the-pan-950: #3b0e04;
}