Stardust Evening to Inkwell Inception color palette

B4BCDFStardust Evening 8889B1Galactic Gossamer 6B6650Treasure Chest 48401EMadras 1D1E27Inkwell Inception

Open in generator Export PNG, PDF, ASE…

About this palette

Stardust Evening to Inkwell Inception is a 5-color muted palette: #B4BCDF (Stardust Evening), #8889B1 (Galactic Gossamer), #6B6650 (Treasure Chest), #48401E (Madras), #1D1E27 (Inkwell Inception). It mixes purple, gray, brown tones and feels cool overall. The strongest text pairing is #B4BCDF on #1D1E27 with a contrast ratio of 8.84:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stardust Evening	rgb(180, 188, 223)	hsl(229, 40%, 79%)
Galactic Gossamer	rgb(136, 137, 177)	hsl(239, 21%, 61%)
Treasure Chest	rgb(107, 102, 80)	hsl(49, 14%, 37%)
Madras	rgb(72, 64, 30)	hsl(49, 41%, 20%)
Inkwell Inception	rgb(29, 30, 39)	hsl(234, 15%, 13%)

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.84:1 Very good#B4BCDF on #1D1E27
Aa8.84:1 Very good#1D1E27 on #B4BCDF
Aa5.52:1 Good#B4BCDF on #48401E
Aa5.52:1 Good#48401E on #B4BCDF
Aa4.94:1 Good#8889B1 on #1D1E27
Aa4.94:1 Good#1D1E27 on #8889B1
Aa3.09:1 Poor#8889B1 on #48401E
Aa3.09:1 Poor#48401E on #8889B1

Color blindness preview

CSS variables

/* Stardust Evening to Inkwell Inception — https://swatchly.xyz/palette/b4bcdf-8889b1-6b6650-48401e-1d1e27 */
:root {
  --stardust-evening: #b4bcdf;
  --galactic-gossamer: #8889b1;
  --treasure-chest: #6b6650;
  --madras: #48401e;
  --inkwell-inception: #1d1e27;
}

Tailwind CSS v4

/* Stardust Evening to Inkwell Inception — https://swatchly.xyz/palette/b4bcdf-8889b1-6b6650-48401e-1d1e27 */
@theme {
  --color-stardust-evening: #b4bcdf;
  --color-stardust-evening-50: #f0f3ff;
  --color-stardust-evening-100: #e2e8ff;
  --color-stardust-evening-200: #cdd4ef;
  --color-stardust-evening-300: #b4bcdf;
  --color-stardust-evening-400: #969dbe;
  --color-stardust-evening-500: #7b82a3;
  --color-stardust-evening-600: #626887;
  --color-stardust-evening-700: #4d536e;
  --color-stardust-evening-800: #3b4059;
  --color-stardust-evening-900: #2d3146;
  --color-stardust-evening-950: #1b1e2d;
  --color-galactic-gossamer: #8889b1;
  --color-galactic-gossamer-50: #f5f6ff;
  --color-galactic-gossamer-100: #ebecff;
  --color-galactic-gossamer-200: #d7d8f8;
  --color-galactic-gossamer-300: #c1c2e6;
  --color-galactic-gossamer-400: #a2a4cb;
  --color-galactic-gossamer-500: #8889b1;
  --color-galactic-gossamer-600: #6d6d93;
  --color-galactic-gossamer-700: #555678;
  --color-galactic-gossamer-800: #424260;
  --color-galactic-gossamer-900: #32324b;
  --color-galactic-gossamer-950: #1e1e30;
  --color-treasure-chest: #6b6650;
  --color-treasure-chest-50: #f8f5e8;
  --color-treasure-chest-100: #eeeadb;
  --color-treasure-chest-200: #dad6c3;
  --color-treasure-chest-300: #c3bea9;
  --color-treasure-chest-400: #a39e87;
  --color-treasure-chest-500: #86816a;
  --color-treasure-chest-600: #6b6650;
  --color-treasure-chest-700: #55513d;
  --color-treasure-chest-800: #433f2e;
  --color-treasure-chest-900: #343022;
  --color-treasure-chest-950: #201e14;
  --color-madras: #48401e;
  --color-madras-50: #faf6e0;
  --color-madras-100: #f1ecd4;
  --color-madras-200: #dfd8bc;
  --color-madras-300: #c8c1a1;
  --color-madras-400: #a9a17e;
  --color-madras-500: #8e8561;
  --color-madras-600: #736a48;
  --color-madras-700: #5b5334;
  --color-madras-800: #48401e;
  --color-madras-900: #36311a;
  --color-madras-950: #221e0d;
  --color-inkwell-inception: #1d1e27;
  --color-inkwell-inception-50: #f4f5fc;
  --color-inkwell-inception-100: #e9eaf2;
  --color-inkwell-inception-200: #d5d7e0;
  --color-inkwell-inception-300: #bfc0cb;
  --color-inkwell-inception-400: #9fa1ac;
  --color-inkwell-inception-500: #848591;
  --color-inkwell-inception-600: #696b76;
  --color-inkwell-inception-700: #53545e;
  --color-inkwell-inception-800: #40414a;
  --color-inkwell-inception-900: #313239;
  --color-inkwell-inception-950: #1d1e27;
}