Melancholia to We Peep Color Palette

About this palette

Melancholia to We Peep is a 5-color cool palette: #133818 (Melancholia), #2D4A94 (Cascade Twilight), #40A247 (Leapfrog), #7C9FE7 (Wisteria Blue), #FFD5D7 (We Peep). It mixes green, blue, pink tones and feels cool overall. The strongest text pairing is #133818 on #FFD5D7 with a contrast ratio of 9.80:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melancholia	rgb(19, 56, 24)	hsl(128, 49%, 15%)
Cascade Twilight	rgb(45, 74, 148)	hsl(223, 53%, 38%)
Leapfrog	rgb(64, 162, 71)	hsl(124, 43%, 44%)
Wisteria Blue	rgb(124, 159, 231)	hsl(220, 69%, 70%)
We Peep	rgb(255, 213, 215)	hsl(357, 100%, 92%)

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.

Aa9.80:1 Very good#133818 on #FFD5D7
Aa9.80:1 Very good#FFD5D7 on #133818
Aa6.25:1 Good#2D4A94 on #FFD5D7
Aa6.25:1 Good#FFD5D7 on #2D4A94
Aa4.96:1 Good#133818 on #7C9FE7
Aa4.96:1 Good#7C9FE7 on #133818
Aa4.03:1 Poor#133818 on #40A247
Aa4.03:1 Poor#40A247 on #133818

Color blindness preview

CSS variables

/* Melancholia to We Peep — https://swatchly.xyz/palette/133818-2d4a94-40a247-7c9fe7-ffd5d7 */
:root {
  --melancholia: #133818;
  --cascade-twilight: #2d4a94;
  --leapfrog: #40a247;
  --wisteria-blue: #7c9fe7;
  --we-peep: #ffd5d7;
}

Tailwind CSS v4

/* Melancholia to We Peep — https://swatchly.xyz/palette/133818-2d4a94-40a247-7c9fe7-ffd5d7 */
@theme {
  --color-melancholia: #133818;
  --color-melancholia-50: #e5fde6;
  --color-melancholia-100: #d9f4da;
  --color-melancholia-200: #c2e1c4;
  --color-melancholia-300: #a9ccaa;
  --color-melancholia-400: #86ac88;
  --color-melancholia-500: #69906c;
  --color-melancholia-600: #4f7452;
  --color-melancholia-700: #3a5c3d;
  --color-melancholia-800: #2a472c;
  --color-melancholia-900: #133818;
  --color-melancholia-950: #102111;
  --color-cascade-twilight: #2d4a94;
  --color-cascade-twilight-50: #f0f5ff;
  --color-cascade-twilight-100: #e2ebff;
  --color-cascade-twilight-200: #c3d6ff;
  --color-cascade-twilight-300: #a0beff;
  --color-cascade-twilight-400: #799ceb;
  --color-cascade-twilight-500: #5d7fce;
  --color-cascade-twilight-600: #4463ad;
  --color-cascade-twilight-700: #2d4a94;
  --color-cascade-twilight-800: #233a73;
  --color-cascade-twilight-900: #192c5c;
  --color-cascade-twilight-950: #0d1a3d;
  --color-leapfrog: #40a247;
  --color-leapfrog-50: #e3ffe2;
  --color-leapfrog-100: #c5fec5;
  --color-leapfrog-200: #aaeeaa;
  --color-leapfrog-300: #8bda8c;
  --color-leapfrog-400: #62bd66;
  --color-leapfrog-500: #40a247;
  --color-leapfrog-600: #1f852b;
  --color-leapfrog-700: #006b17;
  --color-leapfrog-800: #00540f;
  --color-leapfrog-900: #00410a;
  --color-leapfrog-950: #002904;
  --color-wisteria-blue: #7c9fe7;
  --color-wisteria-blue-50: #f0f5ff;
  --color-wisteria-blue-100: #e1ebff;
  --color-wisteria-blue-200: #c3d7ff;
  --color-wisteria-blue-300: #a0c0ff;
  --color-wisteria-blue-400: #7c9fe7;
  --color-wisteria-blue-500: #6283c9;
  --color-wisteria-blue-600: #4969ab;
  --color-wisteria-blue-700: #36528e;
  --color-wisteria-blue-800: #273f74;
  --color-wisteria-blue-900: #1c305d;
  --color-wisteria-blue-950: #0f1d3e;
  --color-we-peep: #ffd5d7;
  --color-we-peep-50: #fffafa;
  --color-we-peep-100: #ffefef;
  --color-we-peep-200: #ffd5d7;
  --color-we-peep-300: #e1bfc1;
  --color-we-peep-400: #c29d9f;
  --color-we-peep-500: #a57f81;
  --color-we-peep-600: #886466;
  --color-we-peep-700: #6d4d4f;
  --color-we-peep-800: #563a3c;
  --color-we-peep-900: #432c2d;
  --color-we-peep-950: #2b1a1b;
}