Black Knight to Pine Scented Lagoon Color Palette

About this palette

Black Knight to Pine Scented Lagoon is a 5-color dark, cool, gradient palette: #000D0C (Black Knight), #00241E (Nightmare), #183335 (Elite Teal), #285A34 (Pine), #006F76 (Pine Scented Lagoon). It mixes black, turquoise, gray, green tones and feels cool overall. The strongest text pairing is #000D0C on #006F76 with a contrast ratio of 3.33:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Knight	rgb(0, 13, 12)	hsl(175, 100%, 3%)
Nightmare	rgb(0, 36, 30)	hsl(170, 100%, 7%)
Elite Teal	rgb(24, 51, 53)	hsl(184, 38%, 15%)
Pine	rgb(40, 90, 52)	hsl(134, 38%, 25%)
Pine Scented Lagoon	rgb(0, 111, 118)	hsl(184, 100%, 23%)

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.33:1 Poor#000D0C on #006F76
Aa3.33:1 Poor#006F76 on #000D0C

Color blindness preview

CSS variables

/* Black Knight to Pine Scented Lagoon — https://swatchly.xyz/palette/000d0c-00241e-183335-285a34-006f76 */
:root {
  --black-knight: #000d0c;
  --nightmare: #00241e;
  --elite-teal: #183335;
  --pine: #285a34;
  --pine-scented-lagoon: #006f76;
}

Tailwind CSS v4

/* Black Knight to Pine Scented Lagoon — https://swatchly.xyz/palette/000d0c-00241e-183335-285a34-006f76 */
@theme {
  --color-black-knight: #000d0c;
  --color-black-knight-50: #ebf8f7;
  --color-black-knight-100: #e0efed;
  --color-black-knight-200: #cbdcda;
  --color-black-knight-300: #b2c6c4;
  --color-black-knight-400: #91a7a5;
  --color-black-knight-500: #718684;
  --color-black-knight-600: #536765;
  --color-black-knight-700: #3b4c4b;
  --color-black-knight-800: #273534;
  --color-black-knight-900: #182121;
  --color-black-knight-950: #000d0c;
  --color-nightmare: #00241e;
  --color-nightmare-50: #e5fbf5;
  --color-nightmare-100: #d9f1eb;
  --color-nightmare-200: #c2dfd8;
  --color-nightmare-300: #a9c9c1;
  --color-nightmare-400: #87aaa2;
  --color-nightmare-500: #6a8f86;
  --color-nightmare-600: #50736c;
  --color-nightmare-700: #3c5c55;
  --color-nightmare-800: #2c4741;
  --color-nightmare-900: #1f3732;
  --color-nightmare-950: #00241e;
  --color-elite-teal: #183335;
  --color-elite-teal-50: #e8f9fa;
  --color-elite-teal-100: #dcf0f1;
  --color-elite-teal-200: #c6ddde;
  --color-elite-teal-300: #adc7c9;
  --color-elite-teal-400: #8aa7a9;
  --color-elite-teal-500: #6d8b8d;
  --color-elite-teal-600: #536f71;
  --color-elite-teal-700: #3e5759;
  --color-elite-teal-800: #2d4344;
  --color-elite-teal-900: #183335;
  --color-elite-teal-950: #121e1f;
  --color-pine: #285a34;
  --color-pine-50: #e1fee5;
  --color-pine-100: #d4f5d9;
  --color-pine-200: #bae2c0;
  --color-pine-300: #9ecba5;
  --color-pine-400: #79ac82;
  --color-pine-500: #5c8f66;
  --color-pine-600: #42724c;
  --color-pine-700: #285a34;
  --color-pine-800: #204629;
  --color-pine-900: #16361e;
  --color-pine-950: #0b2210;
  --color-pine-scented-lagoon: #006f76;
  --color-pine-scented-lagoon-50: #dcfcff;
  --color-pine-scented-lagoon-100: #c0f4f9;
  --color-pine-scented-lagoon-200: #a1e1e6;
  --color-pine-scented-lagoon-300: #80cad0;
  --color-pine-scented-lagoon-400: #55a9b0;
  --color-pine-scented-lagoon-500: #328c93;
  --color-pine-scented-lagoon-600: #006f76;
  --color-pine-scented-lagoon-700: #00585e;
  --color-pine-scented-lagoon-800: #00454a;
  --color-pine-scented-lagoon-900: #003639;
  --color-pine-scented-lagoon-950: #002224;
}