Shadow Play to Snow White Color Palette

About this palette

Shadow Play to Snow White is a 5-color vintage palette: #32170D (Shadow Play), #01566F (Night Kite), #009C6A (Prairie), #ED9DD4 (Violet Kiss), #E8FFF3 (Snow White). It mixes brown, blue, green, pink, white tones and feels balanced overall. The strongest text pairing is #32170D on #E8FFF3 with a contrast ratio of 15.85:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shadow Play	rgb(50, 23, 13)	hsl(16, 59%, 12%)
Night Kite	rgb(1, 86, 111)	hsl(194, 98%, 22%)
Prairie	rgb(0, 156, 106)	hsl(161, 100%, 31%)
Violet Kiss	rgb(237, 157, 212)	hsl(319, 69%, 77%)
Snow White	rgb(232, 255, 243)	hsl(149, 100%, 95%)

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.

Aa15.85:1 Super#32170D on #E8FFF3
Aa15.85:1 Super#E8FFF3 on #32170D
Aa8.21:1 Very good#32170D on #ED9DD4
Aa8.21:1 Very good#ED9DD4 on #32170D
Aa7.82:1 Very good#01566F on #E8FFF3
Aa7.82:1 Very good#E8FFF3 on #01566F
Aa4.72:1 Good#32170D on #009C6A
Aa4.72:1 Good#009C6A on #32170D

Color blindness preview

CSS variables

/* Shadow Play to Snow White — https://swatchly.xyz/palette/32170d-01566f-009c6a-ed9dd4-e8fff3 */
:root {
  --shadow-play: #32170d;
  --night-kite: #01566f;
  --prairie: #009c6a;
  --violet-kiss: #ed9dd4;
  --snow-white: #e8fff3;
}

Tailwind CSS v4

/* Shadow Play to Snow White — https://swatchly.xyz/palette/32170d-01566f-009c6a-ed9dd4-e8fff3 */
@theme {
  --color-shadow-play: #32170d;
  --color-shadow-play-50: #fff2ed;
  --color-shadow-play-100: #fee5dd;
  --color-shadow-play-200: #edd0c6;
  --color-shadow-play-300: #d9b9ad;
  --color-shadow-play-400: #bb998c;
  --color-shadow-play-500: #a07d71;
  --color-shadow-play-600: #846357;
  --color-shadow-play-700: #6b4d43;
  --color-shadow-play-800: #553c32;
  --color-shadow-play-900: #432d25;
  --color-shadow-play-950: #32170d;
  --color-night-kite: #01566f;
  --color-night-kite-50: #e9f8ff;
  --color-night-kite-100: #d1f1ff;
  --color-night-kite-200: #acdff5;
  --color-night-kite-300: #8dc8e1;
  --color-night-kite-400: #66a8c2;
  --color-night-kite-500: #468ba5;
  --color-night-kite-600: #2a6e87;
  --color-night-kite-700: #01566f;
  --color-night-kite-800: #074356;
  --color-night-kite-900: #013444;
  --color-night-kite-950: #00202b;
  --color-prairie: #009c6a;
  --color-prairie-50: #daffeb;
  --color-prairie-100: #b8fdd9;
  --color-prairie-200: #98ebc2;
  --color-prairie-300: #74d7a8;
  --color-prairie-400: #41b886;
  --color-prairie-500: #009c6a;
  --color-prairie-600: #007e55;
  --color-prairie-700: #006442;
  --color-prairie-800: #004e33;
  --color-prairie-900: #003d27;
  --color-prairie-950: #002617;
  --color-violet-kiss: #ed9dd4;
  --color-violet-kiss-50: #ffecf8;
  --color-violet-kiss-100: #ffdbf2;
  --color-violet-kiss-200: #fbbce6;
  --color-violet-kiss-300: #ed9dd4;
  --color-violet-kiss-400: #cb80b4;
  --color-violet-kiss-500: #b0659a;
  --color-violet-kiss-600: #934c7f;
  --color-violet-kiss-700: #793967;
  --color-violet-kiss-800: #622a53;
  --color-violet-kiss-900: #4e1e41;
  --color-violet-kiss-950: #33102a;
  --color-snow-white: #e8fff3;
  --color-snow-white-50: #e8fff3;
  --color-snow-white-100: #e4f2eb;
  --color-snow-white-200: #ceded6;
  --color-snow-white-300: #b5c8be;
  --color-snow-white-400: #94a89e;
  --color-snow-white-500: #788c82;
  --color-snow-white-600: #5d7167;
  --color-snow-white-700: #485a51;
  --color-snow-white-800: #37473f;
  --color-snow-white-900: #293630;
  --color-snow-white-950: #18221d;
}