Pine Needle to Coast to Coast Color Palette

About this palette

Pine Needle to Coast to Coast is a 5-color muted, cool, gradient palette: #2A4D4A (Pine Needle), #3A716C (Moonlit Forest), #6F938F (Yucca), #99B3B3 (Cool), #B5D6D6 (Coast to Coast). It mixes turquoise, gray tones and feels cool overall. The strongest text pairing is #2A4D4A on #B5D6D6 with a contrast ratio of 6.00:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Needle	rgb(42, 77, 74)	hsl(175, 29%, 23%)
Moonlit Forest	rgb(58, 113, 108)	hsl(175, 32%, 34%)
Yucca	rgb(111, 147, 143)	hsl(173, 14%, 51%)
Cool	rgb(153, 179, 179)	hsl(180, 15%, 65%)
Coast to Coast	rgb(181, 214, 214)	hsl(180, 29%, 77%)

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.00:1 Good#2A4D4A on #B5D6D6
Aa6.00:1 Good#B5D6D6 on #2A4D4A
Aa4.19:1 Poor#2A4D4A on #99B3B3
Aa4.19:1 Poor#99B3B3 on #2A4D4A
Aa3.61:1 Poor#3A716C on #B5D6D6
Aa3.61:1 Poor#B5D6D6 on #3A716C

Color blindness preview

CSS variables

/* Pine Needle to Coast to Coast — https://swatchly.xyz/palette/2a4d4a-3a716c-6f938f-99b3b3-b5d6d6 */
:root {
  --pine-needle: #2a4d4a;
  --moonlit-forest: #3a716c;
  --yucca: #6f938f;
  --cool: #99b3b3;
  --coast-to-coast: #b5d6d6;
}

Tailwind CSS v4

/* Pine Needle to Coast to Coast — https://swatchly.xyz/palette/2a4d4a-3a716c-6f938f-99b3b3-b5d6d6 */
@theme {
  --color-pine-needle: #2a4d4a;
  --color-pine-needle-50: #e5faf8;
  --color-pine-needle-100: #d9f1ee;
  --color-pine-needle-200: #c2dedb;
  --color-pine-needle-300: #a9c9c6;
  --color-pine-needle-400: #87aba7;
  --color-pine-needle-500: #6c908d;
  --color-pine-needle-600: #537673;
  --color-pine-needle-700: #3f5f5c;
  --color-pine-needle-800: #2a4d4a;
  --color-pine-needle-900: #223b39;
  --color-pine-needle-950: #132523;
  --color-moonlit-forest: #3a716c;
  --color-moonlit-forest-50: #defdf9;
  --color-moonlit-forest-100: #cff3ee;
  --color-moonlit-forest-200: #b5dfda;
  --color-moonlit-forest-300: #98c9c4;
  --color-moonlit-forest-400: #73a9a4;
  --color-moonlit-forest-500: #568d87;
  --color-moonlit-forest-600: #3a716c;
  --color-moonlit-forest-700: #295a56;
  --color-moonlit-forest-800: #1b4743;
  --color-moonlit-forest-900: #123734;
  --color-moonlit-forest-950: #082320;
  --color-yucca: #6f938f;
  --color-yucca-50: #e6fbf8;
  --color-yucca-100: #dbf3f0;
  --color-yucca-200: #c5e1dd;
  --color-yucca-300: #acccc8;
  --color-yucca-400: #8baeaa;
  --color-yucca-500: #6f938f;
  --color-yucca-600: #557774;
  --color-yucca-700: #3f5f5c;
  --color-yucca-800: #2e4a48;
  --color-yucca-900: #213937;
  --color-yucca-950: #122422;
  --color-cool: #99b3b3;
  --color-cool-50: #effdfd;
  --color-cool-100: #e5f5f5;
  --color-cool-200: #d1e4e4;
  --color-cool-300: #bad0d0;
  --color-cool-400: #99b3b3;
  --color-cool-500: #7c9595;
  --color-cool-600: #607878;
  --color-cool-700: #495f5f;
  --color-cool-800: #364a4a;
  --color-cool-900: #273838;
  --color-cool-950: #162222;
  --color-coast-to-coast: #b5d6d6;
  --color-coast-to-coast-50: #e0f4f3;
  --color-coast-to-coast-100: #d3e9e9;
  --color-coast-to-coast-200: #b5d6d6;
  --color-coast-to-coast-300: #a4c0c0;
  --color-coast-to-coast-400: #84a3a3;
  --color-coast-to-coast-500: #6a8989;
  --color-coast-to-coast-600: #527070;
  --color-coast-to-coast-700: #3f5a5a;
  --color-coast-to-coast-800: #304748;
  --color-coast-to-coast-900: #233737;
  --color-coast-to-coast-950: #142222;
}