Cucumber Queen to Midnight Pines Color Palette

About this palette

Cucumber Queen to Midnight Pines is a 4-color dark, cool, earthy palette: #3F7434 (Cucumber Queen), #0C0E00 (Memorial Black), #424A2F (Mountain View), #23240D (Midnight Pines). It mixes green, black, brown tones and feels cool overall. The strongest text pairing is #3F7434 on #0C0E00 with a contrast ratio of 3.49:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cucumber Queen	rgb(63, 116, 52)	hsl(110, 38%, 33%)
Memorial Black	rgb(12, 14, 0)	hsl(69, 100%, 3%)
Mountain View	rgb(66, 74, 47)	hsl(78, 22%, 24%)
Midnight Pines	rgb(35, 36, 13)	hsl(63, 47%, 10%)

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.49:1 Poor#3F7434 on #0C0E00
Aa3.49:1 Poor#0C0E00 on #3F7434

Color blindness preview

CSS variables

/* Cucumber Queen to Midnight Pines — https://swatchly.xyz/palette/3f7434-0c0e00-424a2f-23240d */
:root {
  --cucumber-queen: #3f7434;
  --memorial-black: #0c0e00;
  --mountain-view: #424a2f;
  --midnight-pines: #23240d;
}

Tailwind CSS v4

/* Cucumber Queen to Midnight Pines — https://swatchly.xyz/palette/3f7434-0c0e00-424a2f-23240d */
@theme {
  --color-cucumber-queen: #3f7434;
  --color-cucumber-queen-50: #e2ffdc;
  --color-cucumber-queen-100: #d2f6ca;
  --color-cucumber-queen-200: #b8e3af;
  --color-cucumber-queen-300: #9ccd92;
  --color-cucumber-queen-400: #78ad6d;
  --color-cucumber-queen-500: #5a904f;
  --color-cucumber-queen-600: #3f7434;
  --color-cucumber-queen-700: #2e5d24;
  --color-cucumber-queen-800: #204918;
  --color-cucumber-queen-900: #16390f;
  --color-cucumber-queen-950: #0b2406;
  --color-memorial-black: #0c0e00;
  --color-memorial-black-50: #f4f7e8;
  --color-memorial-black-100: #eaeddd;
  --color-memorial-black-200: #d6dac7;
  --color-memorial-black-300: #c0c4ae;
  --color-memorial-black-400: #a0a48d;
  --color-memorial-black-500: #81856d;
  --color-memorial-black-600: #636650;
  --color-memorial-black-700: #494c39;
  --color-memorial-black-800: #333626;
  --color-memorial-black-900: #212317;
  --color-memorial-black-950: #0c0e00;
  --color-mountain-view: #424a2f;
  --color-mountain-view-50: #f2f8e6;
  --color-mountain-view-100: #e8eeda;
  --color-mountain-view-200: #d4dbc4;
  --color-mountain-view-300: #bdc6ab;
  --color-mountain-view-400: #9ea88a;
  --color-mountain-view-500: #848d6f;
  --color-mountain-view-600: #6a7357;
  --color-mountain-view-700: #545c42;
  --color-mountain-view-800: #424a2f;
  --color-mountain-view-900: #333925;
  --color-mountain-view-950: #1f2415;
  --color-midnight-pines: #23240d;
  --color-midnight-pines-50: #f5f7e7;
  --color-midnight-pines-100: #ebeddb;
  --color-midnight-pines-200: #d8dac5;
  --color-midnight-pines-300: #c1c3ab;
  --color-midnight-pines-400: #a2a48a;
  --color-midnight-pines-500: #87896f;
  --color-midnight-pines-600: #6e6f56;
  --color-midnight-pines-700: #585942;
  --color-midnight-pines-800: #454632;
  --color-midnight-pines-900: #363726;
  --color-midnight-pines-950: #23240d;
}