Start generating

Piglet to Drops of God color palette

FBBFC5Piglet95B759Makin It Rain769C6CMoney4878AFSail On24476FPretty Twilight Night5B2530Drops of God
Open in generator Export PNG, PDF, ASE…

About this palette

Piglet to Drops of God is a 6-color cool palette: #FBBFC5 (Piglet), #95B759 (Makin It Rain), #769C6C (Money), #4878AF (Sail On), #24476F (Pretty Twilight Night), #5B2530 (Drops of God). It mixes pink, green, blue, brown tones and feels cool overall. The strongest text pairing is #FBBFC5 on #5B2530 with a contrast ratio of 7.63:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pigletrgb(251, 191, 197)hsl(354, 88%, 87%)
Makin It Rainrgb(149, 183, 89)hsl(82, 39%, 53%)
Moneyrgb(118, 156, 108)hsl(107, 20%, 52%)
Sail Onrgb(72, 120, 175)hsl(212, 42%, 48%)
Pretty Twilight Nightrgb(36, 71, 111)hsl(212, 51%, 29%)
Drops of Godrgb(91, 37, 48)hsl(348, 42%, 25%)

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.63:1 Very good#FBBFC5 on #5B2530
  • Aa7.63:1 Very good#5B2530 on #FBBFC5
  • Aa6.06:1 Good#FBBFC5 on #24476F
  • Aa6.06:1 Good#24476F on #FBBFC5
  • Aa5.25:1 Good#95B759 on #5B2530
  • Aa5.25:1 Good#5B2530 on #95B759
  • Aa4.17:1 Poor#95B759 on #24476F
  • Aa4.17:1 Poor#24476F on #95B759

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Piglet to Drops of God — https://swatchly.xyz/palette/fbbfc5-95b759-769c6c-4878af-24476f-5b2530 */
:root {
  --piglet: #fbbfc5;
  --makin-it-rain: #95b759;
  --money: #769c6c;
  --sail-on: #4878af;
  --pretty-twilight-night: #24476f;
  --drops-of-god: #5b2530;
}

Tailwind CSS v4

/* Piglet to Drops of God — https://swatchly.xyz/palette/fbbfc5-95b759-769c6c-4878af-24476f-5b2530 */
@theme {
  --color-piglet: #fbbfc5;
  --color-piglet-50: #ffebed;
  --color-piglet-100: #ffdcdf;
  --color-piglet-200: #fbbfc5;
  --color-piglet-300: #e0acb1;
  --color-piglet-400: #c38d92;
  --color-piglet-500: #a87278;
  --color-piglet-600: #8d595f;
  --color-piglet-700: #73454b;
  --color-piglet-800: #5d353a;
  --color-piglet-900: #49272c;
  --color-piglet-950: #2f171a;
  --color-makin-it-rain: #95b759;
  --color-makin-it-rain-50: #efffd8;
  --color-makin-it-rain-100: #e2f9c2;
  --color-makin-it-rain-200: #cee8a6;
  --color-makin-it-rain-300: #b6d487;
  --color-makin-it-rain-400: #95b759;
  --color-makin-it-rain-500: #79993b;
  --color-makin-it-rain-600: #5e7d1a;
  --color-makin-it-rain-700: #486300;
  --color-makin-it-rain-800: #374d00;
  --color-makin-it-rain-900: #293b00;
  --color-makin-it-rain-950: #182400;
  --color-money: #769c6c;
  --color-money-50: #e9ffe3;
  --color-money-100: #dff7d8;
  --color-money-200: #cae7c2;
  --color-money-300: #b2d3a9;
  --color-money-400: #91b688;
  --color-money-500: #769c6c;
  --color-money-600: #5a7f51;
  --color-money-700: #44663b;
  --color-money-800: #32502a;
  --color-money-900: #243d1d;
  --color-money-950: #14260f;
  --color-sail-on: #4878af;
  --color-sail-on-50: #eef6ff;
  --color-sail-on-100: #e1efff;
  --color-sail-on-200: #c2deff;
  --color-sail-on-300: #a0cafc;
  --color-sail-on-400: #7dace3;
  --color-sail-on-500: #6192ca;
  --color-sail-on-600: #4878af;
  --color-sail-on-700: #325f91;
  --color-sail-on-800: #224a76;
  --color-sail-on-900: #16385e;
  --color-sail-on-950: #09233e;
  --color-pretty-twilight-night: #24476f;
  --color-pretty-twilight-night-50: #eef6ff;
  --color-pretty-twilight-night-100: #deedff;
  --color-pretty-twilight-night-200: #bddbfe;
  --color-pretty-twilight-night-300: #a3c5ed;
  --color-pretty-twilight-night-400: #81a6d2;
  --color-pretty-twilight-night-500: #658bb7;
  --color-pretty-twilight-night-600: #4d719b;
  --color-pretty-twilight-night-700: #395a81;
  --color-pretty-twilight-night-800: #24476f;
  --color-pretty-twilight-night-900: #1e3754;
  --color-pretty-twilight-night-950: #102237;
  --color-drops-of-god: #5b2530;
  --color-drops-of-god-50: #fff1f3;
  --color-drops-of-god-100: #ffe3e6;
  --color-drops-of-god-200: #fcc8cf;
  --color-drops-of-god-300: #e9afb7;
  --color-drops-of-god-400: #cd8f98;
  --color-drops-of-god-500: #b3747e;
  --color-drops-of-god-600: #975c65;
  --color-drops-of-god-700: #7e4751;
  --color-drops-of-god-800: #683740;
  --color-drops-of-god-900: #5b2530;
  --color-drops-of-god-950: #38191f;
}

Similar palettes