Melancholia to Tutu Color Palette

About this palette

Melancholia to Tutu is a 4-color cool palette: #203B0E (Melancholia), #275FD0 (God of Rain), #7FACE6 (Queer Blue), #FFE4E3 (Tutu). It mixes green, blue, white tones and feels cool overall. The strongest text pairing is #203B0E on #FFE4E3 with a contrast ratio of 10.31:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melancholia	rgb(32, 59, 14)	hsl(96, 62%, 14%)
God of Rain	rgb(39, 95, 208)	hsl(220, 68%, 48%)
Queer Blue	rgb(127, 172, 230)	hsl(214, 67%, 70%)
Tutu	rgb(255, 228, 227)	hsl(2, 100%, 95%)

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.31:1 Very good#203B0E on #FFE4E3
Aa10.31:1 Very good#FFE4E3 on #203B0E
Aa5.28:1 Good#203B0E on #7FACE6
Aa5.28:1 Good#7FACE6 on #203B0E
Aa4.80:1 Good#275FD0 on #FFE4E3
Aa4.80:1 Good#FFE4E3 on #275FD0

Color blindness preview

CSS variables

/* Melancholia to Tutu — https://swatchly.xyz/palette/203b0e-275fd0-7face6-ffe4e3 */
:root {
  --melancholia: #203b0e;
  --god-of-rain: #275fd0;
  --queer-blue: #7face6;
  --tutu: #ffe4e3;
}

Tailwind CSS v4

/* Melancholia to Tutu — https://swatchly.xyz/palette/203b0e-275fd0-7face6-ffe4e3 */
@theme {
  --color-melancholia: #203b0e;
  --color-melancholia-50: #e9fce0;
  --color-melancholia-100: #def3d3;
  --color-melancholia-200: #c8e1bb;
  --color-melancholia-300: #afcba0;
  --color-melancholia-400: #8dac7e;
  --color-melancholia-500: #729161;
  --color-melancholia-600: #587648;
  --color-melancholia-700: #435e35;
  --color-melancholia-800: #334a26;
  --color-melancholia-900: #203b0e;
  --color-melancholia-950: #16240e;
  --color-god-of-rain: #275fd0;
  --color-god-of-rain-50: #f0f5ff;
  --color-god-of-rain-100: #e0ebff;
  --color-god-of-rain-200: #c1d7ff;
  --color-god-of-rain-300: #9cbfff;
  --color-god-of-rain-400: #689cff;
  --color-god-of-rain-500: #427cf0;
  --color-god-of-rain-600: #275fd0;
  --color-god-of-rain-700: #1849ad;
  --color-god-of-rain-800: #0c378f;
  --color-god-of-rain-900: #052974;
  --color-god-of-rain-950: #01184e;
  --color-queer-blue: #7face6;
  --color-queer-blue-50: #f3f8ff;
  --color-queer-blue-100: #e5f0ff;
  --color-queer-blue-200: #c7dfff;
  --color-queer-blue-300: #a5cbfc;
  --color-queer-blue-400: #7face6;
  --color-queer-blue-500: #638fc7;
  --color-queer-blue-600: #4872a8;
  --color-queer-blue-700: #335a8b;
  --color-queer-blue-800: #234570;
  --color-queer-blue-900: #183458;
  --color-queer-blue-950: #0b2039;
  --color-tutu: #ffe4e3;
  --color-tutu-50: #fff2f1;
  --color-tutu-100: #ffe4e3;
  --color-tutu-200: #e6d2d1;
  --color-tutu-300: #d1bbba;
  --color-tutu-400: #b39b9a;
  --color-tutu-500: #987f7f;
  --color-tutu-600: #7c6565;
  --color-tutu-700: #644f4f;
  --color-tutu-800: #4f3d3d;
  --color-tutu-900: #3d2e2e;
  --color-tutu-950: #271c1c;
}