Midnight Pines to Enchanted Lilac Color Palette

About this palette

Midnight Pines to Enchanted Lilac is a 5-color cool palette: #1C1F03 (Midnight Pines), #444B01 (Godzilla), #93596E (Indian Silk), #A7E0DC (Opal), #A198C9 (Enchanted Lilac). It mixes green, red, turquoise, purple tones and feels cool overall. The strongest text pairing is #1C1F03 on #A7E0DC with a contrast ratio of 11.50:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(28, 31, 3)	hsl(66, 82%, 7%)
Godzilla	rgb(68, 75, 1)	hsl(66, 97%, 15%)
Indian Silk	rgb(147, 89, 110)	hsl(338, 25%, 46%)
Opal	rgb(167, 224, 220)	hsl(176, 48%, 77%)
Enchanted Lilac	rgb(161, 152, 201)	hsl(251, 31%, 69%)

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.50:1 Very good#1C1F03 on #A7E0DC
Aa11.50:1 Very good#A7E0DC on #1C1F03
Aa6.37:1 Good#444B01 on #A7E0DC
Aa6.37:1 Good#A7E0DC on #444B01
Aa6.30:1 Good#1C1F03 on #A198C9
Aa6.30:1 Good#A198C9 on #1C1F03
Aa3.68:1 Poor#93596E on #A7E0DC
Aa3.68:1 Poor#A7E0DC on #93596E

Color blindness preview

CSS variables

/* Midnight Pines to Enchanted Lilac — https://swatchly.xyz/palette/1c1f03-444b01-93596e-a7e0dc-a198c9 */
:root {
  --midnight-pines: #1c1f03;
  --godzilla: #444b01;
  --indian-silk: #93596e;
  --opal: #a7e0dc;
  --enchanted-lilac: #a198c9;
}

Tailwind CSS v4

/* Midnight Pines to Enchanted Lilac — https://swatchly.xyz/palette/1c1f03-444b01-93596e-a7e0dc-a198c9 */
@theme {
  --color-midnight-pines: #1c1f03;
  --color-midnight-pines-50: #f4f8e4;
  --color-midnight-pines-100: #eaeed8;
  --color-midnight-pines-200: #d6dbc1;
  --color-midnight-pines-300: #c0c4a7;
  --color-midnight-pines-400: #a0a586;
  --color-midnight-pines-500: #848969;
  --color-midnight-pines-600: #696e50;
  --color-midnight-pines-700: #53573b;
  --color-midnight-pines-800: #3f432b;
  --color-midnight-pines-900: #30331f;
  --color-midnight-pines-950: #1c1f03;
  --color-godzilla: #444b01;
  --color-godzilla-50: #f3fad5;
  --color-godzilla-100: #e9f0c7;
  --color-godzilla-200: #d5ddac;
  --color-godzilla-300: #bfc890;
  --color-godzilla-400: #a0aa6b;
  --color-godzilla-500: #858f4e;
  --color-godzilla-600: #6c7435;
  --color-godzilla-700: #565e22;
  --color-godzilla-800: #444b01;
  --color-godzilla-900: #343909;
  --color-godzilla-950: #202403;
  --color-indian-silk: #93596e;
  --color-indian-silk-50: #fff1f5;
  --color-indian-silk-100: #ffe3ec;
  --color-indian-silk-200: #fac8d9;
  --color-indian-silk-300: #e7b0c2;
  --color-indian-silk-400: #cb8fa3;
  --color-indian-silk-500: #af7388;
  --color-indian-silk-600: #93596e;
  --color-indian-silk-700: #784457;
  --color-indian-silk-800: #603344;
  --color-indian-silk-900: #4c2634;
  --color-indian-silk-950: #311620;
  --color-opal: #a7e0dc;
  --color-opal-50: #dafaf7;
  --color-opal-100: #ccf0ed;
  --color-opal-200: #a7e0dc;
  --color-opal-300: #98c8c5;
  --color-opal-400: #75aaa7;
  --color-opal-500: #59908c;
  --color-opal-600: #407572;
  --color-opal-700: #2d5e5c;
  --color-opal-800: #1e4b48;
  --color-opal-900: #133a38;
  --color-opal-950: #082423;
  --color-enchanted-lilac: #a198c9;
  --color-enchanted-lilac-50: #f5f3ff;
  --color-enchanted-lilac-100: #ebe7ff;
  --color-enchanted-lilac-200: #d7d0f7;
  --color-enchanted-lilac-300: #c0b9e4;
  --color-enchanted-lilac-400: #a198c9;
  --color-enchanted-lilac-500: #867dac;
  --color-enchanted-lilac-600: #6c6390;
  --color-enchanted-lilac-700: #564e76;
  --color-enchanted-lilac-800: #433c5f;
  --color-enchanted-lilac-900: #342d4b;
  --color-enchanted-lilac-950: #201b31;
}