Pine Needle to Dark Orchestra Color Palette

About this palette

Pine Needle to Dark Orchestra is a 5-color muted, cool palette: #224E38 (Pine Needle), #BAC8F4 (Frost Fairy), #477E61 (Amazon), #8C9BC3 (Easter Egg), #241716 (Dark Orchestra). It mixes green, blue, gray tones and feels cool overall. The strongest text pairing is #BAC8F4 on #241716 with a contrast ratio of 10.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Needle	rgb(34, 78, 56)	hsl(150, 39%, 22%)
Frost Fairy	rgb(186, 200, 244)	hsl(226, 73%, 84%)
Amazon	rgb(71, 126, 97)	hsl(148, 28%, 39%)
Easter Egg	rgb(140, 155, 195)	hsl(224, 31%, 66%)
Dark Orchestra	rgb(36, 23, 22)	hsl(4, 24%, 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.

Aa10.47:1 Very good#BAC8F4 on #241716
Aa10.47:1 Very good#241716 on #BAC8F4
Aa6.28:1 Good#8C9BC3 on #241716
Aa6.28:1 Good#241716 on #8C9BC3
Aa5.71:1 Good#224E38 on #BAC8F4
Aa5.71:1 Good#BAC8F4 on #224E38
Aa3.66:1 Poor#477E61 on #241716
Aa3.66:1 Poor#241716 on #477E61

Color blindness preview

CSS variables

/* Pine Needle to Dark Orchestra — https://swatchly.xyz/palette/224e38-bac8f4-477e61-8c9bc3-241716 */
:root {
  --pine-needle: #224e38;
  --frost-fairy: #bac8f4;
  --amazon: #477e61;
  --easter-egg: #8c9bc3;
  --dark-orchestra: #241716;
}

Tailwind CSS v4

/* Pine Needle to Dark Orchestra — https://swatchly.xyz/palette/224e38-bac8f4-477e61-8c9bc3-241716 */
@theme {
  --color-pine-needle: #224e38;
  --color-pine-needle-50: #e3fded;
  --color-pine-needle-100: #d6f4e2;
  --color-pine-needle-200: #bee1cd;
  --color-pine-needle-300: #a4ccb5;
  --color-pine-needle-400: #82ae95;
  --color-pine-needle-500: #66937a;
  --color-pine-needle-600: #4c7860;
  --color-pine-needle-700: #38614b;
  --color-pine-needle-800: #224e38;
  --color-pine-needle-900: #1d3b2c;
  --color-pine-needle-950: #0f251a;
  --color-frost-fairy: #bac8f4;
  --color-frost-fairy-50: #f7f9ff;
  --color-frost-fairy-100: #ecf1ff;
  --color-frost-fairy-200: #d4defd;
  --color-frost-fairy-300: #bac8f4;
  --color-frost-fairy-400: #9aa7cf;
  --color-frost-fairy-500: #7d8ab3;
  --color-frost-fairy-600: #626e95;
  --color-frost-fairy-700: #4b5679;
  --color-frost-fairy-800: #394261;
  --color-frost-fairy-900: #2a314b;
  --color-frost-fairy-950: #191e31;
  --color-amazon: #477e61;
  --color-amazon-50: #dffeec;
  --color-amazon-100: #d3f6e1;
  --color-amazon-200: #bbe5cd;
  --color-amazon-300: #a1d1b5;
  --color-amazon-400: #7eb395;
  --color-amazon-500: #61987a;
  --color-amazon-600: #477e61;
  --color-amazon-700: #32654b;
  --color-amazon-800: #225039;
  --color-amazon-900: #163e2a;
  --color-amazon-950: #0a2719;
  --color-easter-egg: #8c9bc3;
  --color-easter-egg-50: #eef3ff;
  --color-easter-egg-100: #dfe8ff;
  --color-easter-egg-200: #c7d3f3;
  --color-easter-egg-300: #aebbe0;
  --color-easter-egg-400: #8c9bc3;
  --color-easter-egg-500: #7281a7;
  --color-easter-egg-600: #5a678c;
  --color-easter-egg-700: #465272;
  --color-easter-egg-800: #35405c;
  --color-easter-egg-900: #283149;
  --color-easter-egg-950: #181e30;
  --color-dark-orchestra: #241716;
  --color-dark-orchestra-50: #fdf2f1;
  --color-dark-orchestra-100: #f4e8e7;
  --color-dark-orchestra-200: #e2d4d2;
  --color-dark-orchestra-300: #cdbdbb;
  --color-dark-orchestra-400: #ae9d9b;
  --color-dark-orchestra-500: #92817f;
  --color-dark-orchestra-600: #766664;
  --color-dark-orchestra-700: #5d4f4d;
  --color-dark-orchestra-800: #483c3b;
  --color-dark-orchestra-900: #362c2b;
  --color-dark-orchestra-950: #241716;
}