Pitch-Black Forests to Mintastic Color Palette

About this palette

Pitch-Black Forests to Mintastic is a 4-color cool, earthy, monochromatic, gradient palette: #00311A (Pitch-Black Forests), #00714C (Into the Green), #00D08B (Magical Malachite), #BFFFDD (Mintastic). It mixes green tones and feels cool overall. The strongest text pairing is #00311A on #BFFFDD with a contrast ratio of 12.76:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pitch-Black Forests	rgb(0, 49, 26)	hsl(152, 100%, 10%)
Into the Green	rgb(0, 113, 76)	hsl(160, 100%, 22%)
Magical Malachite	rgb(0, 208, 139)	hsl(160, 100%, 41%)
Mintastic	rgb(191, 255, 221)	hsl(148, 100%, 87%)

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.

Aa12.76:1 Super#00311A on #BFFFDD
Aa12.76:1 Super#BFFFDD on #00311A
Aa7.15:1 Very good#00311A on #00D08B
Aa7.15:1 Very good#00D08B on #00311A
Aa5.36:1 Good#00714C on #BFFFDD
Aa5.36:1 Good#BFFFDD on #00714C

Color blindness preview

CSS variables

/* Pitch-Black Forests to Mintastic — https://swatchly.xyz/palette/00311a-00714c-00d08b-bfffdd */
:root {
  --pitch-black-forests: #00311a;
  --into-the-green: #00714c;
  --magical-malachite: #00d08b;
  --mintastic: #bfffdd;
}

Tailwind CSS v4

/* Pitch-Black Forests to Mintastic — https://swatchly.xyz/palette/00311a-00714c-00d08b-bfffdd */
@theme {
  --color-pitch-black-forests: #00311a;
  --color-pitch-black-forests-50: #e2fdec;
  --color-pitch-black-forests-100: #d6f4e0;
  --color-pitch-black-forests-200: #bee2cb;
  --color-pitch-black-forests-300: #a4ccb2;
  --color-pitch-black-forests-400: #81ae92;
  --color-pitch-black-forests-500: #669478;
  --color-pitch-black-forests-600: #4e7b60;
  --color-pitch-black-forests-700: #3b654c;
  --color-pitch-black-forests-800: #2d523c;
  --color-pitch-black-forests-900: #21432f;
  --color-pitch-black-forests-950: #00311a;
  --color-into-the-green: #00714c;
  --color-into-the-green-50: #dcffec;
  --color-into-the-green-100: #c5fade;
  --color-into-the-green-200: #abeaca;
  --color-into-the-green-300: #8fd7b3;
  --color-into-the-green-400: #68bb94;
  --color-into-the-green-500: #48a179;
  --color-into-the-green-600: #2a8761;
  --color-into-the-green-700: #00714c;
  --color-into-the-green-800: #00593b;
  --color-into-the-green-900: #00442c;
  --color-into-the-green-950: #002c1b;
  --color-magical-malachite: #00d08b;
  --color-magical-malachite-50: #effff6;
  --color-magical-malachite-100: #d4ffe7;
  --color-magical-malachite-200: #99fac8;
  --color-magical-malachite-300: #73e9b0;
  --color-magical-malachite-400: #00d08b;
  --color-magical-malachite-500: #00ad73;
  --color-magical-malachite-600: #008b5b;
  --color-magical-malachite-700: #006d47;
  --color-magical-malachite-800: #005536;
  --color-magical-malachite-900: #004028;
  --color-magical-malachite-950: #002716;
  --color-mintastic: #bfffdd;
  --color-mintastic-50: #e4fff0;
  --color-mintastic-100: #bfffdd;
  --color-mintastic-200: #b9e6ce;
  --color-mintastic-300: #9cd1b5;
  --color-mintastic-400: #77b294;
  --color-mintastic-500: #599678;
  --color-mintastic-600: #3f7a5e;
  --color-mintastic-700: #2a6248;
  --color-mintastic-800: #1b4d37;
  --color-mintastic-900: #113c29;
  --color-mintastic-950: #072618;
}