Violet Void to Varnished Ivory color palette

1F1721Violet Void 524326Avocado Stone 698481Thundercloud 78B4BCGlacier E5DDCEVarnished Ivory

About this palette

Violet Void to Varnished Ivory is a 5-color muted palette: #1F1721 (Violet Void), #524326 (Avocado Stone), #698481 (Thundercloud), #78B4BC (Glacier), #E5DDCE (Varnished Ivory). It mixes black, brown, gray, turquoise tones and feels balanced overall. The strongest text pairing is #1F1721 on #E5DDCE with a contrast ratio of 12.94:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Void	rgb(31, 23, 33)	hsl(288, 18%, 11%)
Avocado Stone	rgb(82, 67, 38)	hsl(40, 37%, 24%)
Thundercloud	rgb(105, 132, 129)	hsl(173, 11%, 46%)
Glacier	rgb(120, 180, 188)	hsl(187, 34%, 60%)
Varnished Ivory	rgb(229, 221, 206)	hsl(39, 31%, 85%)

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.

Aa12.94:1 Super#1F1721 on #E5DDCE
Aa12.94:1 Super#E5DDCE on #1F1721
Aa7.53:1 Very good#1F1721 on #78B4BC
Aa7.53:1 Very good#78B4BC on #1F1721
Aa7.11:1 Very good#524326 on #E5DDCE
Aa7.11:1 Very good#E5DDCE on #524326
Aa4.34:1 Poor#1F1721 on #698481
Aa4.34:1 Poor#698481 on #1F1721

Color blindness preview

CSS variables

/* Violet Void to Varnished Ivory — https://swatchly.xyz/palette/1f1721-524326-698481-78b4bc-e5ddce */
:root {
  --violet-void: #1f1721;
  --avocado-stone: #524326;
  --thundercloud: #698481;
  --glacier: #78b4bc;
  --varnished-ivory: #e5ddce;
}

Tailwind CSS v4

/* Violet Void to Varnished Ivory — https://swatchly.xyz/palette/1f1721-524326-698481-78b4bc-e5ddce */
@theme {
  --color-violet-void: #1f1721;
  --color-violet-void-50: #f9f3fa;
  --color-violet-void-100: #efe8f1;
  --color-violet-void-200: #dcd4df;
  --color-violet-void-300: #c7bdc9;
  --color-violet-void-400: #a89daa;
  --color-violet-void-500: #8b818e;
  --color-violet-void-600: #706672;
  --color-violet-void-700: #584f5a;
  --color-violet-void-800: #433c45;
  --color-violet-void-900: #322c34;
  --color-violet-void-950: #1f1721;
  --color-avocado-stone: #524326;
  --color-avocado-stone-50: #fef4e2;
  --color-avocado-stone-100: #f5ead5;
  --color-avocado-stone-200: #e3d6bd;
  --color-avocado-stone-300: #cfc0a4;
  --color-avocado-stone-400: #b1a182;
  --color-avocado-stone-500: #968667;
  --color-avocado-stone-600: #7c6c4e;
  --color-avocado-stone-700: #64563a;
  --color-avocado-stone-800: #524326;
  --color-avocado-stone-900: #3e341f;
  --color-avocado-stone-950: #282011;
  --color-thundercloud: #698481;
  --color-thundercloud-50: #e7f8f6;
  --color-thundercloud-100: #daedea;
  --color-thundercloud-200: #c2d8d6;
  --color-thundercloud-300: #a8c1be;
  --color-thundercloud-400: #86a19e;
  --color-thundercloud-500: #698481;
  --color-thundercloud-600: #516b68;
  --color-thundercloud-700: #3e5553;
  --color-thundercloud-800: #2f4341;
  --color-thundercloud-900: #233432;
  --color-thundercloud-950: #152120;
  --color-glacier: #78b4bc;
  --color-glacier-50: #e7fcff;
  --color-glacier-100: #d3f7fb;
  --color-glacier-200: #bbe5eb;
  --color-glacier-300: #a0d1d8;
  --color-glacier-400: #78b4bc;
  --color-glacier-500: #5c979f;
  --color-glacier-600: #407a82;
  --color-glacier-700: #2a6269;
  --color-glacier-800: #1a4c53;
  --color-glacier-900: #0f3a40;
  --color-glacier-950: #052428;
  --color-varnished-ivory: #e5ddce;
  --color-varnished-ivory-50: #fdf9f1;
  --color-varnished-ivory-100: #f5f0e7;
  --color-varnished-ivory-200: #e5ddce;
  --color-varnished-ivory-300: #ccc5b9;
  --color-varnished-ivory-400: #aca597;
  --color-varnished-ivory-500: #90887a;
  --color-varnished-ivory-600: #746d60;
  --color-varnished-ivory-700: #5c554a;
  --color-varnished-ivory-800: #474237;
  --color-varnished-ivory-900: #37322a;
  --color-varnished-ivory-950: #221f19;
}