Brown to Neon Boneyard Color Palette

About this palette

Brown to Neon Boneyard is a 5-color warm, vintage palette: #683C00 (Brown), #855F4A (Dark Wood), #A28384 (Earthbound), #C0A7C0 (Novel Lilac), #DECCFF (Neon Boneyard). It mixes brown, red, pink, purple tones and feels warm overall. The strongest text pairing is #683C00 on #DECCFF with a contrast ratio of 6.35:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Brown	rgb(104, 60, 0)	hsl(35, 100%, 20%)
Dark Wood	rgb(133, 95, 74)	hsl(21, 29%, 41%)
Earthbound	rgb(162, 131, 132)	hsl(358, 14%, 57%)
Novel Lilac	rgb(192, 167, 192)	hsl(300, 17%, 70%)
Neon Boneyard	rgb(222, 204, 255)	hsl(261, 100%, 90%)

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.

Aa6.35:1 Good#683C00 on #DECCFF
Aa6.35:1 Good#DECCFF on #683C00
Aa4.26:1 Poor#683C00 on #C0A7C0
Aa4.26:1 Poor#C0A7C0 on #683C00
Aa3.80:1 Poor#855F4A on #DECCFF
Aa3.80:1 Poor#DECCFF on #855F4A

Color blindness preview

CSS variables

/* Brown to Neon Boneyard — https://swatchly.xyz/palette/683c00-855f4a-a28384-c0a7c0-deccff */
:root {
  --brown: #683c00;
  --dark-wood: #855f4a;
  --earthbound: #a28384;
  --novel-lilac: #c0a7c0;
  --neon-boneyard: #deccff;
}

Tailwind CSS v4

/* Brown to Neon Boneyard — https://swatchly.xyz/palette/683c00-855f4a-a28384-c0a7c0-deccff */
@theme {
  --color-brown: #683c00;
  --color-brown-50: #fff3e7;
  --color-brown-100: #ffe6cf;
  --color-brown-200: #f7cfaa;
  --color-brown-300: #e5b98e;
  --color-brown-400: #c99969;
  --color-brown-500: #af7e4c;
  --color-brown-600: #936433;
  --color-brown-700: #7a4f20;
  --color-brown-800: #683c00;
  --color-brown-900: #4f2f07;
  --color-brown-950: #341c02;
  --color-dark-wood: #855f4a;
  --color-dark-wood-50: #fff2eb;
  --color-dark-wood-100: #ffe5d6;
  --color-dark-wood-200: #f0cfbd;
  --color-dark-wood-300: #dbb6a3;
  --color-dark-wood-400: #bd9680;
  --color-dark-wood-500: #a17a64;
  --color-dark-wood-600: #855f4a;
  --color-dark-wood-700: #6c4a38;
  --color-dark-wood-800: #563929;
  --color-dark-wood-900: #432b1d;
  --color-dark-wood-950: #2b1a10;
  --color-earthbound: #a28384;
  --color-earthbound-50: #fff3f3;
  --color-earthbound-100: #fde7e8;
  --color-earthbound-200: #ecd4d4;
  --color-earthbound-300: #d9bdbe;
  --color-earthbound-400: #bc9e9f;
  --color-earthbound-500: #a28384;
  --color-earthbound-600: #856869;
  --color-earthbound-700: #6c5152;
  --color-earthbound-800: #553e3f;
  --color-earthbound-900: #422f2f;
  --color-earthbound-950: #2a1c1c;
  --color-novel-lilac: #c0a7c0;
  --color-novel-lilac-50: #fff8ff;
  --color-novel-lilac-100: #fdeefc;
  --color-novel-lilac-200: #eddbed;
  --color-novel-lilac-300: #dbc6da;
  --color-novel-lilac-400: #c0a7c0;
  --color-novel-lilac-500: #a189a1;
  --color-novel-lilac-600: #836c83;
  --color-novel-lilac-700: #695469;
  --color-novel-lilac-800: #523f52;
  --color-novel-lilac-900: #3e2f3e;
  --color-novel-lilac-950: #261b26;
  --color-neon-boneyard: #deccff;
  --color-neon-boneyard-50: #f6f2ff;
  --color-neon-boneyard-100: #eee5ff;
  --color-neon-boneyard-200: #deccff;
  --color-neon-boneyard-300: #c6b7e2;
  --color-neon-boneyard-400: #a897c6;
  --color-neon-boneyard-500: #8d7caa;
  --color-neon-boneyard-600: #72628e;
  --color-neon-boneyard-700: #5b4c74;
  --color-neon-boneyard-800: #483b5d;
  --color-neon-boneyard-900: #372c4a;
  --color-neon-boneyard-950: #231a30;
}