Neon Boneyard to Atlas Cedar color palette

E8C6FFNeon Boneyard E28E7FNude Flamingo 2D2F00Wasabi Nori 007B91Celestial 542A81Night Fever 4CA3B1Atlas Cedar

Open in generator Export PNG, PDF, ASE…

About this palette

Neon Boneyard to Atlas Cedar is a 6-color cool palette: #E8C6FF (Neon Boneyard), #E28E7F (Nude Flamingo), #2D2F00 (Wasabi Nori), #007B91 (Celestial), #542A81 (Night Fever), #4CA3B1 (Atlas Cedar). It mixes purple, red, green, blue, turquoise tones and feels cool overall. The strongest text pairing is #E8C6FF on #2D2F00 with a contrast ratio of 9.19:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Boneyard	rgb(232, 198, 255)	hsl(276, 100%, 89%)
Nude Flamingo	rgb(226, 142, 127)	hsl(9, 63%, 69%)
Wasabi Nori	rgb(45, 47, 0)	hsl(63, 100%, 9%)
Celestial	rgb(0, 123, 145)	hsl(189, 100%, 28%)
Night Fever	rgb(84, 42, 129)	hsl(269, 51%, 34%)
Atlas Cedar	rgb(76, 163, 177)	hsl(188, 40%, 50%)

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.19:1 Very good#E8C6FF on #2D2F00
Aa9.19:1 Very good#2D2F00 on #E8C6FF
Aa6.89:1 Good#E8C6FF on #542A81
Aa6.89:1 Good#542A81 on #E8C6FF
Aa5.54:1 Good#E28E7F on #2D2F00
Aa5.54:1 Good#2D2F00 on #E28E7F
Aa4.73:1 Good#2D2F00 on #4CA3B1
Aa4.73:1 Good#4CA3B1 on #2D2F00

Color blindness preview

CSS variables

/* Neon Boneyard to Atlas Cedar — https://swatchly.xyz/palette/e8c6ff-e28e7f-2d2f00-007b91-542a81-4ca3b1 */
:root {
  --neon-boneyard: #e8c6ff;
  --nude-flamingo: #e28e7f;
  --wasabi-nori: #2d2f00;
  --celestial: #007b91;
  --night-fever: #542a81;
  --atlas-cedar: #4ca3b1;
}

Tailwind CSS v4

/* Neon Boneyard to Atlas Cedar — https://swatchly.xyz/palette/e8c6ff-e28e7f-2d2f00-007b91-542a81-4ca3b1 */
@theme {
  --color-neon-boneyard: #e8c6ff;
  --color-neon-boneyard-50: #f9f0ff;
  --color-neon-boneyard-100: #f3e2ff;
  --color-neon-boneyard-200: #e8c6ff;
  --color-neon-boneyard-300: #cfb2e2;
  --color-neon-boneyard-400: #b192c6;
  --color-neon-boneyard-500: #9676ab;
  --color-neon-boneyard-600: #7b5d8f;
  --color-neon-boneyard-700: #634875;
  --color-neon-boneyard-800: #4f375e;
  --color-neon-boneyard-900: #3d294a;
  --color-neon-boneyard-950: #271830;
  --color-nude-flamingo: #e28e7f;
  --color-nude-flamingo-50: #fff5f3;
  --color-nude-flamingo-100: #ffe9e4;
  --color-nude-flamingo-200: #ffcfc6;
  --color-nude-flamingo-300: #fab1a4;
  --color-nude-flamingo-400: #e28e7f;
  --color-nude-flamingo-500: #c27264;
  --color-nude-flamingo-600: #a35649;
  --color-nude-flamingo-700: #864035;
  --color-nude-flamingo-800: #6c2f25;
  --color-nude-flamingo-900: #552119;
  --color-nude-flamingo-950: #37120c;
  --color-wasabi-nori: #2d2f00;
  --color-wasabi-nori-50: #f5f8dd;
  --color-wasabi-nori-100: #ebeed0;
  --color-wasabi-nori-200: #d7dbb7;
  --color-wasabi-nori-300: #c1c59c;
  --color-wasabi-nori-400: #a0a577;
  --color-wasabi-nori-500: #84885a;
  --color-wasabi-nori-600: #686c40;
  --color-wasabi-nori-700: #51542c;
  --color-wasabi-nori-800: #3d3f1d;
  --color-wasabi-nori-900: #2d2f00;
  --color-wasabi-nori-950: #1a1c08;
  --color-celestial: #007b91;
  --color-celestial-50: #e5f9ff;
  --color-celestial-100: #cbf4ff;
  --color-celestial-200: #a3e5f6;
  --color-celestial-300: #83d0e4;
  --color-celestial-400: #57b1c7;
  --color-celestial-500: #3396ad;
  --color-celestial-600: #007b91;
  --color-celestial-700: #006274;
  --color-celestial-800: #004c5b;
  --color-celestial-900: #003b46;
  --color-celestial-950: #00252d;
  --color-night-fever: #542a81;
  --color-night-fever-50: #f7f3ff;
  --color-night-fever-100: #efe6ff;
  --color-night-fever-200: #e0cdff;
  --color-night-fever-300: #d0afff;
  --color-night-fever-400: #b38ce8;
  --color-night-fever-500: #9870cd;
  --color-night-fever-600: #7d56af;
  --color-night-fever-700: #664192;
  --color-night-fever-800: #542a81;
  --color-night-fever-900: #402360;
  --color-night-fever-950: #281340;
  --color-atlas-cedar: #4ca3b1;
  --color-atlas-cedar-50: #d3f8ff;
  --color-atlas-cedar-100: #b9eff9;
  --color-atlas-cedar-200: #9adbe6;
  --color-atlas-cedar-300: #78c4d0;
  --color-atlas-cedar-400: #4ca3b1;
  --color-atlas-cedar-500: #2f8997;
  --color-atlas-cedar-600: #10707d;
  --color-atlas-cedar-700: #005a65;
  --color-atlas-cedar-800: #004751;
  --color-atlas-cedar-900: #003840;
  --color-atlas-cedar-950: #00242a;
}