Piglet to Dark Olive Color Palette

About this palette

Piglet to Dark Olive is a 5-color cool, vintage palette: #FFC3BF (Piglet), #97BE71 (Pistachio), #8268C7 (Lavish Spending), #00717F (Waterworld), #3C4000 (Dark Olive). It mixes pink, green, purple, turquoise tones and feels cool overall. The strongest text pairing is #FFC3BF on #3C4000 with a contrast ratio of 7.17:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Piglet	rgb(255, 195, 191)	hsl(4, 100%, 87%)
Pistachio	rgb(151, 190, 113)	hsl(90, 37%, 59%)
Lavish Spending	rgb(130, 104, 199)	hsl(256, 46%, 59%)
Waterworld	rgb(0, 113, 127)	hsl(187, 100%, 25%)
Dark Olive	rgb(60, 64, 0)	hsl(64, 100%, 13%)

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.17:1 Very good#FFC3BF on #3C4000
Aa7.17:1 Very good#3C4000 on #FFC3BF
Aa5.15:1 Good#97BE71 on #3C4000
Aa5.15:1 Good#3C4000 on #97BE71
Aa3.76:1 Poor#FFC3BF on #00717F
Aa3.76:1 Poor#00717F on #FFC3BF

Color blindness preview

CSS variables

/* Piglet to Dark Olive — https://swatchly.xyz/palette/ffc3bf-97be71-8268c7-00717f-3c4000 */
:root {
  --piglet: #ffc3bf;
  --pistachio: #97be71;
  --lavish-spending: #8268c7;
  --waterworld: #00717f;
  --dark-olive: #3c4000;
}

Tailwind CSS v4

/* Piglet to Dark Olive — https://swatchly.xyz/palette/ffc3bf-97be71-8268c7-00717f-3c4000 */
@theme {
  --color-piglet: #ffc3bf;
  --color-piglet-50: #ffeeed;
  --color-piglet-100: #ffe0de;
  --color-piglet-200: #ffc3bf;
  --color-piglet-300: #e3b0ac;
  --color-piglet-400: #c68f8c;
  --color-piglet-500: #ab7471;
  --color-piglet-600: #8e5b58;
  --color-piglet-700: #744644;
  --color-piglet-800: #5e3534;
  --color-piglet-900: #4a2826;
  --color-piglet-950: #301716;
  --color-pistachio: #97be71;
  --color-pistachio-50: #f3ffe9;
  --color-pistachio-100: #e4fcd0;
  --color-pistachio-200: #d0ecb7;
  --color-pistachio-300: #b9d99c;
  --color-pistachio-400: #97be71;
  --color-pistachio-500: #7a9f54;
  --color-pistachio-600: #5d8136;
  --color-pistachio-700: #466720;
  --color-pistachio-800: #34500f;
  --color-pistachio-900: #253d04;
  --color-pistachio-950: #142501;
  --color-lavish-spending: #8268c7;
  --color-lavish-spending-50: #f4f1ff;
  --color-lavish-spending-100: #e8e3ff;
  --color-lavish-spending-200: #d4c9ff;
  --color-lavish-spending-300: #beaaff;
  --color-lavish-spending-400: #9e86e5;
  --color-lavish-spending-500: #8268c7;
  --color-lavish-spending-600: #6a50a9;
  --color-lavish-spending-700: #553c8d;
  --color-lavish-spending-800: #432d73;
  --color-lavish-spending-900: #34215d;
  --color-lavish-spending-950: #21133f;
  --color-waterworld: #00717f;
  --color-waterworld-50: #e2fbff;
  --color-waterworld-100: #c0f4fe;
  --color-waterworld-200: #a2e1ec;
  --color-waterworld-300: #80cad7;
  --color-waterworld-400: #55aab9;
  --color-waterworld-500: #328d9c;
  --color-waterworld-600: #00717f;
  --color-waterworld-700: #005a65;
  --color-waterworld-800: #004650;
  --color-waterworld-900: #00363e;
  --color-waterworld-950: #002227;
  --color-dark-olive: #3c4000;
  --color-dark-olive-50: #f4f9d8;
  --color-dark-olive-100: #eaefca;
  --color-dark-olive-200: #d7dcb0;
  --color-dark-olive-300: #bfc592;
  --color-dark-olive-400: #9ea56c;
  --color-dark-olive-500: #82884f;
  --color-dark-olive-600: #676c35;
  --color-dark-olive-700: #4f5422;
  --color-dark-olive-800: #3c4000;
  --color-dark-olive-900: #2e310b;
  --color-dark-olive-950: #1b1d04;
}