Romanic Scene to Plummy color palette

3A044CRomanic Scene 342077Deep Space Rodeo 4A4080Queen of the Night Shift 001229Squid’s Ink 695D80Plummy

Open in generator Export PNG, PDF, ASE…

About this palette

Romanic Scene to Plummy is a 5-color dark, cool palette: #3A044C (Romanic Scene), #342077 (Deep Space Rodeo), #4A4080 (Queen of the Night Shift), #001229 (Squid’s Ink), #695D80 (Plummy). It mixes purple, black tones and feels cool overall. The strongest text pairing is #001229 on #695D80 with a contrast ratio of 3.11:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Romanic Scene	rgb(58, 4, 76)	hsl(285, 90%, 16%)
Deep Space Rodeo	rgb(52, 32, 119)	hsl(254, 58%, 30%)
Queen of the Night Shift	rgb(74, 64, 128)	hsl(249, 33%, 38%)
Squid’s Ink	rgb(0, 18, 41)	hsl(214, 100%, 8%)
Plummy	rgb(105, 93, 128)	hsl(261, 16%, 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.

Aa3.11:1 Poor#001229 on #695D80
Aa3.11:1 Poor#695D80 on #001229

Color blindness preview

CSS variables

/* Romanic Scene to Plummy — https://swatchly.xyz/palette/3a044c-342077-4a4080-001229-695d80 */
:root {
  --romanic-scene: #3a044c;
  --deep-space-rodeo: #342077;
  --queen-of-the-night-shift: #4a4080;
  --squid-s-ink: #001229;
  --plummy: #695d80;
}

Tailwind CSS v4

/* Romanic Scene to Plummy — https://swatchly.xyz/palette/3a044c-342077-4a4080-001229-695d80 */
@theme {
  --color-romanic-scene: #3a044c;
  --color-romanic-scene-50: #fbf1ff;
  --color-romanic-scene-100: #f6e3ff;
  --color-romanic-scene-200: #edc7ff;
  --color-romanic-scene-300: #dbacf0;
  --color-romanic-scene-400: #bd8ad4;
  --color-romanic-scene-500: #a36fba;
  --color-romanic-scene-600: #88569e;
  --color-romanic-scene-700: #704284;
  --color-romanic-scene-800: #5c326d;
  --color-romanic-scene-900: #4a2659;
  --color-romanic-scene-950: #3a044c;
  --color-deep-space-rodeo: #342077;
  --color-deep-space-rodeo-50: #f4f4ff;
  --color-deep-space-rodeo-100: #e9e9ff;
  --color-deep-space-rodeo-200: #d4d2ff;
  --color-deep-space-rodeo-300: #bbb7ff;
  --color-deep-space-rodeo-400: #9c94f1;
  --color-deep-space-rodeo-500: #8278d6;
  --color-deep-space-rodeo-600: #695db8;
  --color-deep-space-rodeo-700: #53489a;
  --color-deep-space-rodeo-800: #42367f;
  --color-deep-space-rodeo-900: #342077;
  --color-deep-space-rodeo-950: #1f1845;
  --color-queen-of-the-night-shift: #4a4080;
  --color-queen-of-the-night-shift-50: #f4f4ff;
  --color-queen-of-the-night-shift-100: #eae8ff;
  --color-queen-of-the-night-shift-200: #d5d2ff;
  --color-queen-of-the-night-shift-300: #bfbaf9;
  --color-queen-of-the-night-shift-400: #a29be0;
  --color-queen-of-the-night-shift-500: #8881c6;
  --color-queen-of-the-night-shift-600: #7068ab;
  --color-queen-of-the-night-shift-700: #5b5391;
  --color-queen-of-the-night-shift-800: #4a4080;
  --color-queen-of-the-night-shift-900: #393262;
  --color-queen-of-the-night-shift-950: #241e42;
  --color-squid-s-ink: #001229;
  --color-squid-s-ink-50: #eef6ff;
  --color-squid-s-ink-100: #deedff;
  --color-squid-s-ink-200: #c5daf2;
  --color-squid-s-ink-300: #acc4df;
  --color-squid-s-ink-400: #8aa4c2;
  --color-squid-s-ink-500: #6c86a4;
  --color-squid-s-ink-600: #506884;
  --color-squid-s-ink-700: #3a4f68;
  --color-squid-s-ink-800: #283a4e;
  --color-squid-s-ink-900: #1a2838;
  --color-squid-s-ink-950: #001229;
  --color-plummy: #695d80;
  --color-plummy-50: #f7f3ff;
  --color-plummy-100: #ede5ff;
  --color-plummy-200: #d9cfed;
  --color-plummy-300: #c1b6d8;
  --color-plummy-400: #a195ba;
  --color-plummy-500: #85789d;
  --color-plummy-600: #695d80;
  --color-plummy-700: #534967;
  --color-plummy-800: #413852;
  --color-plummy-900: #332b41;
  --color-plummy-950: #1f1a2a;
}