Quiet Abyss to Berry Jam Color Palette

About this palette

Quiet Abyss to Berry Jam is a 5-color dark, cool, gradient palette: #150031 (Quiet Abyss), #02253C (Midnight Dreams), #56002C (Merguez), #633677 (Galactic Grapevine), #67557B (Berry Jam). It mixes purple, blue, red tones and feels cool overall. The strongest text pairing is #150031 on #67557B with a contrast ratio of 2.94:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Abyss	rgb(21, 0, 49)	hsl(266, 100%, 10%)
Midnight Dreams	rgb(2, 37, 60)	hsl(204, 94%, 12%)
Merguez	rgb(86, 0, 44)	hsl(329, 100%, 17%)
Galactic Grapevine	rgb(99, 54, 119)	hsl(282, 38%, 34%)
Berry Jam	rgb(103, 85, 123)	hsl(268, 18%, 41%)

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

/* Quiet Abyss to Berry Jam — https://swatchly.xyz/palette/150031-02253c-56002c-633677-67557b */
:root {
  --quiet-abyss: #150031;
  --midnight-dreams: #02253c;
  --merguez: #56002c;
  --galactic-grapevine: #633677;
  --berry-jam: #67557b;
}

Tailwind CSS v4

/* Quiet Abyss to Berry Jam — https://swatchly.xyz/palette/150031-02253c-56002c-633677-67557b */
@theme {
  --color-quiet-abyss: #150031;
  --color-quiet-abyss-50: #f6f3ff;
  --color-quiet-abyss-100: #ede7ff;
  --color-quiet-abyss-200: #dbcfff;
  --color-quiet-abyss-300: #c5b7ee;
  --color-quiet-abyss-400: #a696d3;
  --color-quiet-abyss-500: #8877b3;
  --color-quiet-abyss-600: #6a5a92;
  --color-quiet-abyss-700: #504172;
  --color-quiet-abyss-800: #3a2d56;
  --color-quiet-abyss-900: #271e3c;
  --color-quiet-abyss-950: #150031;
  --color-midnight-dreams: #02253c;
  --color-midnight-dreams-50: #edf7ff;
  --color-midnight-dreams-100: #daeeff;
  --color-midnight-dreams-200: #c0dcf2;
  --color-midnight-dreams-300: #a6c5df;
  --color-midnight-dreams-400: #83a6c2;
  --color-midnight-dreams-500: #688ba8;
  --color-midnight-dreams-600: #4f718c;
  --color-midnight-dreams-700: #3c5b73;
  --color-midnight-dreams-800: #2c485d;
  --color-midnight-dreams-900: #20384b;
  --color-midnight-dreams-950: #02253c;
  --color-merguez: #56002c;
  --color-merguez-50: #fff1f5;
  --color-merguez-100: #ffe3eb;
  --color-merguez-200: #ffc5d7;
  --color-merguez-300: #f7a5c0;
  --color-merguez-400: #da81a0;
  --color-merguez-500: #bc6383;
  --color-merguez-600: #9c4868;
  --color-merguez-700: #7e3350;
  --color-merguez-800: #63233c;
  --color-merguez-900: #56002c;
  --color-merguez-950: #300b1a;
  --color-galactic-grapevine: #633677;
  --color-galactic-grapevine-50: #faf1ff;
  --color-galactic-grapevine-100: #f6e3ff;
  --color-galactic-grapevine-200: #ebc5fe;
  --color-galactic-grapevine-300: #d5aaea;
  --color-galactic-grapevine-400: #b687cc;
  --color-galactic-grapevine-500: #996aaf;
  --color-galactic-grapevine-600: #7b4f90;
  --color-galactic-grapevine-700: #633677;
  --color-galactic-grapevine-800: #4d2a5c;
  --color-galactic-grapevine-900: #3c1f49;
  --color-galactic-grapevine-950: #26112f;
  --color-berry-jam: #67557b;
  --color-berry-jam-50: #f8f2ff;
  --color-berry-jam-100: #f1e6ff;
  --color-berry-jam-200: #e1d2f2;
  --color-berry-jam-300: #cdbce0;
  --color-berry-jam-400: #b09dc5;
  --color-berry-jam-500: #9683ac;
  --color-berry-jam-600: #7d6a91;
  --color-berry-jam-700: #67557b;
  --color-berry-jam-800: #514262;
  --color-berry-jam-900: #3f324d;
  --color-berry-jam-950: #281e32;
}