Cotton Candy Comet to Black Cherry color palette

FEC4CFCotton Candy Comet A7A778Olive Tree 6F6DC8Venus Violet 1C5A54Mosque 2B1214Black Cherry

About this palette

Cotton Candy Comet to Black Cherry is a 5-color warm, vintage palette: #FEC4CF (Cotton Candy Comet), #A7A778 (Olive Tree), #6F6DC8 (Venus Violet), #1C5A54 (Mosque), #2B1214 (Black Cherry). It mixes pink, yellow, purple, turquoise, brown tones and feels warm overall. The strongest text pairing is #FEC4CF on #2B1214 with a contrast ratio of 11.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Candy Comet	rgb(254, 196, 207)	hsl(349, 97%, 88%)
Olive Tree	rgb(167, 167, 120)	hsl(60, 21%, 56%)
Venus Violet	rgb(111, 109, 200)	hsl(241, 45%, 61%)
Mosque	rgb(28, 90, 84)	hsl(174, 53%, 23%)
Black Cherry	rgb(43, 18, 20)	hsl(355, 41%, 12%)

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.

Aa11.68:1 Very good#FEC4CF on #2B1214
Aa11.68:1 Very good#2B1214 on #FEC4CF
Aa7.04:1 Very good#A7A778 on #2B1214
Aa7.04:1 Very good#2B1214 on #A7A778
Aa5.31:1 Good#FEC4CF on #1C5A54
Aa5.31:1 Good#1C5A54 on #FEC4CF
Aa3.92:1 Poor#6F6DC8 on #2B1214
Aa3.92:1 Poor#2B1214 on #6F6DC8

Color blindness preview

CSS variables

/* Cotton Candy Comet to Black Cherry — https://swatchly.xyz/palette/fec4cf-a7a778-6f6dc8-1c5a54-2b1214 */
:root {
  --cotton-candy-comet: #fec4cf;
  --olive-tree: #a7a778;
  --venus-violet: #6f6dc8;
  --mosque: #1c5a54;
  --black-cherry: #2b1214;
}

Tailwind CSS v4

/* Cotton Candy Comet to Black Cherry — https://swatchly.xyz/palette/fec4cf-a7a778-6f6dc8-1c5a54-2b1214 */
@theme {
  --color-cotton-candy-comet: #fec4cf;
  --color-cotton-candy-comet-50: #fff0f2;
  --color-cotton-candy-comet-100: #ffe1e6;
  --color-cotton-candy-comet-200: #fec4cf;
  --color-cotton-candy-comet-300: #e2b1ba;
  --color-cotton-candy-comet-400: #c5909a;
  --color-cotton-candy-comet-500: #a9757f;
  --color-cotton-candy-comet-600: #8d5b65;
  --color-cotton-candy-comet-700: #734650;
  --color-cotton-candy-comet-800: #5c353e;
  --color-cotton-candy-comet-900: #48282f;
  --color-cotton-candy-comet-950: #2f171c;
  --color-olive-tree: #a7a778;
  --color-olive-tree-50: #f8f8dd;
  --color-olive-tree-100: #eeefd1;
  --color-olive-tree-200: #dbdcb8;
  --color-olive-tree-300: #c6c69d;
  --color-olive-tree-400: #a7a778;
  --color-olive-tree-500: #8b8b5d;
  --color-olive-tree-600: #707044;
  --color-olive-tree-700: #595930;
  --color-olive-tree-800: #464521;
  --color-olive-tree-900: #353516;
  --color-olive-tree-950: #21210a;
  --color-venus-violet: #6f6dc8;
  --color-venus-violet-50: #f1f2ff;
  --color-venus-violet-100: #e2e4ff;
  --color-venus-violet-200: #c9ccff;
  --color-venus-violet-300: #adafff;
  --color-venus-violet-400: #8b8be7;
  --color-venus-violet-500: #6f6dc8;
  --color-venus-violet-600: #5855aa;
  --color-venus-violet-700: #46418e;
  --color-venus-violet-800: #363274;
  --color-venus-violet-900: #2a265e;
  --color-venus-violet-950: #1a1640;
  --color-mosque: #1c5a54;
  --color-mosque-50: #dcfdf8;
  --color-mosque-100: #cff4ef;
  --color-mosque-200: #b4e1db;
  --color-mosque-300: #97cac4;
  --color-mosque-400: #71aba3;
  --color-mosque-500: #538e87;
  --color-mosque-600: #38726b;
  --color-mosque-700: #1c5a54;
  --color-mosque-800: #174641;
  --color-mosque-900: #0e3632;
  --color-mosque-950: #05221f;
  --color-black-cherry: #2b1214;
  --color-black-cherry-50: #fff1f2;
  --color-black-cherry-100: #fce5e5;
  --color-black-cherry-200: #ebd0d1;
  --color-black-cherry-300: #d7b8b9;
  --color-black-cherry-400: #b99899;
  --color-black-cherry-500: #9d7c7d;
  --color-black-cherry-600: #806162;
  --color-black-cherry-700: #664a4b;
  --color-black-cherry-800: #4f3839;
  --color-black-cherry-900: #3c292a;
  --color-black-cherry-950: #2b1214;
}