Blackn’t to Berry Jam Color Palette

About this palette

Blackn’t to Berry Jam is a 4-color dark, cool, gradient palette: #000D05 (Blackn’t), #003233 (Elite Teal), #244C67 (Seafarer), #605A8C (Berry Jam). It mixes black, turquoise, blue, purple tones and feels cool overall. The strongest text pairing is #000D05 on #605A8C with a contrast ratio of 3.15:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(0, 13, 5)	hsl(143, 100%, 3%)
Elite Teal	rgb(0, 50, 51)	hsl(181, 100%, 10%)
Seafarer	rgb(36, 76, 103)	hsl(204, 48%, 27%)
Berry Jam	rgb(96, 90, 140)	hsl(247, 22%, 45%)

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.

Aa3.15:1 Poor#000D05 on #605A8C
Aa3.15:1 Poor#605A8C on #000D05

Color blindness preview

CSS variables

/* Blackn’t to Berry Jam — https://swatchly.xyz/palette/000d05-003233-244c67-605a8c */
:root {
  --blackn-t: #000d05;
  --elite-teal: #003233;
  --seafarer: #244c67;
  --berry-jam: #605a8c;
}

Tailwind CSS v4

/* Blackn’t to Berry Jam — https://swatchly.xyz/palette/000d05-003233-244c67-605a8c */
@theme {
  --color-blackn-t: #000d05;
  --color-blackn-t-50: #ecf9f1;
  --color-blackn-t-100: #e1f0e6;
  --color-blackn-t-200: #cbddd2;
  --color-blackn-t-300: #b3c7ba;
  --color-blackn-t-400: #92a89a;
  --color-blackn-t-500: #71877a;
  --color-blackn-t-600: #54685c;
  --color-blackn-t-700: #3b4d42;
  --color-blackn-t-800: #27352d;
  --color-blackn-t-900: #17211b;
  --color-blackn-t-950: #000d05;
  --color-elite-teal: #003233;
  --color-elite-teal-50: #e1fbfb;
  --color-elite-teal-100: #d5f2f2;
  --color-elite-teal-200: #bddfe0;
  --color-elite-teal-300: #a2caca;
  --color-elite-teal-400: #7da9aa;
  --color-elite-teal-500: #5f8c8d;
  --color-elite-teal-600: #457070;
  --color-elite-teal-700: #305758;
  --color-elite-teal-800: #204242;
  --color-elite-teal-900: #003233;
  --color-elite-teal-950: #0a1d1d;
  --color-seafarer: #244c67;
  --color-seafarer-50: #ecf7ff;
  --color-seafarer-100: #d9efff;
  --color-seafarer-200: #bcdcf4;
  --color-seafarer-300: #a3c7e2;
  --color-seafarer-400: #81a9c7;
  --color-seafarer-500: #658fad;
  --color-seafarer-600: #4d7591;
  --color-seafarer-700: #395e79;
  --color-seafarer-800: #244c67;
  --color-seafarer-900: #1e3a4e;
  --color-seafarer-950: #102533;
  --color-berry-jam: #605a8c;
  --color-berry-jam-50: #f4f4ff;
  --color-berry-jam-100: #e8e6ff;
  --color-berry-jam-200: #d1cefa;
  --color-berry-jam-300: #b9b5e6;
  --color-berry-jam-400: #9893c8;
  --color-berry-jam-500: #7b76aa;
  --color-berry-jam-600: #605a8c;
  --color-berry-jam-700: #4c4671;
  --color-berry-jam-800: #3b365b;
  --color-berry-jam-900: #2d2949;
  --color-berry-jam-950: #1c192f;
}