Pine Needle to Scented Spring Color Palette

About this palette

Pine Needle to Scented Spring is a 5-color cool, vintage palette: #264E49 (Pine Needle), #825D2F (Hot Curry), #AF804B (Komodo Dragon), #84CCBF (Jolly Jade), #E4D7FA (Scented Spring). It mixes turquoise, brown, orange, purple tones and feels cool overall. The strongest text pairing is #264E49 on #E4D7FA with a contrast ratio of 6.79:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Needle	rgb(38, 78, 73)	hsl(172, 34%, 23%)
Hot Curry	rgb(130, 93, 47)	hsl(33, 47%, 35%)
Komodo Dragon	rgb(175, 128, 75)	hsl(32, 40%, 49%)
Jolly Jade	rgb(132, 204, 191)	hsl(169, 41%, 66%)
Scented Spring	rgb(228, 215, 250)	hsl(262, 78%, 91%)

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.79:1 Good#264E49 on #E4D7FA
Aa6.79:1 Good#E4D7FA on #264E49
Aa5.01:1 Good#264E49 on #84CCBF
Aa5.01:1 Good#84CCBF on #264E49
Aa4.33:1 Poor#825D2F on #E4D7FA
Aa4.33:1 Poor#E4D7FA on #825D2F
Aa3.20:1 Poor#825D2F on #84CCBF
Aa3.20:1 Poor#84CCBF on #825D2F

Color blindness preview

CSS variables

/* Pine Needle to Scented Spring — https://swatchly.xyz/palette/264e49-825d2f-af804b-84ccbf-e4d7fa */
:root {
  --pine-needle: #264e49;
  --hot-curry: #825d2f;
  --komodo-dragon: #af804b;
  --jolly-jade: #84ccbf;
  --scented-spring: #e4d7fa;
}

Tailwind CSS v4

/* Pine Needle to Scented Spring — https://swatchly.xyz/palette/264e49-825d2f-af804b-84ccbf-e4d7fa */
@theme {
  --color-pine-needle: #264e49;
  --color-pine-needle-50: #e3fbf7;
  --color-pine-needle-100: #d7f2ee;
  --color-pine-needle-200: #bfdfda;
  --color-pine-needle-300: #a6cac5;
  --color-pine-needle-400: #84aca6;
  --color-pine-needle-500: #68928c;
  --color-pine-needle-600: #4f7772;
  --color-pine-needle-700: #3b605b;
  --color-pine-needle-800: #264e49;
  --color-pine-needle-900: #1f3c38;
  --color-pine-needle-950: #112623;
  --color-hot-curry: #825d2f;
  --color-hot-curry-50: #fff3e6;
  --color-hot-curry-100: #ffe5c8;
  --color-hot-curry-200: #efcfab;
  --color-hot-curry-300: #dab68d;
  --color-hot-curry-400: #bc9568;
  --color-hot-curry-500: #9f784a;
  --color-hot-curry-600: #825d2f;
  --color-hot-curry-700: #694920;
  --color-hot-curry-800: #543813;
  --color-hot-curry-900: #422a0b;
  --color-hot-curry-950: #2a1904;
  --color-komodo-dragon: #af804b;
  --color-komodo-dragon-50: #fff4e9;
  --color-komodo-dragon-100: #ffe9d2;
  --color-komodo-dragon-200: #f8d3ac;
  --color-komodo-dragon-300: #e5bb8f;
  --color-komodo-dragon-400: #c99b69;
  --color-komodo-dragon-500: #af804b;
  --color-komodo-dragon-600: #926530;
  --color-komodo-dragon-700: #774e1b;
  --color-komodo-dragon-800: #5f3b0c;
  --color-komodo-dragon-900: #4a2c03;
  --color-komodo-dragon-950: #301a00;
  --color-jolly-jade: #84ccbf;
  --color-jolly-jade-50: #d5fcf4;
  --color-jolly-jade-100: #c6f3ea;
  --color-jolly-jade-200: #aae0d6;
  --color-jolly-jade-300: #84ccbf;
  --color-jolly-jade-400: #68aca0;
  --color-jolly-jade-500: #4a9286;
  --color-jolly-jade-600: #30776c;
  --color-jolly-jade-700: #1c6056;
  --color-jolly-jade-800: #0d4c44;
  --color-jolly-jade-900: #043c35;
  --color-jolly-jade-950: #002621;
  --color-scented-spring: #e4d7fa;
  --color-scented-spring-50: #fbf8ff;
  --color-scented-spring-100: #f4edff;
  --color-scented-spring-200: #e4d7fa;
  --color-scented-spring-300: #cbc1dd;
  --color-scented-spring-400: #ab9fbf;
  --color-scented-spring-500: #8f83a2;
  --color-scented-spring-600: #736786;
  --color-scented-spring-700: #5b506c;
  --color-scented-spring-800: #463d55;
  --color-scented-spring-900: #362e42;
  --color-scented-spring-950: #221c2a;
}