Crow to Prunella Color Palette

About this palette

Crow to Prunella is a 4-color dark, cool, gradient palette: #17051B (Crow), #002539 (Midnight Dreams), #294048 (Depths of the Nile), #80417F (Prunella). It mixes black, blue, gray, pink tones and feels cool overall. The strongest text pairing is #17051B on #80417F with a contrast ratio of 2.78:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Crow	rgb(23, 5, 27)	hsl(289, 69%, 6%)
Midnight Dreams	rgb(0, 37, 57)	hsl(201, 100%, 11%)
Depths of the Nile	rgb(41, 64, 72)	hsl(195, 27%, 22%)
Prunella	rgb(128, 65, 127)	hsl(301, 33%, 38%)

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.

Color blindness preview

CSS variables

/* Crow to Prunella — https://swatchly.xyz/palette/17051b-002539-294048-80417f */
:root {
  --crow: #17051b;
  --midnight-dreams: #002539;
  --depths-of-the-nile: #294048;
  --prunella: #80417f;
}

Tailwind CSS v4

/* Crow to Prunella — https://swatchly.xyz/palette/17051b-002539-294048-80417f */
@theme {
  --color-crow: #17051b;
  --color-crow-50: #fcf0ff;
  --color-crow-100: #f5e5f9;
  --color-crow-200: #e3d0e8;
  --color-crow-300: #ceb8d3;
  --color-crow-400: #b098b5;
  --color-crow-500: #917896;
  --color-crow-600: #725b76;
  --color-crow-700: #56425a;
  --color-crow-800: #3e2e41;
  --color-crow-900: #2a1e2c;
  --color-crow-950: #17051b;
  --color-midnight-dreams: #002539;
  --color-midnight-dreams-50: #ecf7ff;
  --color-midnight-dreams-100: #d8efff;
  --color-midnight-dreams-200: #bfdcf0;
  --color-midnight-dreams-300: #a5c6dc;
  --color-midnight-dreams-400: #83a7bf;
  --color-midnight-dreams-500: #678ca4;
  --color-midnight-dreams-600: #4e7289;
  --color-midnight-dreams-700: #3a5b70;
  --color-midnight-dreams-800: #2b485b;
  --color-midnight-dreams-900: #1f3848;
  --color-midnight-dreams-950: #002539;
  --color-depths-of-the-nile: #294048;
  --color-depths-of-the-nile-50: #e9f8fe;
  --color-depths-of-the-nile-100: #deeff5;
  --color-depths-of-the-nile-200: #c8dbe3;
  --color-depths-of-the-nile-300: #adc4cc;
  --color-depths-of-the-nile-400: #8ba4ad;
  --color-depths-of-the-nile-500: #6e8790;
  --color-depths-of-the-nile-600: #546c74;
  --color-depths-of-the-nile-700: #3e545b;
  --color-depths-of-the-nile-800: #294048;
  --color-depths-of-the-nile-900: #213036;
  --color-depths-of-the-nile-950: #131d21;
  --color-prunella: #80417f;
  --color-prunella-50: #fff0fe;
  --color-prunella-100: #ffe0fd;
  --color-prunella-200: #f9c5f7;
  --color-prunella-300: #e8ade5;
  --color-prunella-400: #cd8bca;
  --color-prunella-500: #b270b1;
  --color-prunella-600: #975796;
  --color-prunella-700: #80417f;
  --color-prunella-800: #663165;
  --color-prunella-900: #502350;
  --color-prunella-950: #341334;
}