Knock on Wood to Stardust Evening Color Palette

About this palette

Knock on Wood to Stardust Evening is a 4-color muted palette: #9E9D86 (Knock on Wood), #5F5B43 (Tree of Life), #25242F (Darth Vader), #C0C3DD (Stardust Evening). It mixes gray, brown, purple tones and feels balanced overall. The strongest text pairing is #25242F on #C0C3DD with a contrast ratio of 8.81:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Knock on Wood	rgb(158, 157, 134)	hsl(58, 11%, 57%)
Tree of Life	rgb(95, 91, 67)	hsl(51, 17%, 32%)
Darth Vader	rgb(37, 36, 47)	hsl(245, 13%, 16%)
Stardust Evening	rgb(192, 195, 221)	hsl(234, 30%, 81%)

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.

Aa8.81:1 Very good#25242F on #C0C3DD
Aa8.81:1 Very good#C0C3DD on #25242F
Aa5.55:1 Good#9E9D86 on #25242F
Aa5.55:1 Good#25242F on #9E9D86
Aa3.95:1 Poor#5F5B43 on #C0C3DD
Aa3.95:1 Poor#C0C3DD on #5F5B43

Color blindness preview

CSS variables

/* Knock on Wood to Stardust Evening — https://swatchly.xyz/palette/9e9d86-5f5b43-25242f-c0c3dd */
:root {
  --knock-on-wood: #9e9d86;
  --tree-of-life: #5f5b43;
  --darth-vader: #25242f;
  --stardust-evening: #c0c3dd;
}

Tailwind CSS v4

/* Knock on Wood to Stardust Evening — https://swatchly.xyz/palette/9e9d86-5f5b43-25242f-c0c3dd */
@theme {
  --color-knock-on-wood: #9e9d86;
  --color-knock-on-wood-50: #f4f4e6;
  --color-knock-on-wood-100: #eae9d9;
  --color-knock-on-wood-200: #d5d4c2;
  --color-knock-on-wood-300: #bebda8;
  --color-knock-on-wood-400: #9e9d86;
  --color-knock-on-wood-500: #84836c;
  --color-knock-on-wood-600: #6a6954;
  --color-knock-on-wood-700: #555441;
  --color-knock-on-wood-800: #434231;
  --color-knock-on-wood-900: #343325;
  --color-knock-on-wood-950: #202016;
  --color-tree-of-life: #5f5b43;
  --color-tree-of-life-50: #f8f6e6;
  --color-tree-of-life-100: #eeecdb;
  --color-tree-of-life-200: #dcd9c5;
  --color-tree-of-life-300: #c7c4ad;
  --color-tree-of-life-400: #a9a58c;
  --color-tree-of-life-500: #8f8b71;
  --color-tree-of-life-600: #757158;
  --color-tree-of-life-700: #5f5b43;
  --color-tree-of-life-800: #4a4733;
  --color-tree-of-life-900: #393625;
  --color-tree-of-life-950: #242215;
  --color-darth-vader: #25242f;
  --color-darth-vader-50: #f5f4fc;
  --color-darth-vader-100: #ebeaf3;
  --color-darth-vader-200: #d7d6e1;
  --color-darth-vader-300: #c0bfcc;
  --color-darth-vader-400: #a1a0ad;
  --color-darth-vader-500: #878693;
  --color-darth-vader-600: #6e6d7a;
  --color-darth-vader-700: #585763;
  --color-darth-vader-800: #464650;
  --color-darth-vader-900: #383740;
  --color-darth-vader-950: #25242f;
  --color-stardust-evening: #c0c3dd;
  --color-stardust-evening-50: #f6f7ff;
  --color-stardust-evening-100: #ebedfd;
  --color-stardust-evening-200: #d7daed;
  --color-stardust-evening-300: #c0c3dd;
  --color-stardust-evening-400: #a0a3bb;
  --color-stardust-evening-500: #84879f;
  --color-stardust-evening-600: #696c83;
  --color-stardust-evening-700: #535569;
  --color-stardust-evening-800: #404153;
  --color-stardust-evening-900: #303141;
  --color-stardust-evening-950: #1d1e29;
}