Piglet to Forbidden Passion Color Palette

About this palette

Piglet to Forbidden Passion is a 4-color warm, monochromatic, gradient palette: #FFC1BF (Piglet), #F67474 (Georgia Peach), #9D3238 (Queen of Hearts), #6D0E21 (Forbidden Passion). It mixes pink, red tones and feels warm overall. The strongest text pairing is #FFC1BF on #6D0E21 with a contrast ratio of 7.86:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Piglet	rgb(255, 193, 191)	hsl(2, 100%, 87%)
Georgia Peach	rgb(246, 116, 116)	hsl(0, 88%, 71%)
Queen of Hearts	rgb(157, 50, 56)	hsl(357, 52%, 41%)
Forbidden Passion	rgb(109, 14, 33)	hsl(348, 77%, 24%)

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.

Aa7.86:1 Very good#FFC1BF on #6D0E21
Aa7.86:1 Very good#6D0E21 on #FFC1BF
Aa4.63:1 Good#FFC1BF on #9D3238
Aa4.63:1 Good#9D3238 on #FFC1BF
Aa4.42:1 Poor#F67474 on #6D0E21
Aa4.42:1 Poor#6D0E21 on #F67474

Color blindness preview

CSS variables

/* Piglet to Forbidden Passion — https://swatchly.xyz/palette/ffc1bf-f67474-9d3238-6d0e21 */
:root {
  --piglet: #ffc1bf;
  --georgia-peach: #f67474;
  --queen-of-hearts: #9d3238;
  --forbidden-passion: #6d0e21;
}

Tailwind CSS v4

/* Piglet to Forbidden Passion — https://swatchly.xyz/palette/ffc1bf-f67474-9d3238-6d0e21 */
@theme {
  --color-piglet: #ffc1bf;
  --color-piglet-50: #ffeded;
  --color-piglet-100: #ffdfdd;
  --color-piglet-200: #ffc1bf;
  --color-piglet-300: #e3aeac;
  --color-piglet-400: #c68e8c;
  --color-piglet-500: #ab7372;
  --color-piglet-600: #8f5a59;
  --color-piglet-700: #754545;
  --color-piglet-800: #5e3534;
  --color-piglet-900: #4a2727;
  --color-piglet-950: #301717;
  --color-georgia-peach: #f67474;
  --color-georgia-peach-50: #fff2f1;
  --color-georgia-peach-100: #ffe4e3;
  --color-georgia-peach-200: #ffc9c6;
  --color-georgia-peach-300: #ffa6a3;
  --color-georgia-peach-400: #f67474;
  --color-georgia-peach-500: #d6575a;
  --color-georgia-peach-600: #b63c41;
  --color-georgia-peach-700: #97262e;
  --color-georgia-peach-800: #7b151f;
  --color-georgia-peach-900: #620a15;
  --color-georgia-peach-950: #410309;
  --color-queen-of-hearts: #9d3238;
  --color-queen-of-hearts-50: #fff1f1;
  --color-queen-of-hearts-100: #ffe4e2;
  --color-queen-of-hearts-200: #ffcac8;
  --color-queen-of-hearts-300: #ffa9a7;
  --color-queen-of-hearts-400: #ee8180;
  --color-queen-of-hearts-500: #d36465;
  --color-queen-of-hearts-600: #b64a4d;
  --color-queen-of-hearts-700: #9d3238;
  --color-queen-of-hearts-800: #7e242a;
  --color-queen-of-hearts-900: #64171d;
  --color-queen-of-hearts-950: #430a0f;
  --color-forbidden-passion: #6d0e21;
  --color-forbidden-passion-50: #fff1f1;
  --color-forbidden-passion-100: #ffe4e4;
  --color-forbidden-passion-200: #ffc7c8;
  --color-forbidden-passion-300: #ffa4a8;
  --color-forbidden-passion-400: #e48288;
  --color-forbidden-passion-500: #ca666d;
  --color-forbidden-passion-600: #ad4d55;
  --color-forbidden-passion-700: #913942;
  --color-forbidden-passion-800: #792a33;
  --color-forbidden-passion-900: #6d0e21;
  --color-forbidden-passion-950: #441016;
}