Bloodthirsty to Piglet Color Palette

About this palette

Bloodthirsty to Piglet is a 5-color cool palette: #880013 (Bloodthirsty), #007709 (Poblano), #4287F1 (Pool Water), #71ADEA (Acapulco Dive), #FFBFC4 (Piglet). It mixes red, green, blue, pink tones and feels cool overall. The strongest text pairing is #880013 on #FFBFC4 with a contrast ratio of 6.57:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bloodthirsty	rgb(136, 0, 19)	hsl(352, 100%, 27%)
Poblano	rgb(0, 119, 9)	hsl(125, 100%, 23%)
Pool Water	rgb(66, 135, 241)	hsl(216, 86%, 60%)
Acapulco Dive	rgb(113, 173, 234)	hsl(210, 74%, 68%)
Piglet	rgb(255, 191, 196)	hsl(355, 100%, 87%)

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.

Aa6.57:1 Good#880013 on #FFBFC4
Aa6.57:1 Good#FFBFC4 on #880013
Aa4.31:1 Poor#880013 on #71ADEA
Aa4.31:1 Poor#71ADEA on #880013
Aa3.71:1 Poor#007709 on #FFBFC4
Aa3.71:1 Poor#FFBFC4 on #007709

Color blindness preview

CSS variables

/* Bloodthirsty to Piglet — https://swatchly.xyz/palette/880013-007709-4287f1-71adea-ffbfc4 */
:root {
  --bloodthirsty: #880013;
  --poblano: #007709;
  --pool-water: #4287f1;
  --acapulco-dive: #71adea;
  --piglet: #ffbfc4;
}

Tailwind CSS v4

/* Bloodthirsty to Piglet — https://swatchly.xyz/palette/880013-007709-4287f1-71adea-ffbfc4 */
@theme {
  --color-bloodthirsty: #880013;
  --color-bloodthirsty-50: #fff2f0;
  --color-bloodthirsty-100: #ffe4e1;
  --color-bloodthirsty-200: #ffc8c3;
  --color-bloodthirsty-300: #ffa79f;
  --color-bloodthirsty-400: #f47872;
  --color-bloodthirsty-500: #d85a56;
  --color-bloodthirsty-600: #b93f3d;
  --color-bloodthirsty-700: #9b292b;
  --color-bloodthirsty-800: #880013;
  --color-bloodthirsty-900: #670d12;
  --color-bloodthirsty-950: #450407;
  --color-poblano: #007709;
  --color-poblano-50: #e1ffdf;
  --color-poblano-100: #c0fcbc;
  --color-poblano-200: #a1e99d;
  --color-poblano-300: #80d37c;
  --color-poblano-400: #55b252;
  --color-poblano-500: #329531;
  --color-poblano-600: #007709;
  --color-poblano-700: #005f05;
  --color-poblano-800: #004a03;
  --color-poblano-900: #003a02;
  --color-poblano-950: #002501;
  --color-pool-water: #4287f1;
  --color-pool-water-50: #f1f6ff;
  --color-pool-water-100: #e2edff;
  --color-pool-water-200: #c4dbff;
  --color-pool-water-300: #a0c5ff;
  --color-pool-water-400: #6aa5ff;
  --color-pool-water-500: #4287f1;
  --color-pool-water-600: #266ad0;
  --color-pool-water-700: #1052b0;
  --color-pool-water-800: #013e91;
  --color-pool-water-900: #002f72;
  --color-pool-water-950: #001c4b;
  --color-acapulco-dive: #71adea;
  --color-acapulco-dive-50: #f2f8ff;
  --color-acapulco-dive-100: #e3f0ff;
  --color-acapulco-dive-200: #c2e0ff;
  --color-acapulco-dive-300: #9accff;
  --color-acapulco-dive-400: #71adea;
  --color-acapulco-dive-500: #5590cb;
  --color-acapulco-dive-600: #3973ac;
  --color-acapulco-dive-700: #245b8e;
  --color-acapulco-dive-800: #154673;
  --color-acapulco-dive-900: #0a355b;
  --color-acapulco-dive-950: #03203b;
  --color-piglet: #ffbfc4;
  --color-piglet-50: #ffeced;
  --color-piglet-100: #ffdddf;
  --color-piglet-200: #ffbfc4;
  --color-piglet-300: #e3acb0;
  --color-piglet-400: #c78c91;
  --color-piglet-500: #ab7177;
  --color-piglet-600: #8f585e;
  --color-piglet-700: #754449;
  --color-piglet-800: #5f3439;
  --color-piglet-900: #4b262b;
  --color-piglet-950: #301619;
}