Midnight Pines to Milk Foam Color Palette

About this palette

Midnight Pines to Milk Foam is a 5-color cool palette: #1A2312 (Midnight Pines), #683937 (Hot Chocolate), #3F8FCA (Magical Merlin), #90B5FE (Fly Away), #EEFFE2 (Milk Foam). It mixes gray, brown, blue, white tones and feels cool overall. The strongest text pairing is #1A2312 on #EEFFE2 with a contrast ratio of 15.50:1, and 5 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(26, 35, 18)	hsl(92, 32%, 10%)
Hot Chocolate	rgb(104, 57, 55)	hsl(2, 31%, 31%)
Magical Merlin	rgb(63, 143, 202)	hsl(205, 57%, 52%)
Fly Away	rgb(144, 181, 254)	hsl(220, 98%, 78%)
Milk Foam	rgb(238, 255, 226)	hsl(95, 100%, 94%)

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.

Aa15.50:1 Super#1A2312 on #EEFFE2
Aa15.50:1 Super#EEFFE2 on #1A2312
Aa8.99:1 Very good#683937 on #EEFFE2
Aa8.99:1 Very good#EEFFE2 on #683937
Aa7.91:1 Very good#1A2312 on #90B5FE
Aa7.91:1 Very good#90B5FE on #1A2312
Aa4.63:1 Good#1A2312 on #3F8FCA
Aa4.63:1 Good#3F8FCA on #1A2312

Color blindness preview

CSS variables

/* Midnight Pines to Milk Foam — https://swatchly.xyz/palette/1a2312-683937-3f8fca-90b5fe-eeffe2 */
:root {
  --midnight-pines: #1a2312;
  --hot-chocolate: #683937;
  --magical-merlin: #3f8fca;
  --fly-away: #90b5fe;
  --milk-foam: #eeffe2;
}

Tailwind CSS v4

/* Midnight Pines to Milk Foam — https://swatchly.xyz/palette/1a2312-683937-3f8fca-90b5fe-eeffe2 */
@theme {
  --color-midnight-pines: #1a2312;
  --color-midnight-pines-50: #f1f8eb;
  --color-midnight-pines-100: #e6eee0;
  --color-midnight-pines-200: #d2dbca;
  --color-midnight-pines-300: #bac5b2;
  --color-midnight-pines-400: #9aa691;
  --color-midnight-pines-500: #7f8b76;
  --color-midnight-pines-600: #65705c;
  --color-midnight-pines-700: #4f5947;
  --color-midnight-pines-800: #3d4636;
  --color-midnight-pines-900: #2f3629;
  --color-midnight-pines-950: #1a2312;
  --color-hot-chocolate: #683937;
  --color-hot-chocolate-50: #fff2f0;
  --color-hot-chocolate-100: #ffe4e2;
  --color-hot-chocolate-200: #f7cbc8;
  --color-hot-chocolate-300: #e5b4b1;
  --color-hot-chocolate-400: #c99491;
  --color-hot-chocolate-500: #af7a76;
  --color-hot-chocolate-600: #93615e;
  --color-hot-chocolate-700: #7a4c4a;
  --color-hot-chocolate-800: #683937;
  --color-hot-chocolate-900: #4f2c2b;
  --color-hot-chocolate-950: #341b19;
  --color-magical-merlin: #3f8fca;
  --color-magical-merlin-50: #edf7ff;
  --color-magical-merlin-100: #dcefff;
  --color-magical-merlin-200: #b7deff;
  --color-magical-merlin-300: #88caff;
  --color-magical-merlin-400: #60abe5;
  --color-magical-merlin-500: #3f8fca;
  --color-magical-merlin-600: #2073ac;
  --color-magical-merlin-700: #035b8f;
  --color-magical-merlin-800: #004771;
  --color-magical-merlin-900: #003658;
  --color-magical-merlin-950: #002239;
  --color-fly-away: #90b5fe;
  --color-fly-away-50: #e7f0ff;
  --color-fly-away-100: #d6e4ff;
  --color-fly-away-200: #b5ceff;
  --color-fly-away-300: #90b5fe;
  --color-fly-away-400: #7597dd;
  --color-fly-away-500: #5b7dc2;
  --color-fly-away-600: #4565a5;
  --color-fly-away-700: #33508a;
  --color-fly-away-800: #263e72;
  --color-fly-away-900: #1c315d;
  --color-fly-away-950: #0f1e3d;
  --color-milk-foam: #eeffe2;
  --color-milk-foam-50: #eeffe2;
  --color-milk-foam-100: #e8f2e1;
  --color-milk-foam-200: #d2deca;
  --color-milk-foam-300: #bac8b0;
  --color-milk-foam-400: #99a88e;
  --color-milk-foam-500: #7d8c72;
  --color-milk-foam-600: #637158;
  --color-milk-foam-700: #4d5a44;
  --color-milk-foam-800: #3b4733;
  --color-milk-foam-900: #2d3626;
  --color-milk-foam-950: #1b2216;
}