Futon to Midnight Pines Color Palette

About this palette

Futon to Midnight Pines is a 5-color muted, cool palette: #E5FADD (Futon), #DC989B (She Loves Pink), #409094 (Java), #544665 (Nightly Walk), #1B2712 (Midnight Pines). It mixes white, red, turquoise, purple, green tones and feels cool overall. The strongest text pairing is #E5FADD on #1B2712 with a contrast ratio of 14.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Futon	rgb(229, 250, 221)	hsl(103, 74%, 92%)
She Loves Pink	rgb(220, 152, 155)	hsl(357, 49%, 73%)
Java	rgb(64, 144, 148)	hsl(183, 40%, 42%)
Nightly Walk	rgb(84, 70, 101)	hsl(267, 18%, 34%)
Midnight Pines	rgb(27, 39, 18)	hsl(94, 37%, 11%)

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.

Aa14.16:1 Super#E5FADD on #1B2712
Aa14.16:1 Super#1B2712 on #E5FADD
Aa7.80:1 Very good#E5FADD on #544665
Aa7.80:1 Very good#544665 on #E5FADD
Aa6.69:1 Good#DC989B on #1B2712
Aa6.69:1 Good#1B2712 on #DC989B
Aa4.19:1 Poor#409094 on #1B2712
Aa4.19:1 Poor#1B2712 on #409094

Color blindness preview

CSS variables

/* Futon to Midnight Pines — https://swatchly.xyz/palette/e5fadd-dc989b-409094-544665-1b2712 */
:root {
  --futon: #e5fadd;
  --she-loves-pink: #dc989b;
  --java: #409094;
  --nightly-walk: #544665;
  --midnight-pines: #1b2712;
}

Tailwind CSS v4

/* Futon to Midnight Pines — https://swatchly.xyz/palette/e5fadd-dc989b-409094-544665-1b2712 */
@theme {
  --color-futon: #e5fadd;
  --color-futon-50: #e5fadd;
  --color-futon-100: #e1eedc;
  --color-futon-200: #ccdbc6;
  --color-futon-300: #b4c6ae;
  --color-futon-400: #95a78d;
  --color-futon-500: #7a8c72;
  --color-futon-600: #607259;
  --color-futon-700: #4b5b44;
  --color-futon-800: #394734;
  --color-futon-900: #2b3726;
  --color-futon-950: #1a2216;
  --color-she-loves-pink: #dc989b;
  --color-she-loves-pink-50: #fff7f7;
  --color-she-loves-pink-100: #ffecec;
  --color-she-loves-pink-200: #ffd3d4;
  --color-she-loves-pink-300: #f3babc;
  --color-she-loves-pink-400: #dc989b;
  --color-she-loves-pink-500: #bc7b7e;
  --color-she-loves-pink-600: #9d5f62;
  --color-she-loves-pink-700: #80474b;
  --color-she-loves-pink-800: #663538;
  --color-she-loves-pink-900: #4f2629;
  --color-she-loves-pink-950: #321517;
  --color-java: #409094;
  --color-java-50: #d6fdff;
  --color-java-100: #c4f4f6;
  --color-java-200: #a8e1e4;
  --color-java-300: #89cccf;
  --color-java-400: #61acb0;
  --color-java-500: #409094;
  --color-java-600: #247579;
  --color-java-700: #0c5e62;
  --color-java-800: #004a4e;
  --color-java-900: #003a3c;
  --color-java-950: #002426;
  --color-nightly-walk: #544665;
  --color-nightly-walk-50: #f8f2ff;
  --color-nightly-walk-100: #f0e6fe;
  --color-nightly-walk-200: #dcd0ec;
  --color-nightly-walk-300: #c4b7d6;
  --color-nightly-walk-400: #a495b7;
  --color-nightly-walk-500: #88799b;
  --color-nightly-walk-600: #6c5e7d;
  --color-nightly-walk-700: #544665;
  --color-nightly-walk-800: #41364e;
  --color-nightly-walk-900: #32293d;
  --color-nightly-walk-950: #1f1827;
  --color-midnight-pines: #1b2712;
  --color-midnight-pines-50: #eff9e9;
  --color-midnight-pines-100: #e5efde;
  --color-midnight-pines-200: #d0dcc8;
  --color-midnight-pines-300: #b8c6af;
  --color-midnight-pines-400: #98a78e;
  --color-midnight-pines-500: #7d8d73;
  --color-midnight-pines-600: #64735b;
  --color-midnight-pines-700: #4f5c46;
  --color-midnight-pines-800: #3e4936;
  --color-midnight-pines-900: #303a29;
  --color-midnight-pines-950: #1b2712;
}