Start generating

Drops of God to Friendly Frost color palette

5A2233Drops of God2B58ACBlasphemous BlueC45075Fat SmoochD88600Fleur de Sel CaramelEDB668Harvest GoldBFFBFBFriendly Frost
Open in generator Export PNG, PDF, ASE…

About this palette

Drops of God to Friendly Frost is a 6-color warm palette: #5A2233 (Drops of God), #2B58AC (Blasphemous Blue), #C45075 (Fat Smooch), #D88600 (Fleur de Sel Caramel), #EDB668 (Harvest Gold), #BFFBFB (Friendly Frost). It mixes red, blue, orange, turquoise tones and feels warm overall. The strongest text pairing is #5A2233 on #BFFBFB with a contrast ratio of 10.76:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Drops of Godrgb(90, 34, 51)hsl(342, 45%, 24%)
Blasphemous Bluergb(43, 88, 172)hsl(219, 60%, 42%)
Fat Smoochrgb(196, 80, 117)hsl(341, 50%, 54%)
Fleur de Sel Caramelrgb(216, 134, 0)hsl(37, 100%, 42%)
Harvest Goldrgb(237, 182, 104)hsl(35, 79%, 67%)
Friendly Frostrgb(191, 251, 251)hsl(180, 88%, 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.

  • Aa10.76:1 Very good#5A2233 on #BFFBFB
  • Aa10.76:1 Very good#BFFBFB on #5A2233
  • Aa6.72:1 Good#5A2233 on #EDB668
  • Aa6.72:1 Good#EDB668 on #5A2233
  • Aa5.95:1 Good#2B58AC on #BFFBFB
  • Aa5.95:1 Good#BFFBFB on #2B58AC
  • Aa4.28:1 Poor#5A2233 on #D88600
  • Aa4.28:1 Poor#D88600 on #5A2233

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Drops of God to Friendly Frost — https://swatchly.xyz/palette/5a2233-2b58ac-c45075-d88600-edb668-bffbfb */
:root {
  --drops-of-god: #5a2233;
  --blasphemous-blue: #2b58ac;
  --fat-smooch: #c45075;
  --fleur-de-sel-caramel: #d88600;
  --harvest-gold: #edb668;
  --friendly-frost: #bffbfb;
}

Tailwind CSS v4

/* Drops of God to Friendly Frost — https://swatchly.xyz/palette/5a2233-2b58ac-c45075-d88600-edb668-bffbfb */
@theme {
  --color-drops-of-god: #5a2233;
  --color-drops-of-god-50: #fff1f4;
  --color-drops-of-god-100: #ffe3e9;
  --color-drops-of-god-200: #fcc7d3;
  --color-drops-of-god-300: #eaaebc;
  --color-drops-of-god-400: #ce8d9d;
  --color-drops-of-god-500: #b37282;
  --color-drops-of-god-600: #975969;
  --color-drops-of-god-700: #7d4554;
  --color-drops-of-god-800: #673542;
  --color-drops-of-god-900: #5a2233;
  --color-drops-of-god-950: #371820;
  --color-blasphemous-blue: #2b58ac;
  --color-blasphemous-blue-50: #f0f5ff;
  --color-blasphemous-blue-100: #e1ecff;
  --color-blasphemous-blue-200: #c5daff;
  --color-blasphemous-blue-300: #a3c5ff;
  --color-blasphemous-blue-400: #75a4fb;
  --color-blasphemous-blue-500: #5989e1;
  --color-blasphemous-blue-600: #416fc4;
  --color-blasphemous-blue-700: #2b58ac;
  --color-blasphemous-blue-800: #1f448a;
  --color-blasphemous-blue-900: #13336f;
  --color-blasphemous-blue-950: #081f4b;
  --color-fat-smooch: #c45075;
  --color-fat-smooch-50: #ffeff2;
  --color-fat-smooch-100: #ffdee6;
  --color-fat-smooch-200: #ffbfce;
  --color-fat-smooch-300: #ff97b3;
  --color-fat-smooch-400: #e36f91;
  --color-fat-smooch-500: #c45075;
  --color-fat-smooch-600: #a5375d;
  --color-fat-smooch-700: #892449;
  --color-fat-smooch-800: #6f1738;
  --color-fat-smooch-900: #590d2b;
  --color-fat-smooch-950: #3c051a;
  --color-fleur-de-sel-caramel: #d88600;
  --color-fleur-de-sel-caramel-50: #fff0e1;
  --color-fleur-de-sel-caramel-100: #ffe2c5;
  --color-fleur-de-sel-caramel-200: #ffc78c;
  --color-fleur-de-sel-caramel-300: #f4aa55;
  --color-fleur-de-sel-caramel-400: #d88600;
  --color-fleur-de-sel-caramel-500: #b46f00;
  --color-fleur-de-sel-caramel-600: #925900;
  --color-fleur-de-sel-caramel-700: #754600;
  --color-fleur-de-sel-caramel-800: #5d3700;
  --color-fleur-de-sel-caramel-900: #492a00;
  --color-fleur-de-sel-caramel-950: #301900;
  --color-harvest-gold: #edb668;
  --color-harvest-gold-50: #fff3e4;
  --color-harvest-gold-100: #ffe7c8;
  --color-harvest-gold-200: #f9d099;
  --color-harvest-gold-300: #edb668;
  --color-harvest-gold-400: #ca974d;
  --color-harvest-gold-500: #af7b29;
  --color-harvest-gold-600: #916000;
  --color-harvest-gold-700: #744c00;
  --color-harvest-gold-800: #5b3b00;
  --color-harvest-gold-900: #472d00;
  --color-harvest-gold-950: #2d1b00;
  --color-friendly-frost: #bffbfb;
  --color-friendly-frost-50: #e0fffe;
  --color-friendly-frost-100: #bffbfb;
  --color-friendly-frost-200: #b9e3e3;
  --color-friendly-frost-300: #9ccdcd;
  --color-friendly-frost-400: #77aeae;
  --color-friendly-frost-500: #599293;
  --color-friendly-frost-600: #3f7777;
  --color-friendly-frost-700: #2b5f5f;
  --color-friendly-frost-800: #1c4b4b;
  --color-friendly-frost-900: #113a3a;
  --color-friendly-frost-950: #072425;
}

Similar palettes