Pine Needle to Light Blush color palette

2B4940Pine Needle 56667EAdmiral Blue 8D8371Antique BFA3AEFoggy Plum E8C6D3Light Blush

About this palette

Pine Needle to Light Blush is a 5-color muted, gradient palette: #2B4940 (Pine Needle), #56667E (Admiral Blue), #8D8371 (Antique), #BFA3AE (Foggy Plum), #E8C6D3 (Light Blush). It mixes turquoise, blue, gray, pink tones and feels balanced overall. The strongest text pairing is #2B4940 on #E8C6D3 with a contrast ratio of 6.31:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Needle	rgb(43, 73, 64)	hsl(162, 26%, 23%)
Admiral Blue	rgb(86, 102, 126)	hsl(216, 19%, 42%)
Antique	rgb(141, 131, 113)	hsl(39, 11%, 50%)
Foggy Plum	rgb(191, 163, 174)	hsl(336, 18%, 69%)
Light Blush	rgb(232, 198, 211)	hsl(337, 42%, 84%)

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.

Aa6.31:1 Good#2B4940 on #E8C6D3
Aa6.31:1 Good#E8C6D3 on #2B4940
Aa4.26:1 Poor#2B4940 on #BFA3AE
Aa4.26:1 Poor#BFA3AE on #2B4940
Aa3.74:1 Poor#56667E on #E8C6D3
Aa3.74:1 Poor#E8C6D3 on #56667E

Color blindness preview

CSS variables

/* Pine Needle to Light Blush — https://swatchly.xyz/palette/2b4940-56667e-8d8371-bfa3ae-e8c6d3 */
:root {
  --pine-needle: #2b4940;
  --admiral-blue: #56667e;
  --antique: #8d8371;
  --foggy-plum: #bfa3ae;
  --light-blush: #e8c6d3;
}

Tailwind CSS v4

/* Pine Needle to Light Blush — https://swatchly.xyz/palette/2b4940-56667e-8d8371-bfa3ae-e8c6d3 */
@theme {
  --color-pine-needle: #2b4940;
  --color-pine-needle-50: #e7faf4;
  --color-pine-needle-100: #dcf1ea;
  --color-pine-needle-200: #c5ded6;
  --color-pine-needle-300: #acc8bf;
  --color-pine-needle-400: #8aa99f;
  --color-pine-needle-500: #6e8e84;
  --color-pine-needle-600: #557369;
  --color-pine-needle-700: #405c53;
  --color-pine-needle-800: #2b4940;
  --color-pine-needle-900: #233831;
  --color-pine-needle-950: #14231e;
  --color-admiral-blue: #56667e;
  --color-admiral-blue-50: #eff6ff;
  --color-admiral-blue-100: #dfebfc;
  --color-admiral-blue-200: #c8d6eb;
  --color-admiral-blue-300: #afbed6;
  --color-admiral-blue-400: #8d9eb7;
  --color-admiral-blue-500: #71819a;
  --color-admiral-blue-600: #56667e;
  --color-admiral-blue-700: #435166;
  --color-admiral-blue-800: #333f51;
  --color-admiral-blue-900: #263040;
  --color-admiral-blue-950: #161e29;
  --color-antique: #8d8371;
  --color-antique-50: #faf4e9;
  --color-antique-100: #f0eadd;
  --color-antique-200: #ded5c7;
  --color-antique-300: #c8beae;
  --color-antique-400: #a99f8d;
  --color-antique-500: #8d8371;
  --color-antique-600: #736958;
  --color-antique-700: #5c5344;
  --color-antique-800: #484133;
  --color-antique-900: #383126;
  --color-antique-950: #231e16;
  --color-foggy-plum: #bfa3ae;
  --color-foggy-plum-50: #fff6f9;
  --color-foggy-plum-100: #fdebf2;
  --color-foggy-plum-200: #edd8e0;
  --color-foggy-plum-300: #dac2cc;
  --color-foggy-plum-400: #bfa3ae;
  --color-foggy-plum-500: #a18691;
  --color-foggy-plum-600: #846a74;
  --color-foggy-plum-700: #6a525c;
  --color-foggy-plum-800: #533f47;
  --color-foggy-plum-900: #402f36;
  --color-foggy-plum-950: #271b20;
  --color-light-blush: #e8c6d3;
  --color-light-blush-50: #ffeaf2;
  --color-light-blush-100: #f5dee7;
  --color-light-blush-200: #e8c6d3;
  --color-light-blush-300: #cfb2bd;
  --color-light-blush-400: #b2939f;
  --color-light-blush-500: #987985;
  --color-light-blush-600: #7d606c;
  --color-light-blush-700: #664c56;
  --color-light-blush-800: #523b44;
  --color-light-blush-900: #402c34;
  --color-light-blush-950: #281b20;
}