Herbal Vapours to PCB Green Color Palette

About this palette

Herbal Vapours to PCB Green is a 5-color cool, gradient palette: #E7FDD4 (Herbal Vapours), #7ACEB4 (Bevelled Glass), #00939A (Oasis), #026841 (Jewel), #0D2C01 (PCB Green). It mixes white, turquoise, green tones and feels cool overall. The strongest text pairing is #E7FDD4 on #0D2C01 with a contrast ratio of 14.08:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Herbal Vapours	rgb(231, 253, 212)	hsl(92, 91%, 91%)
Bevelled Glass	rgb(122, 206, 180)	hsl(161, 46%, 64%)
Oasis	rgb(0, 147, 154)	hsl(183, 100%, 30%)
Jewel	rgb(2, 104, 65)	hsl(157, 96%, 21%)
PCB Green	rgb(13, 44, 1)	hsl(103, 96%, 9%)

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.

Aa14.08:1 Super#E7FDD4 on #0D2C01
Aa14.08:1 Super#0D2C01 on #E7FDD4
Aa8.21:1 Very good#7ACEB4 on #0D2C01
Aa8.21:1 Very good#0D2C01 on #7ACEB4
Aa6.34:1 Good#E7FDD4 on #026841
Aa6.34:1 Good#026841 on #E7FDD4
Aa4.09:1 Poor#00939A on #0D2C01
Aa4.09:1 Poor#0D2C01 on #00939A

Color blindness preview

CSS variables

/* Herbal Vapours to PCB Green — https://swatchly.xyz/palette/e7fdd4-7aceb4-00939a-026841-0d2c01 */
:root {
  --herbal-vapours: #e7fdd4;
  --bevelled-glass: #7aceb4;
  --oasis: #00939a;
  --jewel: #026841;
  --pcb-green: #0d2c01;
}

Tailwind CSS v4

/* Herbal Vapours to PCB Green — https://swatchly.xyz/palette/e7fdd4-7aceb4-00939a-026841-0d2c01 */
@theme {
  --color-herbal-vapours: #e7fdd4;
  --color-herbal-vapours-50: #e7fdd4;
  --color-herbal-vapours-100: #e2f0d7;
  --color-herbal-vapours-200: #cdddc0;
  --color-herbal-vapours-300: #b6c8a6;
  --color-herbal-vapours-400: #95a984;
  --color-herbal-vapours-500: #7a8e68;
  --color-herbal-vapours-600: #60734f;
  --color-herbal-vapours-700: #4b5c3b;
  --color-herbal-vapours-800: #39482c;
  --color-herbal-vapours-900: #2b3720;
  --color-herbal-vapours-950: #1a2311;
  --color-bevelled-glass: #7aceb4;
  --color-bevelled-glass-50: #d0feee;
  --color-bevelled-glass-100: #c0f4e2;
  --color-bevelled-glass-200: #a3e2cd;
  --color-bevelled-glass-300: #7aceb4;
  --color-bevelled-glass-400: #5eae96;
  --color-bevelled-glass-500: #3e947c;
  --color-bevelled-glass-600: #227963;
  --color-bevelled-glass-700: #08624e;
  --color-bevelled-glass-800: #004e3d;
  --color-bevelled-glass-900: #003d2f;
  --color-bevelled-glass-950: #00261d;
  --color-oasis: #00939a;
  --color-oasis-50: #d7fdff;
  --color-oasis-100: #b6f7fb;
  --color-oasis-200: #96e5e9;
  --color-oasis-300: #72cfd5;
  --color-oasis-400: #40b0b6;
  --color-oasis-500: #00939a;
  --color-oasis-600: #00767c;
  --color-oasis-700: #005e63;
  --color-oasis-800: #004a4e;
  --color-oasis-900: #00393c;
  --color-oasis-950: #002426;
  --color-jewel: #026841;
  --color-jewel-50: #ddffea;
  --color-jewel-100: #c7f9dc;
  --color-jewel-200: #ace8c6;
  --color-jewel-300: #8fd4ad;
  --color-jewel-400: #68b68c;
  --color-jewel-500: #489a70;
  --color-jewel-600: #2b7f57;
  --color-jewel-700: #026841;
  --color-jewel-800: #015232;
  --color-jewel-900: #003f25;
  --color-jewel-950: #002816;
  --color-pcb-green: #0d2c01;
  --color-pcb-green-50: #e7fde1;
  --color-pcb-green-100: #dcf3d4;
  --color-pcb-green-200: #c5e1bc;
  --color-pcb-green-300: #accca2;
  --color-pcb-green-400: #8bad7f;
  --color-pcb-green-500: #709364;
  --color-pcb-green-600: #57784c;
  --color-pcb-green-700: #436239;
  --color-pcb-green-800: #334e2a;
  --color-pcb-green-900: #273e1f;
  --color-pcb-green-950: #0d2c01;
}