Diamond White to Darth Vader color palette

E1F2F9Diamond White BBBAA5Ash 859DACBlank Stare 747446Tree Hugger 5A3849Shadow Purple 2E2427Darth Vader

Open in generator Export PNG, PDF, ASE…

About this palette

Diamond White to Darth Vader is a 6-color muted, gradient palette: #E1F2F9 (Diamond White), #BBBAA5 (Ash), #859DAC (Blank Stare), #747446 (Tree Hugger), #5A3849 (Shadow Purple), #2E2427 (Darth Vader). It mixes white, gray, brown, red tones and feels warm overall. The strongest text pairing is #E1F2F9 on #2E2427 with a contrast ratio of 13.07:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Diamond White	rgb(225, 242, 249)	hsl(198, 67%, 93%)
Ash	rgb(187, 186, 165)	hsl(57, 14%, 69%)
Blank Stare	rgb(133, 157, 172)	hsl(203, 19%, 60%)
Tree Hugger	rgb(116, 116, 70)	hsl(60, 25%, 36%)
Shadow Purple	rgb(90, 56, 73)	hsl(330, 23%, 29%)
Darth Vader	rgb(46, 36, 39)	hsl(342, 12%, 16%)

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.

Aa13.07:1 Super#E1F2F9 on #2E2427
Aa13.07:1 Super#2E2427 on #E1F2F9
Aa8.71:1 Very good#E1F2F9 on #5A3849
Aa8.71:1 Very good#5A3849 on #E1F2F9
Aa7.64:1 Very good#BBBAA5 on #2E2427
Aa7.64:1 Very good#2E2427 on #BBBAA5
Aa5.31:1 Good#859DAC on #2E2427
Aa5.31:1 Good#2E2427 on #859DAC

Color blindness preview

CSS variables

/* Diamond White to Darth Vader — https://swatchly.xyz/palette/e1f2f9-bbbaa5-859dac-747446-5a3849-2e2427 */
:root {
  --diamond-white: #e1f2f9;
  --ash: #bbbaa5;
  --blank-stare: #859dac;
  --tree-hugger: #747446;
  --shadow-purple: #5a3849;
  --darth-vader: #2e2427;
}

Tailwind CSS v4

/* Diamond White to Darth Vader — https://swatchly.xyz/palette/e1f2f9-bbbaa5-859dac-747446-5a3849-2e2427 */
@theme {
  --color-diamond-white: #e1f2f9;
  --color-diamond-white-50: #f1fafd;
  --color-diamond-white-100: #e1f2f9;
  --color-diamond-white-200: #d1dde2;
  --color-diamond-white-300: #b8c6cc;
  --color-diamond-white-400: #97a6ac;
  --color-diamond-white-500: #7b8a90;
  --color-diamond-white-600: #606f75;
  --color-diamond-white-700: #4a585d;
  --color-diamond-white-800: #394549;
  --color-diamond-white-900: #2b3539;
  --color-diamond-white-950: #192123;
  --color-ash: #bbbaa5;
  --color-ash-50: #f2f2e5;
  --color-ash-100: #e7e6d8;
  --color-ash-200: #d2d2c1;
  --color-ash-300: #bbbaa5;
  --color-ash-400: #9d9c88;
  --color-ash-500: #83826e;
  --color-ash-600: #6a6957;
  --color-ash-700: #555443;
  --color-ash-800: #434233;
  --color-ash-900: #343427;
  --color-ash-950: #202017;
  --color-blank-stare: #859dac;
  --color-blank-stare-50: #e6f5fe;
  --color-blank-stare-100: #d9e9f4;
  --color-blank-stare-200: #c1d5e1;
  --color-blank-stare-300: #a7bdcb;
  --color-blank-stare-400: #859dac;
  --color-blank-stare-500: #6c8392;
  --color-blank-stare-600: #546a78;
  --color-blank-stare-700: #415561;
  --color-blank-stare-800: #31434d;
  --color-blank-stare-900: #25343d;
  --color-blank-stare-950: #162127;
  --color-tree-hugger: #747446;
  --color-tree-hugger-50: #f7f8dc;
  --color-tree-hugger-100: #eeefd0;
  --color-tree-hugger-200: #dcdcb8;
  --color-tree-hugger-300: #c6c79e;
  --color-tree-hugger-400: #a8a97b;
  --color-tree-hugger-500: #8e8e5f;
  --color-tree-hugger-600: #747446;
  --color-tree-hugger-700: #5c5c32;
  --color-tree-hugger-800: #484822;
  --color-tree-hugger-900: #373717;
  --color-tree-hugger-950: #22220b;
  --color-shadow-purple: #5a3849;
  --color-shadow-purple-50: #fff1f7;
  --color-shadow-purple-100: #fee3ef;
  --color-shadow-purple-200: #edcddc;
  --color-shadow-purple-300: #d9b6c6;
  --color-shadow-purple-400: #bc95a8;
  --color-shadow-purple-500: #a17a8d;
  --color-shadow-purple-600: #856172;
  --color-shadow-purple-700: #6d4b5c;
  --color-shadow-purple-800: #5a3849;
  --color-shadow-purple-900: #442c38;
  --color-shadow-purple-950: #2c1a23;
  --color-darth-vader: #2e2427;
  --color-darth-vader-50: #faf3f5;
  --color-darth-vader-100: #f1e9eb;
  --color-darth-vader-200: #dfd4d7;
  --color-darth-vader-300: #c9bdc1;
  --color-darth-vader-400: #aa9ea1;
  --color-darth-vader-500: #908488;
  --color-darth-vader-600: #776b6f;
  --color-darth-vader-700: #61565a;
  --color-darth-vader-800: #4f4548;
  --color-darth-vader-900: #40373a;
  --color-darth-vader-950: #2e2427;
}