Soulless to Royal Fig Color Palette

About this palette

Soulless to Royal Fig is a 4-color dark, warm palette: #181100 (Soulless), #3D1F00 (Medium Roast), #463900 (Dark Olive), #795B6B (Royal Fig). It mixes black, brown, red tones and feels warm overall. The strongest text pairing is #181100 on #795B6B with a contrast ratio of 3.15:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soulless	rgb(24, 17, 0)	hsl(42, 100%, 5%)
Medium Roast	rgb(61, 31, 0)	hsl(30, 100%, 12%)
Dark Olive	rgb(70, 57, 0)	hsl(49, 100%, 14%)
Royal Fig	rgb(121, 91, 107)	hsl(328, 14%, 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.15:1 Poor#181100 on #795B6B
Aa3.15:1 Poor#795B6B on #181100

Color blindness preview

CSS variables

/* Soulless to Royal Fig — https://swatchly.xyz/palette/181100-3d1f00-463900-795b6b */
:root {
  --soulless: #181100;
  --medium-roast: #3d1f00;
  --dark-olive: #463900;
  --royal-fig: #795b6b;
}

Tailwind CSS v4

/* Soulless to Royal Fig — https://swatchly.xyz/palette/181100-3d1f00-463900-795b6b */
@theme {
  --color-soulless: #181100;
  --color-soulless-50: #faf5e6;
  --color-soulless-100: #f1ebda;
  --color-soulless-200: #ded7c4;
  --color-soulless-300: #c8c1aa;
  --color-soulless-400: #aaa189;
  --color-soulless-500: #8b836a;
  --color-soulless-600: #6e664f;
  --color-soulless-700: #544d39;
  --color-soulless-800: #3e3827;
  --color-soulless-900: #2b2619;
  --color-soulless-950: #181100;
  --color-medium-roast: #3d1f00;
  --color-medium-roast-50: #fff3e9;
  --color-medium-roast-100: #ffe6d2;
  --color-medium-roast-200: #efd1b9;
  --color-medium-roast-300: #dbba9e;
  --color-medium-roast-400: #be997b;
  --color-medium-roast-500: #a48060;
  --color-medium-roast-600: #8a6749;
  --color-medium-roast-700: #725236;
  --color-medium-roast-800: #5e4228;
  --color-medium-roast-900: #4d341e;
  --color-medium-roast-950: #3d1f00;
  --color-dark-olive: #463900;
  --color-dark-olive-50: #fdf5d8;
  --color-dark-olive-100: #f4ebcb;
  --color-dark-olive-200: #e2d8b1;
  --color-dark-olive-300: #cdc194;
  --color-dark-olive-400: #b0a372;
  --color-dark-olive-500: #978956;
  --color-dark-olive-600: #7d6f3e;
  --color-dark-olive-700: #675a2b;
  --color-dark-olive-800: #53481d;
  --color-dark-olive-900: #463900;
  --color-dark-olive-950: #2c2408;
  --color-royal-fig: #795b6b;
  --color-royal-fig-50: #fff0f8;
  --color-royal-fig-100: #f9e3ee;
  --color-royal-fig-200: #e7ccda;
  --color-royal-fig-300: #d1b4c3;
  --color-royal-fig-400: #b292a3;
  --color-royal-fig-500: #957686;
  --color-royal-fig-600: #795b6b;
  --color-royal-fig-700: #614755;
  --color-royal-fig-800: #4d3743;
  --color-royal-fig-900: #3c2934;
  --color-royal-fig-950: #261920;
}