Lacrosse to Shadow Play Color Palette

About this palette

Lacrosse to Shadow Play is a 5-color vintage palette: #2C5E50 (Lacrosse), #AD714C (Not yet Caramel), #C1BBF6 (Purple Illusion), #E7FFF5 (Snow White), #2F1703 (Shadow Play). It mixes turquoise, orange, purple, white, brown tones and feels balanced overall. The strongest text pairing is #E7FFF5 on #2F1703 with a contrast ratio of 16.08:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lacrosse	rgb(44, 94, 80)	hsl(163, 36%, 27%)
Not yet Caramel	rgb(173, 113, 76)	hsl(23, 39%, 49%)
Purple Illusion	rgb(193, 187, 246)	hsl(246, 77%, 85%)
Snow White	rgb(231, 255, 245)	hsl(155, 100%, 95%)
Shadow Play	rgb(47, 23, 3)	hsl(27, 88%, 10%)

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.

Aa16.08:1 Super#E7FFF5 on #2F1703
Aa16.08:1 Super#2F1703 on #E7FFF5
Aa9.40:1 Very good#C1BBF6 on #2F1703
Aa9.40:1 Very good#2F1703 on #C1BBF6
Aa7.09:1 Very good#2C5E50 on #E7FFF5
Aa7.09:1 Very good#E7FFF5 on #2C5E50
Aa4.21:1 Poor#AD714C on #2F1703
Aa4.21:1 Poor#2F1703 on #AD714C

Color blindness preview

CSS variables

/* Lacrosse to Shadow Play — https://swatchly.xyz/palette/2c5e50-ad714c-c1bbf6-e7fff5-2f1703 */
:root {
  --lacrosse: #2c5e50;
  --not-yet-caramel: #ad714c;
  --purple-illusion: #c1bbf6;
  --snow-white: #e7fff5;
  --shadow-play: #2f1703;
}

Tailwind CSS v4

/* Lacrosse to Shadow Play — https://swatchly.xyz/palette/2c5e50-ad714c-c1bbf6-e7fff5-2f1703 */
@theme {
  --color-lacrosse: #2c5e50;
  --color-lacrosse-50: #e0fdf3;
  --color-lacrosse-100: #d3f4e9;
  --color-lacrosse-200: #bbe1d4;
  --color-lacrosse-300: #9fcbbd;
  --color-lacrosse-400: #7bac9d;
  --color-lacrosse-500: #5e9181;
  --color-lacrosse-600: #457567;
  --color-lacrosse-700: #2c5e50;
  --color-lacrosse-800: #22493e;
  --color-lacrosse-900: #17392f;
  --color-lacrosse-950: #0b241d;
  --color-not-yet-caramel: #ad714c;
  --color-not-yet-caramel-50: #fff1e9;
  --color-not-yet-caramel-100: #ffe3d3;
  --color-not-yet-caramel-200: #fbc9ab;
  --color-not-yet-caramel-300: #e8af8e;
  --color-not-yet-caramel-400: #ca8e69;
  --color-not-yet-caramel-500: #ad714c;
  --color-not-yet-caramel-600: #905834;
  --color-not-yet-caramel-700: #764423;
  --color-not-yet-caramel-800: #5f3316;
  --color-not-yet-caramel-900: #4c260d;
  --color-not-yet-caramel-950: #311605;
  --color-purple-illusion: #c1bbf6;
  --color-purple-illusion-50: #f6f5ff;
  --color-purple-illusion-100: #eceaff;
  --color-purple-illusion-200: #d8d4ff;
  --color-purple-illusion-300: #c1bbf6;
  --color-purple-illusion-400: #a19cd2;
  --color-purple-illusion-500: #867fb7;
  --color-purple-illusion-600: #6b6599;
  --color-purple-illusion-700: #554e7e;
  --color-purple-illusion-800: #423c65;
  --color-purple-illusion-900: #322d50;
  --color-purple-illusion-950: #1f1b34;
  --color-snow-white: #e7fff5;
  --color-snow-white-50: #e7fff5;
  --color-snow-white-100: #e4f2ec;
  --color-snow-white-200: #cdded7;
  --color-snow-white-300: #b4c8c0;
  --color-snow-white-400: #93a89f;
  --color-snow-white-500: #778c84;
  --color-snow-white-600: #5d7169;
  --color-snow-white-700: #475a53;
  --color-snow-white-800: #364740;
  --color-snow-white-900: #283631;
  --color-snow-white-950: #18221e;
  --color-shadow-play: #2f1703;
  --color-shadow-play-50: #fff2e9;
  --color-shadow-play-100: #fce7d7;
  --color-shadow-play-200: #ebd2c0;
  --color-shadow-play-300: #d7bba6;
  --color-shadow-play-400: #b99b84;
  --color-shadow-play-500: #9d7f68;
  --color-shadow-play-600: #81644f;
  --color-shadow-play-700: #684e3b;
  --color-shadow-play-800: #523c2b;
  --color-shadow-play-900: #402d1f;
  --color-shadow-play-950: #2f1703;
}