Bruised Plum to Veil of Cinder Color Palette

About this palette

Bruised Plum to Veil of Cinder is a 4-color dark, warm palette: #321B20 (Bruised Plum), #2B2D78 (Twilight Express), #240021 (Black Sabbath), #7E5057 (Veil of Cinder). It mixes red, purple tones and feels warm overall. The strongest text pairing is #240021 on #7E5057 with a contrast ratio of 2.89:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bruised Plum	rgb(50, 27, 32)	hsl(347, 30%, 15%)
Twilight Express	rgb(43, 45, 120)	hsl(238, 47%, 32%)
Black Sabbath	rgb(36, 0, 33)	hsl(305, 100%, 7%)
Veil of Cinder	rgb(126, 80, 87)	hsl(351, 22%, 40%)

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

/* Bruised Plum to Veil of Cinder — https://swatchly.xyz/palette/321b20-2b2d78-240021-7e5057 */
:root {
  --bruised-plum: #321b20;
  --twilight-express: #2b2d78;
  --black-sabbath: #240021;
  --veil-of-cinder: #7e5057;
}

Tailwind CSS v4

/* Bruised Plum to Veil of Cinder — https://swatchly.xyz/palette/321b20-2b2d78-240021-7e5057 */
@theme {
  --color-bruised-plum: #321b20;
  --color-bruised-plum-50: #fff1f3;
  --color-bruised-plum-100: #fae5e9;
  --color-bruised-plum-200: #e9d0d5;
  --color-bruised-plum-300: #d4b9be;
  --color-bruised-plum-400: #b6999e;
  --color-bruised-plum-500: #9b7e83;
  --color-bruised-plum-600: #81656a;
  --color-bruised-plum-700: #695054;
  --color-bruised-plum-800: #543e42;
  --color-bruised-plum-900: #433034;
  --color-bruised-plum-950: #321b20;
  --color-twilight-express: #2b2d78;
  --color-twilight-express-50: #f2f5ff;
  --color-twilight-express-100: #e6eaff;
  --color-twilight-express-200: #cdd5ff;
  --color-twilight-express-300: #b0bcff;
  --color-twilight-express-400: #8f9bed;
  --color-twilight-express-500: #7580d3;
  --color-twilight-express-600: #5d67b6;
  --color-twilight-express-700: #4a519a;
  --color-twilight-express-800: #3a4081;
  --color-twilight-express-900: #2b2d78;
  --color-twilight-express-950: #1b1e49;
  --color-black-sabbath: #240021;
  --color-black-sabbath-50: #fff0fc;
  --color-black-sabbath-100: #ffe0fa;
  --color-black-sabbath-200: #f0cae9;
  --color-black-sabbath-300: #dcb1d5;
  --color-black-sabbath-400: #bf90b7;
  --color-black-sabbath-500: #a07199;
  --color-black-sabbath-600: #81557a;
  --color-black-sabbath-700: #643e5f;
  --color-black-sabbath-800: #4b2b47;
  --color-black-sabbath-900: #351c32;
  --color-black-sabbath-950: #240021;
  --color-veil-of-cinder: #7e5057;
  --color-veil-of-cinder-50: #fff1f3;
  --color-veil-of-cinder-100: #ffe3e6;
  --color-veil-of-cinder-200: #f6ced3;
  --color-veil-of-cinder-300: #e4b7bd;
  --color-veil-of-cinder-400: #c9989f;
  --color-veil-of-cinder-500: #af7e85;
  --color-veil-of-cinder-600: #95656c;
  --color-veil-of-cinder-700: #7e5057;
  --color-veil-of-cinder-800: #643d43;
  --color-veil-of-cinder-900: #4f2e33;
  --color-veil-of-cinder-950: #331b1f;
}