Pine Needle to Black Knight Color Palette

About this palette

Pine Needle to Black Knight is a 5-color dark, cool palette: #314C3B (Pine Needle), #006A7A (Teal With It), #282A45 (Midnight Masquerade), #002A21 (Swamp Thing), #000F12 (Black Knight). It mixes green, turquoise, purple, black tones and feels cool overall. The strongest text pairing is #006A7A on #000F12 with a contrast ratio of 3.10:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Needle	rgb(49, 76, 59)	hsl(142, 22%, 25%)
Teal With It	rgb(0, 106, 122)	hsl(188, 100%, 24%)
Midnight Masquerade	rgb(40, 42, 69)	hsl(236, 27%, 21%)
Swamp Thing	rgb(0, 42, 33)	hsl(167, 100%, 8%)
Black Knight	rgb(0, 15, 18)	hsl(190, 100%, 4%)

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.10:1 Poor#006A7A on #000F12
Aa3.10:1 Poor#000F12 on #006A7A

Color blindness preview

CSS variables

/* Pine Needle to Black Knight — https://swatchly.xyz/palette/314c3b-006a7a-282a45-002a21-000f12 */
:root {
  --pine-needle: #314c3b;
  --teal-with-it: #006a7a;
  --midnight-masquerade: #282a45;
  --swamp-thing: #002a21;
  --black-knight: #000f12;
}

Tailwind CSS v4

/* Pine Needle to Black Knight — https://swatchly.xyz/palette/314c3b-006a7a-282a45-002a21-000f12 */
@theme {
  --color-pine-needle: #314c3b;
  --color-pine-needle-50: #e9faee;
  --color-pine-needle-100: #ddf1e4;
  --color-pine-needle-200: #c7decf;
  --color-pine-needle-300: #afc9b8;
  --color-pine-needle-400: #8eab98;
  --color-pine-needle-500: #73907d;
  --color-pine-needle-600: #597563;
  --color-pine-needle-700: #455e4e;
  --color-pine-needle-800: #314c3b;
  --color-pine-needle-900: #273a2e;
  --color-pine-needle-950: #16241c;
  --color-teal-with-it: #006a7a;
  --color-teal-with-it-50: #e3faff;
  --color-teal-with-it-100: #c6f5ff;
  --color-teal-with-it-200: #aae5f1;
  --color-teal-with-it-300: #8ed1df;
  --color-teal-with-it-400: #67b4c4;
  --color-teal-with-it-500: #479aab;
  --color-teal-with-it-600: #298090;
  --color-teal-with-it-700: #006a7a;
  --color-teal-with-it-800: #005360;
  --color-teal-with-it-900: #00404a;
  --color-teal-with-it-950: #002830;
  --color-midnight-masquerade: #282a45;
  --color-midnight-masquerade-50: #f3f4ff;
  --color-midnight-masquerade-100: #e7eaff;
  --color-midnight-masquerade-200: #d2d5f0;
  --color-midnight-masquerade-300: #bbbfdc;
  --color-midnight-masquerade-400: #9a9ebe;
  --color-midnight-masquerade-500: #7d81a1;
  --color-midnight-masquerade-600: #626684;
  --color-midnight-masquerade-700: #4c4f69;
  --color-midnight-masquerade-800: #393b52;
  --color-midnight-masquerade-900: #282a45;
  --color-midnight-masquerade-950: #181927;
  --color-swamp-thing: #002a21;
  --color-swamp-thing-50: #e4fbf4;
  --color-swamp-thing-100: #d8f2ea;
  --color-swamp-thing-200: #c0e0d6;
  --color-swamp-thing-300: #a6cabf;
  --color-swamp-thing-400: #84ab9f;
  --color-swamp-thing-500: #689185;
  --color-swamp-thing-600: #4f766b;
  --color-swamp-thing-700: #3c6055;
  --color-swamp-thing-800: #2c4c43;
  --color-swamp-thing-900: #203c34;
  --color-swamp-thing-950: #002a21;
  --color-black-knight: #000f12;
  --color-black-knight-50: #ebf8fa;
  --color-black-knight-100: #dfeef1;
  --color-black-knight-200: #c9dbde;
  --color-black-knight-300: #b1c5c9;
  --color-black-knight-400: #90a6aa;
  --color-black-knight-500: #70878a;
  --color-black-knight-600: #53686b;
  --color-black-knight-700: #3b4d50;
  --color-black-knight-800: #283639;
  --color-black-knight-900: #192325;
  --color-black-knight-950: #000f12;
}