PCB Green to Magentle Color Palette

About this palette

PCB Green to Magentle is a 5-color cool palette: #002C0A (PCB Green), #9CD59D (Botanist), #6B0B6F (Extraviolet), #C27DD4 (Lavendless), #A624A1 (Magentle). It mixes green, purple, pink tones and feels cool overall. The strongest text pairing is #002C0A on #9CD59D with a contrast ratio of 9.10:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
PCB Green	rgb(0, 44, 10)	hsl(134, 100%, 9%)
Botanist	rgb(156, 213, 157)	hsl(121, 40%, 72%)
Extraviolet	rgb(107, 11, 111)	hsl(298, 82%, 24%)
Lavendless	rgb(194, 125, 212)	hsl(288, 50%, 66%)
Magentle	rgb(166, 36, 161)	hsl(302, 64%, 40%)

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.

Aa9.10:1 Very good#002C0A on #9CD59D
Aa9.10:1 Very good#9CD59D on #002C0A
Aa6.53:1 Good#9CD59D on #6B0B6F
Aa6.53:1 Good#6B0B6F on #9CD59D
Aa5.26:1 Good#002C0A on #C27DD4
Aa5.26:1 Good#C27DD4 on #002C0A
Aa3.77:1 Poor#6B0B6F on #C27DD4
Aa3.77:1 Poor#C27DD4 on #6B0B6F

Color blindness preview

CSS variables

/* PCB Green to Magentle — https://swatchly.xyz/palette/002c0a-9cd59d-6b0b6f-c27dd4-a624a1 */
:root {
  --pcb-green: #002c0a;
  --botanist: #9cd59d;
  --extraviolet: #6b0b6f;
  --lavendless: #c27dd4;
  --magentle: #a624a1;
}

Tailwind CSS v4

/* PCB Green to Magentle — https://swatchly.xyz/palette/002c0a-9cd59d-6b0b6f-c27dd4-a624a1 */
@theme {
  --color-pcb-green: #002c0a;
  --color-pcb-green-50: #e4fde5;
  --color-pcb-green-100: #d8f4da;
  --color-pcb-green-200: #c0e2c3;
  --color-pcb-green-300: #a6cda9;
  --color-pcb-green-400: #83ae87;
  --color-pcb-green-500: #68946c;
  --color-pcb-green-600: #4f7954;
  --color-pcb-green-700: #3b6240;
  --color-pcb-green-800: #2c4e30;
  --color-pcb-green-900: #203e24;
  --color-pcb-green-950: #002c0a;
  --color-botanist: #9cd59d;
  --color-botanist-50: #e5ffe5;
  --color-botanist-100: #d6f8d6;
  --color-botanist-200: #bee7be;
  --color-botanist-300: #9cd59d;
  --color-botanist-400: #7fb480;
  --color-botanist-500: #619863;
  --color-botanist-600: #477c49;
  --color-botanist-700: #326335;
  --color-botanist-800: #234e26;
  --color-botanist-900: #173c1a;
  --color-botanist-950: #0b260d;
  --color-extraviolet: #6b0b6f;
  --color-extraviolet-50: #ffefff;
  --color-extraviolet-100: #ffdfff;
  --color-extraviolet-200: #ffbeff;
  --color-extraviolet-300: #f09ff1;
  --color-extraviolet-400: #d47bd6;
  --color-extraviolet-500: #b75dba;
  --color-extraviolet-600: #9a429c;
  --color-extraviolet-700: #7e2d81;
  --color-extraviolet-800: #6b0b6f;
  --color-extraviolet-900: #501253;
  --color-extraviolet-950: #340736;
  --color-lavendless: #c27dd4;
  --color-lavendless-50: #fbeeff;
  --color-lavendless-100: #f8deff;
  --color-lavendless-200: #f1beff;
  --color-lavendless-300: #dfa2ef;
  --color-lavendless-400: #c27dd4;
  --color-lavendless-500: #a663b8;
  --color-lavendless-600: #8a4a9b;
  --color-lavendless-700: #713680;
  --color-lavendless-800: #5b2768;
  --color-lavendless-900: #481b53;
  --color-lavendless-950: #2f0f37;
  --color-magentle: #a624a1;
  --color-magentle-50: #fff0fd;
  --color-magentle-100: #ffdffb;
  --color-magentle-200: #ffbdf8;
  --color-magentle-300: #ff90f7;
  --color-magentle-400: #e268db;
  --color-magentle-500: #c546be;
  --color-magentle-600: #a624a1;
  --color-magentle-700: #880d84;
  --color-magentle-800: #6d006a;
  --color-magentle-900: #560053;
  --color-magentle-950: #380036;
}