Stardust Evening to Wood Bark color palette

B8BFE9Stardust Evening BAA97FNettle 6E79B5Flood 54607AAdmiral Blue 4F471EAlligator Gladiator 2E2819Wood Bark

Open in generator Export PNG, PDF, ASE…

About this palette

Stardust Evening to Wood Bark is a 6-color muted palette: #B8BFE9 (Stardust Evening), #BAA97F (Nettle), #6E79B5 (Flood), #54607A (Admiral Blue), #4F471E (Alligator Gladiator), #2E2819 (Wood Bark). It mixes purple, yellow, blue, brown, gray tones and feels cool overall. The strongest text pairing is #B8BFE9 on #2E2819 with a contrast ratio of 8.14:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stardust Evening	rgb(184, 191, 233)	hsl(231, 53%, 82%)
Nettle	rgb(186, 169, 127)	hsl(43, 30%, 61%)
Flood	rgb(110, 121, 181)	hsl(231, 32%, 57%)
Admiral Blue	rgb(84, 96, 122)	hsl(221, 18%, 40%)
Alligator Gladiator	rgb(79, 71, 30)	hsl(50, 45%, 21%)
Wood Bark	rgb(46, 40, 25)	hsl(43, 30%, 14%)

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.14:1 Very good#B8BFE9 on #2E2819
Aa8.14:1 Very good#2E2819 on #B8BFE9
Aa6.33:1 Good#BAA97F on #2E2819
Aa6.33:1 Good#2E2819 on #BAA97F
Aa5.18:1 Good#B8BFE9 on #4F471E
Aa5.18:1 Good#4F471E on #B8BFE9
Aa4.03:1 Poor#BAA97F on #4F471E
Aa4.03:1 Poor#4F471E on #BAA97F

Color blindness preview

CSS variables

/* Stardust Evening to Wood Bark — https://swatchly.xyz/palette/b8bfe9-baa97f-6e79b5-54607a-4f471e-2e2819 */
:root {
  --stardust-evening: #b8bfe9;
  --nettle: #baa97f;
  --flood: #6e79b5;
  --admiral-blue: #54607a;
  --alligator-gladiator: #4f471e;
  --wood-bark: #2e2819;
}

Tailwind CSS v4

/* Stardust Evening to Wood Bark — https://swatchly.xyz/palette/b8bfe9-baa97f-6e79b5-54607a-4f471e-2e2819 */
@theme {
  --color-stardust-evening: #b8bfe9;
  --color-stardust-evening-50: #f3f5ff;
  --color-stardust-evening-100: #e7ebff;
  --color-stardust-evening-200: #d1d6f6;
  --color-stardust-evening-300: #b8bfe9;
  --color-stardust-evening-400: #99a0c6;
  --color-stardust-evening-500: #7e84ab;
  --color-stardust-evening-600: #64698e;
  --color-stardust-evening-700: #4e5374;
  --color-stardust-evening-800: #3c405d;
  --color-stardust-evening-900: #2d3149;
  --color-stardust-evening-950: #1b1e2f;
  --color-nettle: #baa97f;
  --color-nettle-50: #fff8e6;
  --color-nettle-100: #faefd6;
  --color-nettle-200: #e9ddbf;
  --color-nettle-300: #d6c8a5;
  --color-nettle-400: #baa97f;
  --color-nettle-500: #9c8c63;
  --color-nettle-600: #807048;
  --color-nettle-700: #665833;
  --color-nettle-800: #504323;
  --color-nettle-900: #3d3317;
  --color-nettle-950: #261e0b;
  --color-flood: #6e79b5;
  --color-flood-50: #f0f3ff;
  --color-flood-100: #e1e7ff;
  --color-flood-200: #c6d0ff;
  --color-flood-300: #acb7f0;
  --color-flood-400: #8a96d2;
  --color-flood-500: #6e79b5;
  --color-flood-600: #576098;
  --color-flood-700: #434b7e;
  --color-flood-800: #343a66;
  --color-flood-900: #272d52;
  --color-flood-950: #171b36;
  --color-admiral-blue: #54607a;
  --color-admiral-blue-50: #f1f5ff;
  --color-admiral-blue-100: #e2ebfe;
  --color-admiral-blue-200: #cfdaf0;
  --color-admiral-blue-300: #bac5de;
  --color-admiral-blue-400: #9ba8c3;
  --color-admiral-blue-500: #818eaa;
  --color-admiral-blue-600: #697590;
  --color-admiral-blue-700: #54607a;
  --color-admiral-blue-800: #414b61;
  --color-admiral-blue-900: #31394c;
  --color-admiral-blue-950: #1d2431;
  --color-alligator-gladiator: #4f471e;
  --color-alligator-gladiator-50: #fbf6dd;
  --color-alligator-gladiator-100: #f1ecd0;
  --color-alligator-gladiator-200: #dfd8b7;
  --color-alligator-gladiator-300: #cac39d;
  --color-alligator-gladiator-400: #aca47b;
  --color-alligator-gladiator-500: #92895f;
  --color-alligator-gladiator-600: #787047;
  --color-alligator-gladiator-700: #615a34;
  --color-alligator-gladiator-800: #4f471e;
  --color-alligator-gladiator-900: #3c3719;
  --color-alligator-gladiator-950: #26220d;
  --color-wood-bark: #2e2819;
  --color-wood-bark-50: #f9f5ea;
  --color-wood-bark-100: #f0ebdf;
  --color-wood-bark-200: #ddd7c9;
  --color-wood-bark-300: #c7c0b0;
  --color-wood-bark-400: #a8a190;
  --color-wood-bark-500: #8f8876;
  --color-wood-bark-600: #766f5e;
  --color-wood-bark-700: #605a4b;
  --color-wood-bark-800: #4e493b;
  --color-wood-bark-900: #403b2e;
  --color-wood-bark-950: #2e2819;
}