Eclipse Elixir to Neon Boneyard color palette

212038Eclipse Elixir 626537Jungle Civilization 38360DWasabi Nori 7A8E38Pesto di Rucola ACA9EFWondrous Wisteria D7C1FENeon Boneyard

Open in generator Export PNG, PDF, ASE…

About this palette

Eclipse Elixir to Neon Boneyard is a 6-color cool palette: #212038 (Eclipse Elixir), #626537 (Jungle Civilization), #38360D (Wasabi Nori), #7A8E38 (Pesto di Rucola), #ACA9EF (Wondrous Wisteria), #D7C1FE (Neon Boneyard). It mixes purple, brown, green tones and feels cool overall. The strongest text pairing is #212038 on #D7C1FE with a contrast ratio of 9.75:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Eclipse Elixir	rgb(33, 32, 56)	hsl(243, 27%, 17%)
Jungle Civilization	rgb(98, 101, 55)	hsl(64, 29%, 31%)
Wasabi Nori	rgb(56, 54, 13)	hsl(57, 62%, 14%)
Pesto di Rucola	rgb(122, 142, 56)	hsl(74, 43%, 39%)
Wondrous Wisteria	rgb(172, 169, 239)	hsl(243, 69%, 80%)
Neon Boneyard	rgb(215, 193, 254)	hsl(262, 97%, 88%)

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.

Aa9.75:1 Very good#212038 on #D7C1FE
Aa9.75:1 Very good#D7C1FE on #212038
Aa7.61:1 Very good#38360D on #D7C1FE
Aa7.61:1 Very good#D7C1FE on #38360D
Aa7.28:1 Very good#212038 on #ACA9EF
Aa7.28:1 Very good#ACA9EF on #212038
Aa5.69:1 Good#38360D on #ACA9EF
Aa5.69:1 Good#ACA9EF on #38360D

Color blindness preview

CSS variables

/* Eclipse Elixir to Neon Boneyard — https://swatchly.xyz/palette/212038-626537-38360d-7a8e38-aca9ef-d7c1fe */
:root {
  --eclipse-elixir: #212038;
  --jungle-civilization: #626537;
  --wasabi-nori: #38360d;
  --pesto-di-rucola: #7a8e38;
  --wondrous-wisteria: #aca9ef;
  --neon-boneyard: #d7c1fe;
}

Tailwind CSS v4

/* Eclipse Elixir to Neon Boneyard — https://swatchly.xyz/palette/212038-626537-38360d-7a8e38-aca9ef-d7c1fe */
@theme {
  --color-eclipse-elixir: #212038;
  --color-eclipse-elixir-50: #f4f4ff;
  --color-eclipse-elixir-100: #e9e9fe;
  --color-eclipse-elixir-200: #d4d5ed;
  --color-eclipse-elixir-300: #bebed9;
  --color-eclipse-elixir-400: #9e9ebc;
  --color-eclipse-elixir-500: #8484a1;
  --color-eclipse-elixir-600: #6a6a87;
  --color-eclipse-elixir-700: #55556e;
  --color-eclipse-elixir-800: #434359;
  --color-eclipse-elixir-900: #343448;
  --color-eclipse-elixir-950: #212038;
  --color-jungle-civilization: #626537;
  --color-jungle-civilization-50: #f5f8dc;
  --color-jungle-civilization-100: #e9eccd;
  --color-jungle-civilization-200: #d4d7b1;
  --color-jungle-civilization-300: #bbbf94;
  --color-jungle-civilization-400: #9a9e6f;
  --color-jungle-civilization-500: #7e8152;
  --color-jungle-civilization-600: #626537;
  --color-jungle-civilization-700: #4e5028;
  --color-jungle-civilization-800: #3d3f1c;
  --color-jungle-civilization-900: #2f3013;
  --color-jungle-civilization-950: #1d1e09;
  --color-wasabi-nori: #38360d;
  --color-wasabi-nori-50: #f7f7de;
  --color-wasabi-nori-100: #eeedd2;
  --color-wasabi-nori-200: #dadab9;
  --color-wasabi-nori-300: #c4c49e;
  --color-wasabi-nori-400: #a6a57c;
  --color-wasabi-nori-500: #8b8960;
  --color-wasabi-nori-600: #706f47;
  --color-wasabi-nori-700: #5a5834;
  --color-wasabi-nori-800: #474525;
  --color-wasabi-nori-900: #38360d;
  --color-wasabi-nori-950: #22210d;
  --color-pesto-di-rucola: #7a8e38;
  --color-pesto-di-rucola-50: #eefccd;
  --color-pesto-di-rucola-100: #e3f2bd;
  --color-pesto-di-rucola-200: #cedfa0;
  --color-pesto-di-rucola-300: #b6c980;
  --color-pesto-di-rucola-400: #95aa58;
  --color-pesto-di-rucola-500: #7a8e38;
  --color-pesto-di-rucola-600: #61731c;
  --color-pesto-di-rucola-700: #4c5c03;
  --color-pesto-di-rucola-800: #3b4800;
  --color-pesto-di-rucola-900: #2d3800;
  --color-pesto-di-rucola-950: #1b2300;
  --color-wondrous-wisteria: #aca9ef;
  --color-wondrous-wisteria-50: #ebebff;
  --color-wondrous-wisteria-100: #ddddff;
  --color-wondrous-wisteria-200: #c5c4fe;
  --color-wondrous-wisteria-300: #aca9ef;
  --color-wondrous-wisteria-400: #908dcf;
  --color-wondrous-wisteria-500: #7874b5;
  --color-wondrous-wisteria-600: #605c9a;
  --color-wondrous-wisteria-700: #4d4880;
  --color-wondrous-wisteria-800: #3d396a;
  --color-wondrous-wisteria-900: #302c56;
  --color-wondrous-wisteria-950: #1d1a39;
  --color-neon-boneyard: #d7c1fe;
  --color-neon-boneyard-50: #f1eaff;
  --color-neon-boneyard-100: #e8dcff;
  --color-neon-boneyard-200: #d7c1fe;
  --color-neon-boneyard-300: #c1aee3;
  --color-neon-boneyard-400: #a48fc8;
  --color-neon-boneyard-500: #8a75ae;
  --color-neon-boneyard-600: #715d92;
  --color-neon-boneyard-700: #5c4979;
  --color-neon-boneyard-800: #493863;
  --color-neon-boneyard-900: #392a4e;
  --color-neon-boneyard-950: #231933;
}