Pine to Midnight Express Color Palette

About this palette

Pine to Midnight Express is a 5-color cool palette: #355B24 (Pine), #F9D5F3 (Grape Taffy), #96A0E1 (Azureno), #689536 (Bitter Leaf), #27263C (Midnight Express). It mixes green, pink, purple tones and feels cool overall. The strongest text pairing is #F9D5F3 on #27263C with a contrast ratio of 11.09:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine	rgb(53, 91, 36)	hsl(101, 43%, 25%)
Grape Taffy	rgb(249, 213, 243)	hsl(310, 75%, 91%)
Azureno	rgb(150, 160, 225)	hsl(232, 56%, 74%)
Bitter Leaf	rgb(104, 149, 54)	hsl(88, 47%, 40%)
Midnight Express	rgb(39, 38, 60)	hsl(243, 22%, 19%)

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.

Aa11.09:1 Very good#F9D5F3 on #27263C
Aa11.09:1 Very good#27263C on #F9D5F3
Aa5.93:1 Good#355B24 on #F9D5F3
Aa5.93:1 Good#F9D5F3 on #355B24
Aa5.89:1 Good#96A0E1 on #27263C
Aa5.89:1 Good#27263C on #96A0E1
Aa4.16:1 Poor#689536 on #27263C
Aa4.16:1 Poor#27263C on #689536

Color blindness preview

CSS variables

/* Pine to Midnight Express — https://swatchly.xyz/palette/355b24-f9d5f3-96a0e1-689536-27263c */
:root {
  --pine: #355b24;
  --grape-taffy: #f9d5f3;
  --azureno: #96a0e1;
  --bitter-leaf: #689536;
  --midnight-express: #27263c;
}

Tailwind CSS v4

/* Pine to Midnight Express — https://swatchly.xyz/palette/355b24-f9d5f3-96a0e1-689536-27263c */
@theme {
  --color-pine: #355b24;
  --color-pine-50: #e5fedc;
  --color-pine-100: #d9f5cf;
  --color-pine-200: #c1e2b4;
  --color-pine-300: #a6cb98;
  --color-pine-400: #83ac73;
  --color-pine-500: #678f56;
  --color-pine-600: #4d733d;
  --color-pine-700: #355b24;
  --color-pine-800: #29471c;
  --color-pine-900: #1e3713;
  --color-pine-950: #102208;
  --color-grape-taffy: #f9d5f3;
  --color-grape-taffy-50: #fce6f8;
  --color-grape-taffy-100: #f9d5f3;
  --color-grape-taffy-200: #e2c6dd;
  --color-grape-taffy-300: #ceb0c9;
  --color-grape-taffy-400: #b291ad;
  --color-grape-taffy-500: #987793;
  --color-grape-taffy-600: #7e5f79;
  --color-grape-taffy-700: #664b62;
  --color-grape-taffy-800: #51394e;
  --color-grape-taffy-900: #3f2b3c;
  --color-grape-taffy-950: #281a26;
  --color-azureno: #96a0e1;
  --color-azureno-50: #f4f6ff;
  --color-azureno-100: #e8ecff;
  --color-azureno-200: #d0d8ff;
  --color-azureno-300: #b7c0f8;
  --color-azureno-400: #96a0e1;
  --color-azureno-500: #7b84c2;
  --color-azureno-600: #6168a4;
  --color-azureno-700: #4b5188;
  --color-azureno-800: #393e6e;
  --color-azureno-900: #2b2f57;
  --color-azureno-950: #191c39;
  --color-bitter-leaf: #689536;
  --color-bitter-leaf-50: #e5ffd0;
  --color-bitter-leaf-100: #d8f7bd;
  --color-bitter-leaf-200: #c0e59f;
  --color-bitter-leaf-300: #a6d080;
  --color-bitter-leaf-400: #84b157;
  --color-bitter-leaf-500: #689536;
  --color-bitter-leaf-600: #4f7a18;
  --color-bitter-leaf-700: #3c6100;
  --color-bitter-leaf-800: #2e4c00;
  --color-bitter-leaf-900: #223b00;
  --color-bitter-leaf-950: #132500;
  --color-midnight-express: #27263c;
  --color-midnight-express-50: #f4f4ff;
  --color-midnight-express-100: #e9e9fc;
  --color-midnight-express-200: #d5d5eb;
  --color-midnight-express-300: #bebed7;
  --color-midnight-express-400: #9d9cb7;
  --color-midnight-express-500: #7f7f9a;
  --color-midnight-express-600: #64637c;
  --color-midnight-express-700: #4c4b61;
  --color-midnight-express-800: #38384a;
  --color-midnight-express-900: #27263c;
  --color-midnight-express-950: #171620;
}