Black Knight to Berry Jam Color Palette

About this palette

Black Knight to Berry Jam is a 4-color dark, cool, monochromatic, gradient palette: #000F1B (Black Knight), #28215D (Indie Go), #453D5A (Storm Is Coming), #5E567B (Berry Jam). It mixes black, purple tones and feels cool overall. The strongest text pairing is #000F1B on #5E567B with a contrast ratio of 2.85:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Knight	rgb(0, 15, 27)	hsl(207, 100%, 5%)
Indie Go	rgb(40, 33, 93)	hsl(247, 48%, 25%)
Storm Is Coming	rgb(69, 61, 90)	hsl(257, 19%, 30%)
Berry Jam	rgb(94, 86, 123)	hsl(253, 18%, 41%)

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

/* Black Knight to Berry Jam — https://swatchly.xyz/palette/000f1b-28215d-453d5a-5e567b */
:root {
  --black-knight: #000f1b;
  --indie-go: #28215d;
  --storm-is-coming: #453d5a;
  --berry-jam: #5e567b;
}

Tailwind CSS v4

/* Black Knight to Berry Jam — https://swatchly.xyz/palette/000f1b-28215d-453d5a-5e567b */
@theme {
  --color-black-knight: #000f1b;
  --color-black-knight-50: #ecf7ff;
  --color-black-knight-100: #deeef9;
  --color-black-knight-200: #c8dae8;
  --color-black-knight-300: #afc4d3;
  --color-black-knight-400: #8ea5b5;
  --color-black-knight-500: #6f8696;
  --color-black-knight-600: #526776;
  --color-black-knight-700: #3b4d5a;
  --color-black-knight-800: #283741;
  --color-black-knight-900: #19242c;
  --color-black-knight-950: #000f1b;
  --color-indie-go: #28215d;
  --color-indie-go-50: #f3f4ff;
  --color-indie-go-100: #e8e9ff;
  --color-indie-go-200: #d1d3ff;
  --color-indie-go-300: #b9baf9;
  --color-indie-go-400: #9898dc;
  --color-indie-go-500: #7c7bbf;
  --color-indie-go-600: #615fa0;
  --color-indie-go-700: #4a4882;
  --color-indie-go-800: #383667;
  --color-indie-go-900: #28215d;
  --color-indie-go-950: #171632;
  --color-storm-is-coming: #453d5a;
  --color-storm-is-coming-50: #f6f3ff;
  --color-storm-is-coming-100: #ede7fe;
  --color-storm-is-coming-200: #d9d3ed;
  --color-storm-is-coming-300: #c3bcda;
  --color-storm-is-coming-400: #a49cbc;
  --color-storm-is-coming-500: #8980a1;
  --color-storm-is-coming-600: #6e6685;
  --color-storm-is-coming-700: #58506c;
  --color-storm-is-coming-800: #453d5a;
  --color-storm-is-coming-900: #352f44;
  --color-storm-is-coming-950: #211d2b;
  --color-berry-jam: #5e567b;
  --color-berry-jam-50: #f5f3ff;
  --color-berry-jam-100: #ece8ff;
  --color-berry-jam-200: #dad4f4;
  --color-berry-jam-300: #c5bee2;
  --color-berry-jam-400: #a79fc6;
  --color-berry-jam-500: #8d85ac;
  --color-berry-jam-600: #746c92;
  --color-berry-jam-700: #5e567b;
  --color-berry-jam-800: #494362;
  --color-berry-jam-900: #38334d;
  --color-berry-jam-950: #231f32;
}