Ink Black to Pastel Lilac color palette

222029Ink Black 6F6A7FDark Prince 938EA6Silverfish 4A4659Black Magic EEEEFFFoundation White B2B1CCPastel Lilac

Open in generator Export PNG, PDF, ASE…

About this palette

Ink Black to Pastel Lilac is a 6-color muted palette: #222029 (Ink Black), #6F6A7F (Dark Prince), #938EA6 (Silverfish), #4A4659 (Black Magic), #EEEEFF (Foundation White), #B2B1CC (Pastel Lilac). It mixes gray, purple, white tones and feels cool overall. The strongest text pairing is #222029 on #EEEEFF 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
Ink Black	rgb(34, 32, 41)	hsl(253, 12%, 14%)
Dark Prince	rgb(111, 106, 127)	hsl(254, 9%, 46%)
Silverfish	rgb(147, 142, 166)	hsl(252, 12%, 60%)
Black Magic	rgb(74, 70, 89)	hsl(253, 12%, 31%)
Foundation White	rgb(238, 238, 255)	hsl(240, 100%, 97%)
Pastel Lilac	rgb(178, 177, 204)	hsl(242, 21%, 75%)

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#222029 on #EEEEFF
Aa14.01:1 Super#EEEEFF on #222029
Aa7.92:1 Very good#4A4659 on #EEEEFF
Aa7.92:1 Very good#EEEEFF on #4A4659
Aa7.69:1 Very good#222029 on #B2B1CC
Aa7.69:1 Very good#B2B1CC on #222029
Aa5.10:1 Good#222029 on #938EA6
Aa5.10:1 Good#938EA6 on #222029

Color blindness preview

CSS variables

/* Ink Black to Pastel Lilac — https://swatchly.xyz/palette/222029-6f6a7f-938ea6-4a4659-eeeeff-b2b1cc */
:root {
  --ink-black: #222029;
  --dark-prince: #6f6a7f;
  --silverfish: #938ea6;
  --black-magic: #4a4659;
  --foundation-white: #eeeeff;
  --pastel-lilac: #b2b1cc;
}

Tailwind CSS v4

/* Ink Black to Pastel Lilac — https://swatchly.xyz/palette/222029-6f6a7f-938ea6-4a4659-eeeeff-b2b1cc */
@theme {
  --color-ink-black: #222029;
  --color-ink-black-50: #f5f4fb;
  --color-ink-black-100: #ebeaf2;
  --color-ink-black-200: #d8d6df;
  --color-ink-black-300: #c1bfca;
  --color-ink-black-400: #a2a0ab;
  --color-ink-black-500: #878590;
  --color-ink-black-600: #6d6b76;
  --color-ink-black-700: #57555f;
  --color-ink-black-800: #44434b;
  --color-ink-black-900: #35343b;
  --color-ink-black-950: #222029;
  --color-dark-prince: #6f6a7f;
  --color-dark-prince-50: #f6f3ff;
  --color-dark-prince-100: #ece9f8;
  --color-dark-prince-200: #d9d5e7;
  --color-dark-prince-300: #c3bfd2;
  --color-dark-prince-400: #a49fb5;
  --color-dark-prince-500: #89849a;
  --color-dark-prince-600: #6f6a7f;
  --color-dark-prince-700: #585366;
  --color-dark-prince-800: #454151;
  --color-dark-prince-900: #35313f;
  --color-dark-prince-950: #201e28;
  --color-silverfish: #938ea6;
  --color-silverfish-50: #f8f6ff;
  --color-silverfish-100: #f0edfd;
  --color-silverfish-200: #dfdbed;
  --color-silverfish-300: #cac6db;
  --color-silverfish-400: #ada8bf;
  --color-silverfish-500: #938ea6;
  --color-silverfish-600: #767188;
  --color-silverfish-700: #5e596e;
  --color-silverfish-800: #484457;
  --color-silverfish-900: #373443;
  --color-silverfish-950: #211f2a;
  --color-black-magic: #4a4659;
  --color-black-magic-50: #f5f3ff;
  --color-black-magic-100: #ece9f7;
  --color-black-magic-200: #d8d5e6;
  --color-black-magic-300: #c3bfd2;
  --color-black-magic-400: #a5a1b6;
  --color-black-magic-500: #8b879c;
  --color-black-magic-600: #726d82;
  --color-black-magic-700: #5c586b;
  --color-black-magic-800: #4a4659;
  --color-black-magic-900: #393644;
  --color-black-magic-950: #24222c;
  --color-foundation-white: #eeeeff;
  --color-foundation-white-50: #f8f8ff;
  --color-foundation-white-100: #eeeeff;
  --color-foundation-white-200: #dadae6;
  --color-foundation-white-300: #c2c2d0;
  --color-foundation-white-400: #a2a2b1;
  --color-foundation-white-500: #868695;
  --color-foundation-white-600: #6b6b79;
  --color-foundation-white-700: #545461;
  --color-foundation-white-800: #41414c;
  --color-foundation-white-900: #32323b;
  --color-foundation-white-950: #1f1e25;
  --color-pastel-lilac: #b2b1cc;
  --color-pastel-lilac-50: #ededfe;
  --color-pastel-lilac-100: #e1e0f3;
  --color-pastel-lilac-200: #cbcae0;
  --color-pastel-lilac-300: #b2b1cc;
  --color-pastel-lilac-400: #9594ae;
  --color-pastel-lilac-500: #7c7b94;
  --color-pastel-lilac-600: #64637b;
  --color-pastel-lilac-700: #504f64;
  --color-pastel-lilac-800: #3f3e51;
  --color-pastel-lilac-900: #323141;
  --color-pastel-lilac-950: #1e1e29;
}