Glossy Black to Royal Fig Color Palette

About this palette

Glossy Black to Royal Fig is a 5-color dark, cool, gradient palette: #110020 (Glossy Black), #2E131B (Black Cherry), #481757 (Plunged Into Darkness), #632B6A (Imperial), #7D5962 (Royal Fig). It mixes purple, red tones and feels cool overall. The strongest text pairing is #110020 on #7D5962 with a contrast ratio of 3.33:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glossy Black	rgb(17, 0, 32)	hsl(272, 100%, 6%)
Black Cherry	rgb(46, 19, 27)	hsl(342, 42%, 13%)
Plunged Into Darkness	rgb(72, 23, 87)	hsl(286, 58%, 22%)
Imperial	rgb(99, 43, 106)	hsl(293, 42%, 29%)
Royal Fig	rgb(125, 89, 98)	hsl(345, 17%, 42%)

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.33:1 Poor#110020 on #7D5962
Aa3.33:1 Poor#7D5962 on #110020

Color blindness preview

CSS variables

/* Glossy Black to Royal Fig — https://swatchly.xyz/palette/110020-2e131b-481757-632b6a-7d5962 */
:root {
  --glossy-black: #110020;
  --black-cherry: #2e131b;
  --plunged-into-darkness: #481757;
  --imperial: #632b6a;
  --royal-fig: #7d5962;
}

Tailwind CSS v4

/* Glossy Black to Royal Fig — https://swatchly.xyz/palette/110020-2e131b-481757-632b6a-7d5962 */
@theme {
  --color-glossy-black: #110020;
  --color-glossy-black-50: #f8f2ff;
  --color-glossy-black-100: #f1e5ff;
  --color-glossy-black-200: #e0cff4;
  --color-glossy-black-300: #cbb7e1;
  --color-glossy-black-400: #ac97c4;
  --color-glossy-black-500: #8c76a4;
  --color-glossy-black-600: #6c5882;
  --color-glossy-black-700: #503f63;
  --color-glossy-black-800: #382a46;
  --color-glossy-black-900: #23192e;
  --color-glossy-black-950: #110020;
  --color-black-cherry: #2e131b;
  --color-black-cherry-50: #fff1f4;
  --color-black-cherry-100: #fde4e9;
  --color-black-cherry-200: #eccfd5;
  --color-black-cherry-300: #d8b7bf;
  --color-black-cherry-400: #ba979f;
  --color-black-cherry-500: #9e7b83;
  --color-black-cherry-600: #826068;
  --color-black-cherry-700: #684a52;
  --color-black-cherry-800: #52383f;
  --color-black-cherry-900: #3f2a2f;
  --color-black-cherry-950: #2e131b;
  --color-plunged-into-darkness: #481757;
  --color-plunged-into-darkness-50: #fbf1ff;
  --color-plunged-into-darkness-100: #f8e3ff;
  --color-plunged-into-darkness-200: #efc6fd;
  --color-plunged-into-darkness-300: #dbadec;
  --color-plunged-into-darkness-400: #be8bcf;
  --color-plunged-into-darkness-500: #a26eb3;
  --color-plunged-into-darkness-600: #855496;
  --color-plunged-into-darkness-700: #6c3f7b;
  --color-plunged-into-darkness-800: #552e62;
  --color-plunged-into-darkness-900: #481757;
  --color-plunged-into-darkness-950: #2a1232;
  --color-imperial: #632b6a;
  --color-imperial-50: #fef0ff;
  --color-imperial-100: #fce1ff;
  --color-imperial-200: #f4c4fa;
  --color-imperial-300: #e2ace8;
  --color-imperial-400: #c58acc;
  --color-imperial-500: #aa6eb1;
  --color-imperial-600: #8f5595;
  --color-imperial-700: #75407c;
  --color-imperial-800: #632b6a;
  --color-imperial-900: #4b2350;
  --color-imperial-950: #311434;
  --color-royal-fig: #7d5962;
  --color-royal-fig-50: #fff1f4;
  --color-royal-fig-100: #fde2e8;
  --color-royal-fig-200: #ebcbd2;
  --color-royal-fig-300: #d6b2ba;
  --color-royal-fig-400: #b7909a;
  --color-royal-fig-500: #9a747d;
  --color-royal-fig-600: #7d5962;
  --color-royal-fig-700: #65454d;
  --color-royal-fig-800: #50353c;
  --color-royal-fig-900: #3f282e;
  --color-royal-fig-950: #28181c;
}