Walkway to Highlander Color Palette

About this palette

Walkway to Highlander is a 5-color muted palette: #A796A4 (Walkway), #E5DBE6 (Violet Vapour), #897783 (Chain Mail), #222A21 (Bitter Liquorice), #355443 (Highlander). It mixes gray, green tones and feels cool overall. The strongest text pairing is #E5DBE6 on #222A21 with a contrast ratio of 10.98:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Walkway	rgb(167, 150, 164)	hsl(311, 9%, 62%)
Violet Vapour	rgb(229, 219, 230)	hsl(295, 18%, 88%)
Chain Mail	rgb(137, 119, 131)	hsl(320, 7%, 50%)
Bitter Liquorice	rgb(34, 42, 33)	hsl(113, 12%, 15%)
Highlander	rgb(53, 84, 67)	hsl(147, 23%, 27%)

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.

Aa10.98:1 Very good#E5DBE6 on #222A21
Aa10.98:1 Very good#222A21 on #E5DBE6
Aa6.24:1 Good#E5DBE6 on #355443
Aa6.24:1 Good#355443 on #E5DBE6
Aa5.31:1 Good#A796A4 on #222A21
Aa5.31:1 Good#222A21 on #A796A4
Aa3.54:1 Poor#897783 on #222A21
Aa3.54:1 Poor#222A21 on #897783

Color blindness preview

CSS variables

/* Walkway to Highlander — https://swatchly.xyz/palette/a796a4-e5dbe6-897783-222a21-355443 */
:root {
  --walkway: #a796a4;
  --violet-vapour: #e5dbe6;
  --chain-mail: #897783;
  --bitter-liquorice: #222a21;
  --highlander: #355443;
}

Tailwind CSS v4

/* Walkway to Highlander — https://swatchly.xyz/palette/a796a4-e5dbe6-897783-222a21-355443 */
@theme {
  --color-walkway: #a796a4;
  --color-walkway-50: #faeff8;
  --color-walkway-100: #f0e4ee;
  --color-walkway-200: #ddcfda;
  --color-walkway-300: #c6b7c3;
  --color-walkway-400: #a796a4;
  --color-walkway-500: #8c7c89;
  --color-walkway-600: #726370;
  --color-walkway-700: #5c4e59;
  --color-walkway-800: #483c46;
  --color-walkway-900: #392e37;
  --color-walkway-950: #241d23;
  --color-violet-vapour: #e5dbe6;
  --color-violet-vapour-50: #fdf8fe;
  --color-violet-vapour-100: #f5eff6;
  --color-violet-vapour-200: #e5dbe6;
  --color-violet-vapour-300: #ccc4cd;
  --color-violet-vapour-400: #aca3ad;
  --color-violet-vapour-500: #8f8690;
  --color-violet-vapour-600: #736b74;
  --color-violet-vapour-700: #5b535c;
  --color-violet-vapour-800: #464047;
  --color-violet-vapour-900: #363137;
  --color-violet-vapour-950: #221e22;
  --color-chain-mail: #897783;
  --color-chain-mail-50: #fbf0f7;
  --color-chain-mail-100: #f0e3ec;
  --color-chain-mail-200: #ddcdd7;
  --color-chain-mail-300: #c6b5c0;
  --color-chain-mail-400: #a694a0;
  --color-chain-mail-500: #897783;
  --color-chain-mail-600: #705f6a;
  --color-chain-mail-700: #5a4b55;
  --color-chain-mail-800: #473a43;
  --color-chain-mail-900: #372c34;
  --color-chain-mail-950: #231b21;
  --color-bitter-liquorice: #222a21;
  --color-bitter-liquorice-50: #f1f7f0;
  --color-bitter-liquorice-100: #e7ede6;
  --color-bitter-liquorice-200: #d2dad1;
  --color-bitter-liquorice-300: #bbc4ba;
  --color-bitter-liquorice-400: #9ba59a;
  --color-bitter-liquorice-500: #818b80;
  --color-bitter-liquorice-600: #697268;
  --color-bitter-liquorice-700: #545d53;
  --color-bitter-liquorice-800: #434b42;
  --color-bitter-liquorice-900: #363c35;
  --color-bitter-liquorice-950: #222a21;
  --color-highlander: #355443;
  --color-highlander-50: #e7fbef;
  --color-highlander-100: #dcf2e4;
  --color-highlander-200: #c3ddce;
  --color-highlander-300: #a8c6b4;
  --color-highlander-400: #85a592;
  --color-highlander-500: #688876;
  --color-highlander-600: #4d6c5b;
  --color-highlander-700: #355443;
  --color-highlander-800: #2a4134;
  --color-highlander-900: #1e3227;
  --color-highlander-950: #111f17;
}