Pine Needle to Nightmare Color Palette

About this palette

Pine Needle to Nightmare is a 5-color muted, cool palette: #2F4C3A (Pine Needle), #E4C1E0 (Blackberry Yoghurt), #A782A0 (Voila!), #4C7950 (Irish Clover), #122012 (Nightmare). It mixes green, pink, gray tones and feels cool overall. The strongest text pairing is #E4C1E0 on #122012 with a contrast ratio of 10.48:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Needle	rgb(47, 76, 58)	hsl(143, 24%, 24%)
Blackberry Yoghurt	rgb(228, 193, 224)	hsl(307, 39%, 83%)
Voila!	rgb(167, 130, 160)	hsl(311, 17%, 58%)
Irish Clover	rgb(76, 121, 80)	hsl(125, 23%, 39%)
Nightmare	rgb(18, 32, 18)	hsl(120, 28%, 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.

Aa10.48:1 Very good#E4C1E0 on #122012
Aa10.48:1 Very good#122012 on #E4C1E0
Aa5.87:1 Good#2F4C3A on #E4C1E0
Aa5.87:1 Good#E4C1E0 on #2F4C3A
Aa5.11:1 Good#A782A0 on #122012
Aa5.11:1 Good#122012 on #A782A0
Aa3.35:1 Poor#4C7950 on #122012
Aa3.35:1 Poor#122012 on #4C7950

Color blindness preview

CSS variables

/* Pine Needle to Nightmare — https://swatchly.xyz/palette/2f4c3a-e4c1e0-a782a0-4c7950-122012 */
:root {
  --pine-needle: #2f4c3a;
  --blackberry-yoghurt: #e4c1e0;
  --voila: #a782a0;
  --irish-clover: #4c7950;
  --nightmare: #122012;
}

Tailwind CSS v4

/* Pine Needle to Nightmare — https://swatchly.xyz/palette/2f4c3a-e4c1e0-a782a0-4c7950-122012 */
@theme {
  --color-pine-needle: #2f4c3a;
  --color-pine-needle-50: #e8fbee;
  --color-pine-needle-100: #ddf1e3;
  --color-pine-needle-200: #c6dfce;
  --color-pine-needle-300: #aec9b7;
  --color-pine-needle-400: #8cab97;
  --color-pine-needle-500: #71907c;
  --color-pine-needle-600: #587662;
  --color-pine-needle-700: #435f4d;
  --color-pine-needle-800: #2f4c3a;
  --color-pine-needle-900: #253a2d;
  --color-pine-needle-950: #15241b;
  --color-blackberry-yoghurt: #e4c1e0;
  --color-blackberry-yoghurt-50: #fce7fa;
  --color-blackberry-yoghurt-100: #f2daef;
  --color-blackberry-yoghurt-200: #e4c1e0;
  --color-blackberry-yoghurt-300: #ccaec9;
  --color-blackberry-yoghurt-400: #b08fac;
  --color-blackberry-yoghurt-500: #967692;
  --color-blackberry-yoghurt-600: #7c5d79;
  --color-blackberry-yoghurt-700: #654962;
  --color-blackberry-yoghurt-800: #51394f;
  --color-blackberry-yoghurt-900: #3f2b3d;
  --color-blackberry-yoghurt-950: #281a27;
  --color-voila: #a782a0;
  --color-voila-50: #fff3fc;
  --color-voila-100: #ffe6f9;
  --color-voila-200: #efd2e9;
  --color-voila-300: #ddbcd6;
  --color-voila-400: #c19dba;
  --color-voila-500: #a782a0;
  --color-voila-600: #896683;
  --color-voila-700: #6f4f69;
  --color-voila-800: #583c53;
  --color-voila-900: #442c40;
  --color-voila-950: #2b1a28;
  --color-irish-clover: #4c7950;
  --color-irish-clover-50: #e3fee4;
  --color-irish-clover-100: #d7f5d8;
  --color-irish-clover-200: #bfe3c1;
  --color-irish-clover-300: #a5cea7;
  --color-irish-clover-400: #82af85;
  --color-irish-clover-500: #66946a;
  --color-irish-clover-600: #4c7950;
  --color-irish-clover-700: #38613c;
  --color-irish-clover-800: #294c2c;
  --color-irish-clover-900: #1d3b20;
  --color-irish-clover-950: #0f2512;
  --color-nightmare: #122012;
  --color-nightmare-50: #eef9ee;
  --color-nightmare-100: #e3efe3;
  --color-nightmare-200: #cedcce;
  --color-nightmare-300: #b6c6b6;
  --color-nightmare-400: #96a795;
  --color-nightmare-500: #7a8b79;
  --color-nightmare-600: #5f705f;
  --color-nightmare-700: #495849;
  --color-nightmare-800: #374437;
  --color-nightmare-900: #293328;
  --color-nightmare-950: #122012;
}