Rosemary to Pitch-Black Forests Color Palette

About this palette

Rosemary to Pitch-Black Forests is a 4-color dark palette: #435D55 (Rosemary), #004F26 (Mysterious Mixture), #001117 (Black Knight), #003628 (Pitch-Black Forests). It mixes gray, green, black, turquoise tones and feels cool overall. The strongest text pairing is #435D55 on #001117 with a contrast ratio of 2.69:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rosemary	rgb(67, 93, 85)	hsl(162, 16%, 31%)
Mysterious Mixture	rgb(0, 79, 38)	hsl(149, 100%, 15%)
Black Knight	rgb(0, 17, 23)	hsl(196, 100%, 5%)
Pitch-Black Forests	rgb(0, 54, 40)	hsl(164, 100%, 11%)

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.

Color blindness preview

CSS variables

/* Rosemary to Pitch-Black Forests — https://swatchly.xyz/palette/435d55-004f26-001117-003628 */
:root {
  --rosemary: #435d55;
  --mysterious-mixture: #004f26;
  --black-knight: #001117;
  --pitch-black-forests: #003628;
}

Tailwind CSS v4

/* Rosemary to Pitch-Black Forests — https://swatchly.xyz/palette/435d55-004f26-001117-003628 */
@theme {
  --color-rosemary: #435d55;
  --color-rosemary-50: #e9f9f4;
  --color-rosemary-100: #def0ea;
  --color-rosemary-200: #c8ddd6;
  --color-rosemary-300: #afc8c0;
  --color-rosemary-400: #8ea9a0;
  --color-rosemary-500: #738e85;
  --color-rosemary-600: #59746b;
  --color-rosemary-700: #435d55;
  --color-rosemary-800: #344942;
  --color-rosemary-900: #263833;
  --color-rosemary-950: #16231f;
  --color-mysterious-mixture: #004f26;
  --color-mysterious-mixture-50: #deffe6;
  --color-mysterious-mixture-100: #cef8d8;
  --color-mysterious-mixture-200: #b4e6c1;
  --color-mysterious-mixture-300: #98d1a7;
  --color-mysterious-mixture-400: #72b285;
  --color-mysterious-mixture-500: #549669;
  --color-mysterious-mixture-600: #3a7b4f;
  --color-mysterious-mixture-700: #26623b;
  --color-mysterious-mixture-800: #004f26;
  --color-mysterious-mixture-900: #0d3c1f;
  --color-mysterious-mixture-950: #042611;
  --color-black-knight: #001117;
  --color-black-knight-50: #eaf8fd;
  --color-black-knight-100: #deeef4;
  --color-black-knight-200: #c8dbe2;
  --color-black-knight-300: #b0c5cc;
  --color-black-knight-400: #8fa6ae;
  --color-black-knight-500: #6f878f;
  --color-black-knight-600: #536970;
  --color-black-knight-700: #3b4f55;
  --color-black-knight-800: #28383d;
  --color-black-knight-900: #192529;
  --color-black-knight-950: #001117;
  --color-pitch-black-forests: #003628;
  --color-pitch-black-forests-50: #e1fdf2;
  --color-pitch-black-forests-100: #d4f4e7;
  --color-pitch-black-forests-200: #bce1d3;
  --color-pitch-black-forests-300: #a2ccbc;
  --color-pitch-black-forests-400: #7dac9b;
  --color-pitch-black-forests-500: #5f907e;
  --color-pitch-black-forests-600: #457363;
  --color-pitch-black-forests-700: #305b4c;
  --color-pitch-black-forests-800: #214539;
  --color-pitch-black-forests-900: #003628;
  --color-pitch-black-forests-950: #0a1f18;
}