Melancholia to Cotton Candy Comet Color Palette

About this palette

Melancholia to Cotton Candy Comet is a 5-color cool, vintage palette: #003B19 (Melancholia), #7B3745 (Köfte Brown), #589A62 (Leafy), #54BDD4 (Skydive), #FFC7CD (Cotton Candy Comet). It mixes green, red, turquoise, pink tones and feels cool overall. The strongest text pairing is #003B19 on #FFC7CD with a contrast ratio of 8.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melancholia	rgb(0, 59, 25)	hsl(145, 100%, 12%)
Köfte Brown	rgb(123, 55, 69)	hsl(348, 38%, 35%)
Leafy	rgb(88, 154, 98)	hsl(129, 27%, 47%)
Skydive	rgb(84, 189, 212)	hsl(191, 60%, 58%)
Cotton Candy Comet	rgb(255, 199, 205)	hsl(354, 100%, 89%)

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.

Aa8.72:1 Very good#003B19 on #FFC7CD
Aa8.72:1 Very good#FFC7CD on #003B19
Aa5.86:1 Good#003B19 on #54BDD4
Aa5.86:1 Good#54BDD4 on #003B19
Aa5.78:1 Good#7B3745 on #FFC7CD
Aa5.78:1 Good#FFC7CD on #7B3745
Aa3.88:1 Poor#7B3745 on #54BDD4
Aa3.88:1 Poor#54BDD4 on #7B3745

Color blindness preview

CSS variables

/* Melancholia to Cotton Candy Comet — https://swatchly.xyz/palette/003b19-7b3745-589a62-54bdd4-ffc7cd */
:root {
  --melancholia: #003b19;
  --k-fte-brown: #7b3745;
  --leafy: #589a62;
  --skydive: #54bdd4;
  --cotton-candy-comet: #ffc7cd;
}

Tailwind CSS v4

/* Melancholia to Cotton Candy Comet — https://swatchly.xyz/palette/003b19-7b3745-589a62-54bdd4-ffc7cd */
@theme {
  --color-melancholia: #003b19;
  --color-melancholia-50: #e0fee6;
  --color-melancholia-100: #d3f6db;
  --color-melancholia-200: #bbe4c4;
  --color-melancholia-300: #a0ceaa;
  --color-melancholia-400: #7caf88;
  --color-melancholia-500: #5f936c;
  --color-melancholia-600: #457752;
  --color-melancholia-700: #305f3e;
  --color-melancholia-800: #214a2d;
  --color-melancholia-900: #003b19;
  --color-melancholia-950: #0a2312;
  --color-k-fte-brown: #7b3745;
  --color-k-fte-brown-50: #fff1f3;
  --color-k-fte-brown-100: #ffe3e7;
  --color-k-fte-brown-200: #ffc5cd;
  --color-k-fte-brown-300: #eea9b4;
  --color-k-fte-brown-400: #d18692;
  --color-k-fte-brown-500: #b36976;
  --color-k-fte-brown-600: #944f5c;
  --color-k-fte-brown-700: #7b3745;
  --color-k-fte-brown-800: #602b36;
  --color-k-fte-brown-900: #4c1f28;
  --color-k-fte-brown-950: #311118;
  --color-leafy: #589a62;
  --color-leafy-50: #e1ffe4;
  --color-leafy-100: #cff9d3;
  --color-leafy-200: #b6e8bb;
  --color-leafy-300: #9ad3a1;
  --color-leafy-400: #76b57e;
  --color-leafy-500: #589a62;
  --color-leafy-600: #3d7e48;
  --color-leafy-700: #296534;
  --color-leafy-800: #195025;
  --color-leafy-900: #0f3e1a;
  --color-leafy-950: #05270d;
  --color-skydive: #54bdd4;
  --color-skydive-50: #effcff;
  --color-skydive-100: #d9f7ff;
  --color-skydive-200: #a9ecfc;
  --color-skydive-300: #89d9ec;
  --color-skydive-400: #54bdd4;
  --color-skydive-500: #319eb5;
  --color-skydive-600: #008196;
  --color-skydive-700: #006677;
  --color-skydive-800: #004f5c;
  --color-skydive-900: #003c46;
  --color-skydive-950: #00242c;
  --color-cotton-candy-comet: #ffc7cd;
  --color-cotton-candy-comet-50: #fff1f3;
  --color-cotton-candy-comet-100: #ffe4e6;
  --color-cotton-candy-comet-200: #ffc7cd;
  --color-cotton-candy-comet-300: #e2b3b8;
  --color-cotton-candy-comet-400: #c59298;
  --color-cotton-candy-comet-500: #a9767c;
  --color-cotton-candy-comet-600: #8c5d63;
  --color-cotton-candy-comet-700: #72474d;
  --color-cotton-candy-comet-800: #5b363b;
  --color-cotton-candy-comet-900: #48282d;
  --color-cotton-candy-comet-950: #2e181b;
}