Midnight Pines to In the Pink Color Palette

About this palette

Midnight Pines to In the Pink is a 4-color vintage palette: #1B220E (Midnight Pines), #683E42 (Red Rumour), #4F9BE8 (Blue Bay), #F8C2C9 (In the Pink). It mixes green, brown, blue, pink tones and feels balanced overall. The strongest text pairing is #1B220E on #F8C2C9 with a contrast ratio of 10.57:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(27, 34, 14)	hsl(81, 42%, 9%)
Red Rumour	rgb(104, 62, 66)	hsl(354, 25%, 33%)
Blue Bay	rgb(79, 155, 232)	hsl(210, 77%, 61%)
In the Pink	rgb(248, 194, 201)	hsl(352, 79%, 87%)

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.57:1 Very good#1B220E on #F8C2C9
Aa10.57:1 Very good#F8C2C9 on #1B220E
Aa5.75:1 Good#683E42 on #F8C2C9
Aa5.75:1 Good#F8C2C9 on #683E42
Aa5.61:1 Good#1B220E on #4F9BE8
Aa5.61:1 Good#4F9BE8 on #1B220E
Aa3.05:1 Poor#683E42 on #4F9BE8
Aa3.05:1 Poor#4F9BE8 on #683E42

Color blindness preview

CSS variables

/* Midnight Pines to In the Pink — https://swatchly.xyz/palette/1b220e-683e42-4f9be8-f8c2c9 */
:root {
  --midnight-pines: #1b220e;
  --red-rumour: #683e42;
  --blue-bay: #4f9be8;
  --in-the-pink: #f8c2c9;
}

Tailwind CSS v4

/* Midnight Pines to In the Pink — https://swatchly.xyz/palette/1b220e-683e42-4f9be8-f8c2c9 */
@theme {
  --color-midnight-pines: #1b220e;
  --color-midnight-pines-50: #f2f8e9;
  --color-midnight-pines-100: #e8eede;
  --color-midnight-pines-200: #d3dbc8;
  --color-midnight-pines-300: #bcc5af;
  --color-midnight-pines-400: #9ca68e;
  --color-midnight-pines-500: #818a72;
  --color-midnight-pines-600: #677059;
  --color-midnight-pines-700: #515944;
  --color-midnight-pines-800: #3e4533;
  --color-midnight-pines-900: #2f3526;
  --color-midnight-pines-950: #1b220e;
  --color-red-rumour: #683e42;
  --color-red-rumour-50: #fff1f2;
  --color-red-rumour-100: #ffe3e5;
  --color-red-rumour-200: #f1cacd;
  --color-red-rumour-300: #dcb0b3;
  --color-red-rumour-400: #bd8e91;
  --color-red-rumour-500: #9f7175;
  --color-red-rumour-600: #81565a;
  --color-red-rumour-700: #683e42;
  --color-red-rumour-800: #503033;
  --color-red-rumour-900: #3f2427;
  --color-red-rumour-950: #281517;
  --color-blue-bay: #4f9be8;
  --color-blue-bay-50: #e8f3ff;
  --color-blue-bay-100: #d3e8ff;
  --color-blue-bay-200: #add4ff;
  --color-blue-bay-300: #7ebdff;
  --color-blue-bay-400: #4f9be8;
  --color-blue-bay-500: #3481cc;
  --color-blue-bay-600: #1967ae;
  --color-blue-bay-700: #015292;
  --color-blue-bay-800: #004075;
  --color-blue-bay-900: #00325d;
  --color-blue-bay-950: #00203f;
  --color-in-the-pink: #f8c2c9;
  --color-in-the-pink-50: #ffecee;
  --color-in-the-pink-100: #ffdde1;
  --color-in-the-pink-200: #f8c2c9;
  --color-in-the-pink-300: #ddafb5;
  --color-in-the-pink-400: #c08f96;
  --color-in-the-pink-500: #a5747b;
  --color-in-the-pink-600: #8a5b62;
  --color-in-the-pink-700: #71474d;
  --color-in-the-pink-800: #5b363c;
  --color-in-the-pink-900: #47292d;
  --color-in-the-pink-950: #2e181b;
}