Violet Void to White Chocolate color palette

1C1621Violet Void 444226Madras 587A64Camping Trip 84A38FEnvy D6B8DDSweet Lucid Dreams ECE5C9White Chocolate

Open in generator Export PNG, PDF, ASE…

About this palette

Violet Void to White Chocolate is a 6-color muted, earthy palette: #1C1621 (Violet Void), #444226 (Madras), #587A64 (Camping Trip), #84A38F (Envy), #D6B8DD (Sweet Lucid Dreams), #ECE5C9 (White Chocolate). It mixes black, brown, green, purple, yellow tones and feels cool overall. The strongest text pairing is #1C1621 on #ECE5C9 with a contrast ratio of 14.01:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Void	rgb(28, 22, 33)	hsl(273, 20%, 11%)
Madras	rgb(68, 66, 38)	hsl(56, 28%, 21%)
Camping Trip	rgb(88, 122, 100)	hsl(141, 16%, 41%)
Envy	rgb(132, 163, 143)	hsl(141, 14%, 58%)
Sweet Lucid Dreams	rgb(214, 184, 221)	hsl(289, 35%, 79%)
White Chocolate	rgb(236, 229, 201)	hsl(48, 48%, 86%)

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.

Aa14.01:1 Super#1C1621 on #ECE5C9
Aa14.01:1 Super#ECE5C9 on #1C1621
Aa9.91:1 Very good#1C1621 on #D6B8DD
Aa9.91:1 Very good#D6B8DD on #1C1621
Aa8.09:1 Very good#444226 on #ECE5C9
Aa8.09:1 Very good#ECE5C9 on #444226
Aa6.42:1 Good#1C1621 on #84A38F
Aa6.42:1 Good#84A38F on #1C1621

Color blindness preview

CSS variables

/* Violet Void to White Chocolate — https://swatchly.xyz/palette/1c1621-444226-587a64-84a38f-d6b8dd-ece5c9 */
:root {
  --violet-void: #1c1621;
  --madras: #444226;
  --camping-trip: #587a64;
  --envy: #84a38f;
  --sweet-lucid-dreams: #d6b8dd;
  --white-chocolate: #ece5c9;
}

Tailwind CSS v4

/* Violet Void to White Chocolate — https://swatchly.xyz/palette/1c1621-444226-587a64-84a38f-d6b8dd-ece5c9 */
@theme {
  --color-violet-void: #1c1621;
  --color-violet-void-50: #f8f3fc;
  --color-violet-void-100: #eee9f3;
  --color-violet-void-200: #dbd5e0;
  --color-violet-void-300: #c5becb;
  --color-violet-void-400: #a59eac;
  --color-violet-void-500: #898190;
  --color-violet-void-600: #6d6673;
  --color-violet-void-700: #554f5a;
  --color-violet-void-800: #403b45;
  --color-violet-void-900: #2f2b33;
  --color-violet-void-950: #1c1621;
  --color-madras: #444226;
  --color-madras-50: #f7f6e4;
  --color-madras-100: #ededd8;
  --color-madras-200: #dad9c1;
  --color-madras-300: #c4c2a7;
  --color-madras-400: #a4a385;
  --color-madras-500: #898769;
  --color-madras-600: #6e6c4f;
  --color-madras-700: #57553b;
  --color-madras-800: #444226;
  --color-madras-900: #34321f;
  --color-madras-950: #201f11;
  --color-camping-trip: #587a64;
  --color-camping-trip-50: #e7fbed;
  --color-camping-trip-100: #dcf3e3;
  --color-camping-trip-200: #c6e1cf;
  --color-camping-trip-300: #aecdb8;
  --color-camping-trip-400: #8daf98;
  --color-camping-trip-500: #71947d;
  --color-camping-trip-600: #587a64;
  --color-camping-trip-700: #43624e;
  --color-camping-trip-800: #314d3b;
  --color-camping-trip-900: #243b2c;
  --color-camping-trip-950: #14251a;
  --color-envy: #84a38f;
  --color-envy-50: #e5f8ec;
  --color-envy-100: #d8eddf;
  --color-envy-200: #c1dac9;
  --color-envy-300: #a7c3b0;
  --color-envy-400: #84a38f;
  --color-envy-500: #6b8975;
  --color-envy-600: #536f5d;
  --color-envy-700: #3f5949;
  --color-envy-800: #304638;
  --color-envy-900: #24372b;
  --color-envy-950: #15231a;
  --color-sweet-lucid-dreams: #d6b8dd;
  --color-sweet-lucid-dreams-50: #fdf3ff;
  --color-sweet-lucid-dreams-100: #f9e6fd;
  --color-sweet-lucid-dreams-200: #e8d1ed;
  --color-sweet-lucid-dreams-300: #d6b8dd;
  --color-sweet-lucid-dreams-400: #b599bb;
  --color-sweet-lucid-dreams-500: #997d9f;
  --color-sweet-lucid-dreams-600: #7d6283;
  --color-sweet-lucid-dreams-700: #644c6a;
  --color-sweet-lucid-dreams-800: #4f3a54;
  --color-sweet-lucid-dreams-900: #3d2b41;
  --color-sweet-lucid-dreams-950: #271a2a;
  --color-white-chocolate: #ece5c9;
  --color-white-chocolate-50: #f4f0df;
  --color-white-chocolate-100: #ece5c9;
  --color-white-chocolate-200: #d8d2bd;
  --color-white-chocolate-300: #c3bda5;
  --color-white-chocolate-400: #a59f85;
  --color-white-chocolate-500: #8b846b;
  --color-white-chocolate-600: #716b53;
  --color-white-chocolate-700: #5b553f;
  --color-white-chocolate-800: #47422f;
  --color-white-chocolate-900: #373322;
  --color-white-chocolate-950: #221f13;
}