Sugar Chic to Prunella color palette

FECAF9Sugar Chic 00352EPitch-Black Forests 66C4A4Mermaid’s Kiss BE6A57Spiced 91272CSaffronaut 884691Prunella

Open in generator Export PNG, PDF, ASE…

About this palette

Sugar Chic to Prunella is a 6-color cool palette: #FECAF9 (Sugar Chic), #00352E (Pitch-Black Forests), #66C4A4 (Mermaid’s Kiss), #BE6A57 (Spiced), #91272C (Saffronaut), #884691 (Prunella). It mixes pink, turquoise, red tones and feels cool overall. The strongest text pairing is #FECAF9 on #00352E with a contrast ratio of 9.71:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Chic	rgb(254, 202, 249)	hsl(306, 96%, 89%)
Pitch-Black Forests	rgb(0, 53, 46)	hsl(172, 100%, 10%)
Mermaid’s Kiss	rgb(102, 196, 164)	hsl(160, 44%, 58%)
Spiced	rgb(190, 106, 87)	hsl(11, 44%, 54%)
Saffronaut	rgb(145, 39, 44)	hsl(357, 58%, 36%)
Prunella	rgb(136, 70, 145)	hsl(293, 35%, 42%)

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.71:1 Very good#FECAF9 on #00352E
Aa9.71:1 Very good#00352E on #FECAF9
Aa6.46:1 Good#00352E on #66C4A4
Aa6.46:1 Good#66C4A4 on #00352E
Aa5.94:1 Good#FECAF9 on #91272C
Aa5.94:1 Good#91272C on #FECAF9
Aa4.51:1 Good#FECAF9 on #884691
Aa4.51:1 Good#884691 on #FECAF9

Color blindness preview

CSS variables

/* Sugar Chic to Prunella — https://swatchly.xyz/palette/fecaf9-00352e-66c4a4-be6a57-91272c-884691 */
:root {
  --sugar-chic: #fecaf9;
  --pitch-black-forests: #00352e;
  --mermaid-s-kiss: #66c4a4;
  --spiced: #be6a57;
  --saffronaut: #91272c;
  --prunella: #884691;
}

Tailwind CSS v4

/* Sugar Chic to Prunella — https://swatchly.xyz/palette/fecaf9-00352e-66c4a4-be6a57-91272c-884691 */
@theme {
  --color-sugar-chic: #fecaf9;
  --color-sugar-chic-50: #fff6fe;
  --color-sugar-chic-100: #ffe8fc;
  --color-sugar-chic-200: #fecaf9;
  --color-sugar-chic-300: #e0b6dc;
  --color-sugar-chic-400: #c293be;
  --color-sugar-chic-500: #a676a2;
  --color-sugar-chic-600: #895c85;
  --color-sugar-chic-700: #6e466b;
  --color-sugar-chic-800: #573455;
  --color-sugar-chic-900: #442642;
  --color-sugar-chic-950: #2c162a;
  --color-pitch-black-forests: #00352e;
  --color-pitch-black-forests-50: #e1fcf6;
  --color-pitch-black-forests-100: #d5f3ec;
  --color-pitch-black-forests-200: #bce0d9;
  --color-pitch-black-forests-300: #a2cbc2;
  --color-pitch-black-forests-400: #7daba2;
  --color-pitch-black-forests-500: #5f8e85;
  --color-pitch-black-forests-600: #45726a;
  --color-pitch-black-forests-700: #305a52;
  --color-pitch-black-forests-800: #21443e;
  --color-pitch-black-forests-900: #00352e;
  --color-pitch-black-forests-950: #0a1f1b;
  --color-mermaid-s-kiss: #66c4a4;
  --color-mermaid-s-kiss-50: #edfff7;
  --color-mermaid-s-kiss-100: #cfffec;
  --color-mermaid-s-kiss-200: #b3f1d9;
  --color-mermaid-s-kiss-300: #96dec3;
  --color-mermaid-s-kiss-400: #66c4a4;
  --color-mermaid-s-kiss-500: #47a586;
  --color-mermaid-s-kiss-600: #21876a;
  --color-mermaid-s-kiss-700: #006c52;
  --color-mermaid-s-kiss-800: #00533f;
  --color-mermaid-s-kiss-900: #003f2f;
  --color-mermaid-s-kiss-950: #00261b;
  --color-spiced: #be6a57;
  --color-spiced-50: #fff1ee;
  --color-spiced-100: #ffe4dd;
  --color-spiced-200: #ffc8bb;
  --color-spiced-300: #f7a997;
  --color-spiced-400: #db8773;
  --color-spiced-500: #be6a57;
  --color-spiced-600: #a0503f;
  --color-spiced-700: #843c2c;
  --color-spiced-800: #6a2c1e;
  --color-spiced-900: #551f14;
  --color-spiced-950: #371109;
  --color-saffronaut: #91272c;
  --color-saffronaut-50: #fff2f0;
  --color-saffronaut-100: #ffe4e2;
  --color-saffronaut-200: #ffc7c4;
  --color-saffronaut-300: #ffa49f;
  --color-saffronaut-400: #e97b78;
  --color-saffronaut-500: #cb5d5c;
  --color-saffronaut-600: #ab4243;
  --color-saffronaut-700: #91272c;
  --color-saffronaut-800: #721e22;
  --color-saffronaut-900: #5b1317;
  --color-saffronaut-950: #3c080b;
  --color-prunella: #884691;
  --color-prunella-50: #fdf0ff;
  --color-prunella-100: #fcdfff;
  --color-prunella-200: #f5bffc;
  --color-prunella-300: #e1a3e9;
  --color-prunella-400: #c37fcc;
  --color-prunella-500: #a562af;
  --color-prunella-600: #884691;
  --color-prunella-700: #6e3476;
  --color-prunella-800: #58265f;
  --color-prunella-900: #461b4c;
  --color-prunella-950: #2d0e31;
}