Silverfish to Icy Plains Color Palette

About this palette

Silverfish to Icy Plains is a 5-color muted, cool palette: #9391A9 (Silverfish), #6D698D (Heron), #1B1A23 (Night Demons), #4C4468 (Nightly Walk), #DAD7FC (Icy Plains). It mixes purple, gray tones and feels cool overall. The strongest text pairing is #1B1A23 on #DAD7FC with a contrast ratio of 12.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Silverfish	rgb(147, 145, 169)	hsl(245, 12%, 62%)
Heron	rgb(109, 105, 141)	hsl(247, 15%, 48%)
Night Demons	rgb(27, 26, 35)	hsl(247, 15%, 12%)
Nightly Walk	rgb(76, 68, 104)	hsl(253, 21%, 34%)
Icy Plains	rgb(218, 215, 252)	hsl(245, 86%, 92%)

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.40:1 Super#1B1A23 on #DAD7FC
Aa12.40:1 Super#DAD7FC on #1B1A23
Aa6.47:1 Good#4C4468 on #DAD7FC
Aa6.47:1 Good#DAD7FC on #4C4468
Aa5.63:1 Good#9391A9 on #1B1A23
Aa5.63:1 Good#1B1A23 on #9391A9
Aa3.73:1 Poor#6D698D on #DAD7FC
Aa3.73:1 Poor#DAD7FC on #6D698D

Color blindness preview

CSS variables

/* Silverfish to Icy Plains — https://swatchly.xyz/palette/9391a9-6d698d-1b1a23-4c4468-dad7fc */
:root {
  --silverfish: #9391a9;
  --heron: #6d698d;
  --night-demons: #1b1a23;
  --nightly-walk: #4c4468;
  --icy-plains: #dad7fc;
}

Tailwind CSS v4

/* Silverfish to Icy Plains — https://swatchly.xyz/palette/9391a9-6d698d-1b1a23-4c4468-dad7fc */
@theme {
  --color-silverfish: #9391a9;
  --color-silverfish-50: #efeefe;
  --color-silverfish-100: #e3e2f3;
  --color-silverfish-200: #cdcbe0;
  --color-silverfish-300: #b4b2c9;
  --color-silverfish-400: #9391a9;
  --color-silverfish-500: #7a788f;
  --color-silverfish-600: #636176;
  --color-silverfish-700: #4e4d60;
  --color-silverfish-800: #3e3c4d;
  --color-silverfish-900: #302f3d;
  --color-silverfish-950: #1f1e28;
  --color-heron: #6d698d;
  --color-heron-50: #f4f4ff;
  --color-heron-100: #ebe9ff;
  --color-heron-200: #d7d4f3;
  --color-heron-300: #c1bee0;
  --color-heron-400: #a29ec3;
  --color-heron-500: #8783a8;
  --color-heron-600: #6d698d;
  --color-heron-700: #565273;
  --color-heron-800: #43405c;
  --color-heron-900: #333048;
  --color-heron-950: #1f1d2e;
  --color-night-demons: #1b1a23;
  --color-night-demons-50: #f5f4fb;
  --color-night-demons-100: #ebeaf2;
  --color-night-demons-200: #d7d6e0;
  --color-night-demons-300: #c0bfca;
  --color-night-demons-400: #a1a0ac;
  --color-night-demons-500: #85848f;
  --color-night-demons-600: #6a6974;
  --color-night-demons-700: #53525b;
  --color-night-demons-800: #3f3e47;
  --color-night-demons-900: #2f2e35;
  --color-night-demons-950: #1b1a23;
  --color-nightly-walk: #4c4468;
  --color-nightly-walk-50: #f5f3ff;
  --color-nightly-walk-100: #ece8ff;
  --color-nightly-walk-200: #d8d2f3;
  --color-nightly-walk-300: #c4bde1;
  --color-nightly-walk-400: #a69ec6;
  --color-nightly-walk-500: #8c84ac;
  --color-nightly-walk-600: #736b91;
  --color-nightly-walk-700: #5e567a;
  --color-nightly-walk-800: #4c4468;
  --color-nightly-walk-900: #3a3550;
  --color-nightly-walk-950: #252134;
  --color-icy-plains: #dad7fc;
  --color-icy-plains-50: #f7f7ff;
  --color-icy-plains-100: #eeecff;
  --color-icy-plains-200: #dad7fc;
  --color-icy-plains-300: #c3c0df;
  --color-icy-plains-400: #a3a0c1;
  --color-icy-plains-500: #8784a5;
  --color-icy-plains-600: #6c6989;
  --color-icy-plains-700: #55526f;
  --color-icy-plains-800: #413f58;
  --color-icy-plains-900: #323045;
  --color-icy-plains-950: #1f1d2c;
}