Cotton Candy Comet to Botanical Night color palette

FEC7D3Cotton Candy Comet 60BBB6Tropical Escape 2C9E9ABaltic 7D4252Nocturne Red 0B3C35Botanical Night

Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Candy Comet to Botanical Night is a 5-color cool, vintage palette: #FEC7D3 (Cotton Candy Comet), #60BBB6 (Tropical Escape), #2C9E9A (Baltic), #7D4252 (Nocturne Red), #0B3C35 (Botanical Night). It mixes pink, turquoise, red tones and feels cool overall. The strongest text pairing is #FEC7D3 on #0B3C35 with a contrast ratio of 8.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Candy Comet	rgb(254, 199, 211)	hsl(347, 96%, 89%)
Tropical Escape	rgb(96, 187, 182)	hsl(177, 40%, 55%)
Baltic	rgb(44, 158, 154)	hsl(178, 56%, 40%)
Nocturne Red	rgb(125, 66, 82)	hsl(344, 31%, 37%)
Botanical Night	rgb(11, 60, 53)	hsl(171, 69%, 14%)

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.37:1 Very good#FEC7D3 on #0B3C35
Aa8.37:1 Very good#0B3C35 on #FEC7D3
Aa5.42:1 Good#60BBB6 on #0B3C35
Aa5.42:1 Good#0B3C35 on #60BBB6
Aa5.17:1 Good#FEC7D3 on #7D4252
Aa5.17:1 Good#7D4252 on #FEC7D3
Aa3.78:1 Poor#2C9E9A on #0B3C35
Aa3.78:1 Poor#0B3C35 on #2C9E9A

Color blindness preview

CSS variables

/* Cotton Candy Comet to Botanical Night — https://swatchly.xyz/palette/fec7d3-60bbb6-2c9e9a-7d4252-0b3c35 */
:root {
  --cotton-candy-comet: #fec7d3;
  --tropical-escape: #60bbb6;
  --baltic: #2c9e9a;
  --nocturne-red: #7d4252;
  --botanical-night: #0b3c35;
}

Tailwind CSS v4

/* Cotton Candy Comet to Botanical Night — https://swatchly.xyz/palette/fec7d3-60bbb6-2c9e9a-7d4252-0b3c35 */
@theme {
  --color-cotton-candy-comet: #fec7d3;
  --color-cotton-candy-comet-50: #fff2f4;
  --color-cotton-candy-comet-100: #ffe3e9;
  --color-cotton-candy-comet-200: #fec7d3;
  --color-cotton-candy-comet-300: #e1b3bd;
  --color-cotton-candy-comet-400: #c4929d;
  --color-cotton-candy-comet-500: #a87682;
  --color-cotton-candy-comet-600: #8b5c68;
  --color-cotton-candy-comet-700: #714751;
  --color-cotton-candy-comet-800: #5b363f;
  --color-cotton-candy-comet-900: #472830;
  --color-cotton-candy-comet-950: #2e181d;
  --color-tropical-escape: #60bbb6;
  --color-tropical-escape-50: #e2fffd;
  --color-tropical-escape-100: #c8fbf7;
  --color-tropical-escape-200: #adebe6;
  --color-tropical-escape-300: #8fd7d2;
  --color-tropical-escape-400: #60bbb6;
  --color-tropical-escape-500: #419d99;
  --color-tropical-escape-600: #1d807c;
  --color-tropical-escape-700: #006763;
  --color-tropical-escape-800: #00504d;
  --color-tropical-escape-900: #003d3b;
  --color-tropical-escape-950: #002524;
  --color-baltic: #2c9e9a;
  --color-baltic-50: #dafffc;
  --color-baltic-100: #c0faf7;
  --color-baltic-200: #a2eae6;
  --color-baltic-300: #82d6d2;
  --color-baltic-400: #55b9b4;
  --color-baltic-500: #2c9e9a;
  --color-baltic-600: #00817d;
  --color-baltic-700: #006663;
  --color-baltic-800: #00504d;
  --color-baltic-900: #003d3b;
  --color-baltic-950: #002625;
  --color-nocturne-red: #7d4252;
  --color-nocturne-red-50: #fff1f4;
  --color-nocturne-red-100: #ffe3e9;
  --color-nocturne-red-200: #fcc8d3;
  --color-nocturne-red-300: #eaafbd;
  --color-nocturne-red-400: #ce8e9d;
  --color-nocturne-red-500: #b27282;
  --color-nocturne-red-600: #955968;
  --color-nocturne-red-700: #7d4252;
  --color-nocturne-red-800: #633340;
  --color-nocturne-red-900: #4e2530;
  --color-nocturne-red-950: #33151d;
  --color-botanical-night: #0b3c35;
  --color-botanical-night-50: #e2fcf6;
  --color-botanical-night-100: #d5f3ec;
  --color-botanical-night-200: #bde0d9;
  --color-botanical-night-300: #a2cbc2;
  --color-botanical-night-400: #7faca3;
  --color-botanical-night-500: #639188;
  --color-botanical-night-600: #4a766e;
  --color-botanical-night-700: #365f57;
  --color-botanical-night-800: #264b44;
  --color-botanical-night-900: #0b3c35;
  --color-botanical-night-950: #0e2421;
}