Mysterious Depths to Bruise Color Palette

About this palette

Mysterious Depths to Bruise is a 5-color dark, cool palette: #080929 (Mysterious Depths), #001D28 (Oxford by Night), #003F48 (Rich Black), #5F2F6F (Imperial), #833A74 (Bruise). It mixes purple, blue, turquoise, pink tones and feels cool overall. The strongest text pairing is #080929 on #833A74 with a contrast ratio of 2.61:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mysterious Depths	rgb(8, 9, 41)	hsl(238, 67%, 10%)
Oxford by Night	rgb(0, 29, 40)	hsl(196, 100%, 8%)
Rich Black	rgb(0, 63, 72)	hsl(188, 100%, 14%)
Imperial	rgb(95, 47, 111)	hsl(285, 41%, 31%)
Bruise	rgb(131, 58, 116)	hsl(312, 39%, 37%)

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

/* Mysterious Depths to Bruise — https://swatchly.xyz/palette/080929-001d28-003f48-5f2f6f-833a74 */
:root {
  --mysterious-depths: #080929;
  --oxford-by-night: #001d28;
  --rich-black: #003f48;
  --imperial: #5f2f6f;
  --bruise: #833a74;
}

Tailwind CSS v4

/* Mysterious Depths to Bruise — https://swatchly.xyz/palette/080929-001d28-003f48-5f2f6f-833a74 */
@theme {
  --color-mysterious-depths: #080929;
  --color-mysterious-depths-50: #f2f5ff;
  --color-mysterious-depths-100: #e5eaff;
  --color-mysterious-depths-200: #ced6f7;
  --color-mysterious-depths-300: #b6bfe5;
  --color-mysterious-depths-400: #969fc8;
  --color-mysterious-depths-500: #7780a9;
  --color-mysterious-depths-600: #5a6288;
  --color-mysterious-depths-700: #42486a;
  --color-mysterious-depths-800: #2e334e;
  --color-mysterious-depths-900: #1e2236;
  --color-mysterious-depths-950: #080929;
  --color-oxford-by-night: #001d28;
  --color-oxford-by-night-50: #e9f8ff;
  --color-oxford-by-night-100: #daeff9;
  --color-oxford-by-night-200: #c3dce7;
  --color-oxford-by-night-300: #aac6d3;
  --color-oxford-by-night-400: #88a7b5;
  --color-oxford-by-night-500: #6b8a98;
  --color-oxford-by-night-600: #506f7c;
  --color-oxford-by-night-700: #3b5662;
  --color-oxford-by-night-800: #2a424c;
  --color-oxford-by-night-900: #1d3139;
  --color-oxford-by-night-950: #001d28;
  --color-rich-black: #003f48;
  --color-rich-black-50: #e2faff;
  --color-rich-black-100: #d1f2f9;
  --color-rich-black-200: #b8e0e8;
  --color-rich-black-300: #9ccad3;
  --color-rich-black-400: #79acb6;
  --color-rich-black-500: #5d929c;
  --color-rich-black-600: #437881;
  --color-rich-black-700: #30616a;
  --color-rich-black-800: #214d55;
  --color-rich-black-900: #003f48;
  --color-rich-black-950: #0a272c;
  --color-imperial: #5f2f6f;
  --color-imperial-50: #fbf1ff;
  --color-imperial-100: #f7e3ff;
  --color-imperial-200: #efc6fd;
  --color-imperial-300: #dcaeec;
  --color-imperial-400: #bf8dd1;
  --color-imperial-500: #a572b7;
  --color-imperial-600: #89589b;
  --color-imperial-700: #714481;
  --color-imperial-800: #5f2f6f;
  --color-imperial-900: #482654;
  --color-imperial-950: #2f1537;
  --color-bruise: #833a74;
  --color-bruise-50: #fff0fb;
  --color-bruise-100: #ffe1f6;
  --color-bruise-200: #ffc2ef;
  --color-bruise-300: #eea8dd;
  --color-bruise-400: #d386c0;
  --color-bruise-500: #b86aa6;
  --color-bruise-600: #9b518b;
  --color-bruise-700: #833a74;
  --color-bruise-800: #682c5c;
  --color-bruise-900: #521f48;
  --color-bruise-950: #36102e;
}