Neon Boneyard to Brown Coffee color palette

E1CDFENeon Boneyard AFA2D3Imperial Lilac 778358Green Relict 006676Teal With It 472C2BBrown Coffee

About this palette

Neon Boneyard to Brown Coffee is a 5-color cool palette: #E1CDFE (Neon Boneyard), #AFA2D3 (Imperial Lilac), #778358 (Green Relict), #006676 (Teal With It), #472C2B (Brown Coffee). It mixes purple, green, turquoise, brown tones and feels cool overall. The strongest text pairing is #E1CDFE on #472C2B with a contrast ratio of 8.64:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Boneyard	rgb(225, 205, 254)	hsl(264, 96%, 90%)
Imperial Lilac	rgb(175, 162, 211)	hsl(256, 36%, 73%)
Green Relict	rgb(119, 131, 88)	hsl(77, 20%, 43%)
Teal With It	rgb(0, 102, 118)	hsl(188, 100%, 23%)
Brown Coffee	rgb(71, 44, 43)	hsl(2, 25%, 22%)

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.64:1 Very good#E1CDFE on #472C2B
Aa8.64:1 Very good#472C2B on #E1CDFE
Aa5.37:1 Good#AFA2D3 on #472C2B
Aa5.37:1 Good#472C2B on #AFA2D3
Aa4.54:1 Good#E1CDFE on #006676
Aa4.54:1 Good#006676 on #E1CDFE
Aa3.11:1 Poor#778358 on #472C2B
Aa3.11:1 Poor#472C2B on #778358

Color blindness preview

CSS variables

/* Neon Boneyard to Brown Coffee — https://swatchly.xyz/palette/e1cdfe-afa2d3-778358-006676-472c2b */
:root {
  --neon-boneyard: #e1cdfe;
  --imperial-lilac: #afa2d3;
  --green-relict: #778358;
  --teal-with-it: #006676;
  --brown-coffee: #472c2b;
}

Tailwind CSS v4

/* Neon Boneyard to Brown Coffee — https://swatchly.xyz/palette/e1cdfe-afa2d3-778358-006676-472c2b */
@theme {
  --color-neon-boneyard: #e1cdfe;
  --color-neon-boneyard-50: #f7f3ff;
  --color-neon-boneyard-100: #f0e6ff;
  --color-neon-boneyard-200: #e1cdfe;
  --color-neon-boneyard-300: #c9b8e1;
  --color-neon-boneyard-400: #aa98c4;
  --color-neon-boneyard-500: #8f7ca9;
  --color-neon-boneyard-600: #74628d;
  --color-neon-boneyard-700: #5d4c73;
  --color-neon-boneyard-800: #493a5c;
  --color-neon-boneyard-900: #382c48;
  --color-neon-boneyard-950: #231a2f;
  --color-imperial-lilac: #afa2d3;
  --color-imperial-lilac-50: #f9f7ff;
  --color-imperial-lilac-100: #f1edff;
  --color-imperial-lilac-200: #e1d8fc;
  --color-imperial-lilac-300: #ccc2eb;
  --color-imperial-lilac-400: #afa2d3;
  --color-imperial-lilac-500: #9285b4;
  --color-imperial-lilac-600: #766996;
  --color-imperial-lilac-700: #5d517b;
  --color-imperial-lilac-800: #483e62;
  --color-imperial-lilac-900: #372e4c;
  --color-imperial-lilac-950: #211b30;
  --color-green-relict: #778358;
  --color-green-relict-50: #eff8dd;
  --color-green-relict-100: #e3eccf;
  --color-green-relict-200: #cdd8b4;
  --color-green-relict-300: #b5c098;
  --color-green-relict-400: #93a075;
  --color-green-relict-500: #778358;
  --color-green-relict-600: #5f6a41;
  --color-green-relict-700: #4b5530;
  --color-green-relict-800: #3a4222;
  --color-green-relict-900: #2d3418;
  --color-green-relict-950: #1b210d;
  --color-teal-with-it: #006676;
  --color-teal-with-it-50: #e4faff;
  --color-teal-with-it-100: #c7f4ff;
  --color-teal-with-it-200: #abe4f1;
  --color-teal-with-it-300: #8ecfde;
  --color-teal-with-it-400: #66b2c2;
  --color-teal-with-it-500: #4797a8;
  --color-teal-with-it-600: #297c8d;
  --color-teal-with-it-700: #006676;
  --color-teal-with-it-800: #00505d;
  --color-teal-with-it-900: #003e48;
  --color-teal-with-it-950: #00272e;
  --color-brown-coffee: #472c2b;
  --color-brown-coffee-50: #fff1f1;
  --color-brown-coffee-100: #fce5e4;
  --color-brown-coffee-200: #ebd0cf;
  --color-brown-coffee-300: #d7b9b7;
  --color-brown-coffee-400: #b99997;
  --color-brown-coffee-500: #9e7e7c;
  --color-brown-coffee-600: #826462;
  --color-brown-coffee-700: #6a4e4d;
  --color-brown-coffee-800: #553d3b;
  --color-brown-coffee-900: #472c2b;
  --color-brown-coffee-950: #2b1c1b;
}