Pinky to Kissed by Mist Color Palette

About this palette

Pinky to Kissed by Mist is a 5-color warm palette: #FE7CA3 (Pinky), #350E16 (Chocolate Kiss), #AA675D (Rustling Leaves), #792E6A (Eminence), #FBCCF2 (Kissed by Mist). It mixes pink, brown, red, purple tones and feels warm overall. The strongest text pairing is #350E16 on #FBCCF2 with a contrast ratio of 12.25:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pinky	rgb(254, 124, 163)	hsl(342, 98%, 74%)
Chocolate Kiss	rgb(53, 14, 22)	hsl(348, 58%, 13%)
Rustling Leaves	rgb(170, 103, 93)	hsl(8, 31%, 52%)
Eminence	rgb(121, 46, 106)	hsl(312, 45%, 33%)
Kissed by Mist	rgb(251, 204, 242)	hsl(311, 85%, 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.

Aa12.25:1 Super#350E16 on #FBCCF2
Aa12.25:1 Super#FBCCF2 on #350E16
Aa7.04:1 Very good#FE7CA3 on #350E16
Aa7.04:1 Very good#350E16 on #FE7CA3
Aa6.23:1 Good#792E6A on #FBCCF2
Aa6.23:1 Good#FBCCF2 on #792E6A
Aa3.92:1 Poor#350E16 on #AA675D
Aa3.92:1 Poor#AA675D on #350E16

Color blindness preview

CSS variables

/* Pinky to Kissed by Mist — https://swatchly.xyz/palette/fe7ca3-350e16-aa675d-792e6a-fbccf2 */
:root {
  --pinky: #fe7ca3;
  --chocolate-kiss: #350e16;
  --rustling-leaves: #aa675d;
  --eminence: #792e6a;
  --kissed-by-mist: #fbccf2;
}

Tailwind CSS v4

/* Pinky to Kissed by Mist — https://swatchly.xyz/palette/fe7ca3-350e16-aa675d-792e6a-fbccf2 */
@theme {
  --color-pinky: #fe7ca3;
  --color-pinky-50: #fff7f8;
  --color-pinky-100: #ffebf0;
  --color-pinky-200: #ffd1dc;
  --color-pinky-300: #ffb1c5;
  --color-pinky-400: #fe7ca3;
  --color-pinky-500: #dc5e86;
  --color-pinky-600: #ba406a;
  --color-pinky-700: #9a2852;
  --color-pinky-800: #7c163e;
  --color-pinky-900: #62092e;
  --color-pinky-950: #3f021b;
  --color-chocolate-kiss: #350e16;
  --color-chocolate-kiss-50: #fff1f2;
  --color-chocolate-kiss-100: #ffe3e6;
  --color-chocolate-kiss-200: #f4ccd0;
  --color-chocolate-kiss-300: #e1b3b8;
  --color-chocolate-kiss-400: #c49298;
  --color-chocolate-kiss-500: #a8767c;
  --color-chocolate-kiss-600: #8b5c62;
  --color-chocolate-kiss-700: #70474c;
  --color-chocolate-kiss-800: #59353a;
  --color-chocolate-kiss-900: #45272b;
  --color-chocolate-kiss-950: #350e16;
  --color-rustling-leaves: #aa675d;
  --color-rustling-leaves-50: #ffefec;
  --color-rustling-leaves-100: #ffdfd9;
  --color-rustling-leaves-200: #fcc2b8;
  --color-rustling-leaves-300: #e7a79d;
  --color-rustling-leaves-400: #c8847a;
  --color-rustling-leaves-500: #aa675d;
  --color-rustling-leaves-600: #8e5047;
  --color-rustling-leaves-700: #743d35;
  --color-rustling-leaves-800: #5e2e27;
  --color-rustling-leaves-900: #4b221d;
  --color-rustling-leaves-950: #321410;
  --color-eminence: #792e6a;
  --color-eminence-50: #fff0fb;
  --color-eminence-100: #ffe1f6;
  --color-eminence-200: #ffbfee;
  --color-eminence-300: #eca3da;
  --color-eminence-400: #cf7fbc;
  --color-eminence-500: #b1629f;
  --color-eminence-600: #924782;
  --color-eminence-700: #792e6a;
  --color-eminence-800: #5e2452;
  --color-eminence-900: #4b1941;
  --color-eminence-950: #300d29;
  --color-kissed-by-mist: #fbccf2;
  --color-kissed-by-mist-50: #fff6fd;
  --color-kissed-by-mist-100: #ffe8fa;
  --color-kissed-by-mist-200: #fbccf2;
  --color-kissed-by-mist-300: #deb8d7;
  --color-kissed-by-mist-400: #c095b8;
  --color-kissed-by-mist-500: #a3799c;
  --color-kissed-by-mist-600: #865e7f;
  --color-kissed-by-mist-700: #6c4866;
  --color-kissed-by-mist-800: #563650;
  --color-kissed-by-mist-900: #43283f;
  --color-kissed-by-mist-950: #2b1828;
}