Long Passionate Night to Neon Boneyard color palette

54365DLong Passionate Night 874915Otterly Brown 4183A7Underwater Moonlight A0B991Norway E3C7F5Neon Boneyard

Open in generator Export PNG, PDF, ASE…

About this palette

Long Passionate Night to Neon Boneyard is a 5-color cool palette: #54365D (Long Passionate Night), #874915 (Otterly Brown), #4183A7 (Underwater Moonlight), #A0B991 (Norway), #E3C7F5 (Neon Boneyard). It mixes purple, brown, blue, green tones and feels cool overall. The strongest text pairing is #54365D on #E3C7F5 with a contrast ratio of 6.67:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Long Passionate Night	rgb(84, 54, 93)	hsl(286, 27%, 29%)
Otterly Brown	rgb(135, 73, 21)	hsl(27, 73%, 31%)
Underwater Moonlight	rgb(65, 131, 167)	hsl(201, 44%, 45%)
Norway	rgb(160, 185, 145)	hsl(98, 22%, 65%)
Neon Boneyard	rgb(227, 199, 245)	hsl(277, 70%, 87%)

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.67:1 Good#54365D on #E3C7F5
Aa6.67:1 Good#E3C7F5 on #54365D
Aa4.77:1 Good#54365D on #A0B991
Aa4.77:1 Good#A0B991 on #54365D
Aa4.59:1 Good#874915 on #E3C7F5
Aa4.59:1 Good#E3C7F5 on #874915
Aa3.29:1 Poor#874915 on #A0B991
Aa3.29:1 Poor#A0B991 on #874915

Color blindness preview

CSS variables

/* Long Passionate Night to Neon Boneyard — https://swatchly.xyz/palette/54365d-874915-4183a7-a0b991-e3c7f5 */
:root {
  --long-passionate-night: #54365d;
  --otterly-brown: #874915;
  --underwater-moonlight: #4183a7;
  --norway: #a0b991;
  --neon-boneyard: #e3c7f5;
}

Tailwind CSS v4

/* Long Passionate Night to Neon Boneyard — https://swatchly.xyz/palette/54365d-874915-4183a7-a0b991-e3c7f5 */
@theme {
  --color-long-passionate-night: #54365d;
  --color-long-passionate-night-50: #fcf1ff;
  --color-long-passionate-night-100: #f8e2ff;
  --color-long-passionate-night-200: #e7cdef;
  --color-long-passionate-night-300: #d3b5dc;
  --color-long-passionate-night-400: #b594bf;
  --color-long-passionate-night-500: #9a79a4;
  --color-long-passionate-night-600: #7f5f88;
  --color-long-passionate-night-700: #664a6f;
  --color-long-passionate-night-800: #54365d;
  --color-long-passionate-night-900: #402a46;
  --color-long-passionate-night-950: #28192d;
  --color-otterly-brown: #874915;
  --color-otterly-brown-50: #fff2ea;
  --color-otterly-brown-100: #ffe6d5;
  --color-otterly-brown-200: #ffcdab;
  --color-otterly-brown-300: #f0b58c;
  --color-otterly-brown-400: #d59466;
  --color-otterly-brown-500: #bb7949;
  --color-otterly-brown-600: #9f5f2f;
  --color-otterly-brown-700: #874915;
  --color-otterly-brown-800: #6b380b;
  --color-otterly-brown-900: #552902;
  --color-otterly-brown-950: #381800;
  --color-underwater-moonlight: #4183a7;
  --color-underwater-moonlight-50: #e7f6ff;
  --color-underwater-moonlight-100: #ceecff;
  --color-underwater-moonlight-200: #a6d9f8;
  --color-underwater-moonlight-300: #87c1e3;
  --color-underwater-moonlight-400: #60a0c5;
  --color-underwater-moonlight-500: #4183a7;
  --color-underwater-moonlight-600: #2a6a8c;
  --color-underwater-moonlight-700: #185573;
  --color-underwater-moonlight-800: #0b435d;
  --color-underwater-moonlight-900: #03344a;
  --color-underwater-moonlight-950: #012131;
  --color-norway: #a0b991;
  --color-norway-50: #f2ffeb;
  --color-norway-100: #e9f8e1;
  --color-norway-200: #d6e8cc;
  --color-norway-300: #c0d5b4;
  --color-norway-400: #a0b991;
  --color-norway-500: #839a74;
  --color-norway-600: #667d58;
  --color-norway-700: #4e6341;
  --color-norway-800: #3b4d2f;
  --color-norway-900: #2b3a21;
  --color-norway-950: #182311;
  --color-neon-boneyard: #e3c7f5;
  --color-neon-boneyard-50: #f8eeff;
  --color-neon-boneyard-100: #f2e0fe;
  --color-neon-boneyard-200: #e3c7f5;
  --color-neon-boneyard-300: #cbb3da;
  --color-neon-boneyard-400: #ad93be;
  --color-neon-boneyard-500: #9278a3;
  --color-neon-boneyard-600: #785f87;
  --color-neon-boneyard-700: #614a6e;
  --color-neon-boneyard-800: #4d3959;
  --color-neon-boneyard-900: #3c2b46;
  --color-neon-boneyard-950: #261a2d;
}