Start generating

Hot Fudge to Lusty Lavender color palette

5F2300Hot Fudge005D6ADeep Lagoon98A815Augustus AsparagusF4EAFFPerfume HazeF2A594Creamy Peach845AB9Lusty Lavender
Open in generator Export PNG, PDF, ASE…

About this palette

Hot Fudge to Lusty Lavender is a 6-color palette: #5F2300 (Hot Fudge), #005D6A (Deep Lagoon), #98A815 (Augustus Asparagus), #F4EAFF (Perfume Haze), #F2A594 (Creamy Peach), #845AB9 (Lusty Lavender). It mixes brown, turquoise, green, white, pink, purple tones and feels cool overall. The strongest text pairing is #5F2300 on #F4EAFF with a contrast ratio of 10.46:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Hot Fudgergb(95, 35, 0)hsl(22, 100%, 19%)
Deep Lagoonrgb(0, 93, 106)hsl(187, 100%, 21%)
Augustus Asparagusrgb(152, 168, 21)hsl(67, 78%, 37%)
Perfume Hazergb(244, 234, 255)hsl(269, 100%, 96%)
Creamy Peachrgb(242, 165, 148)hsl(11, 78%, 76%)
Lusty Lavenderrgb(132, 90, 185)hsl(267, 40%, 54%)

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.46:1 Very good#5F2300 on #F4EAFF
  • Aa10.46:1 Very good#F4EAFF on #5F2300
  • Aa6.51:1 Good#005D6A on #F4EAFF
  • Aa6.51:1 Good#F4EAFF on #005D6A
  • Aa6.13:1 Good#5F2300 on #F2A594
  • Aa6.13:1 Good#F2A594 on #5F2300
  • Aa4.60:1 Good#5F2300 on #98A815
  • Aa4.60:1 Good#98A815 on #5F2300

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Hot Fudge to Lusty Lavender — https://swatchly.xyz/palette/5f2300-005d6a-98a815-f4eaff-f2a594-845ab9 */
:root {
  --hot-fudge: #5f2300;
  --deep-lagoon: #005d6a;
  --augustus-asparagus: #98a815;
  --perfume-haze: #f4eaff;
  --creamy-peach: #f2a594;
  --lusty-lavender: #845ab9;
}

Tailwind CSS v4

/* Hot Fudge to Lusty Lavender — https://swatchly.xyz/palette/5f2300-005d6a-98a815-f4eaff-f2a594-845ab9 */
@theme {
  --color-hot-fudge: #5f2300;
  --color-hot-fudge-50: #fff2ec;
  --color-hot-fudge-100: #ffe5da;
  --color-hot-fudge-200: #ffcab3;
  --color-hot-fudge-300: #efb094;
  --color-hot-fudge-400: #d49071;
  --color-hot-fudge-500: #b97556;
  --color-hot-fudge-600: #9d5b3d;
  --color-hot-fudge-700: #82472b;
  --color-hot-fudge-800: #6b361d;
  --color-hot-fudge-900: #5f2300;
  --color-hot-fudge-950: #3a1808;
  --color-deep-lagoon: #005d6a;
  --color-deep-lagoon-50: #e3faff;
  --color-deep-lagoon-100: #c8f4fd;
  --color-deep-lagoon-200: #ace2ec;
  --color-deep-lagoon-300: #8eccd8;
  --color-deep-lagoon-400: #66acba;
  --color-deep-lagoon-500: #46909e;
  --color-deep-lagoon-600: #2a7582;
  --color-deep-lagoon-700: #005d6a;
  --color-deep-lagoon-800: #034853;
  --color-deep-lagoon-900: #003841;
  --color-deep-lagoon-950: #002329;
  --color-augustus-asparagus: #98a815;
  --color-augustus-asparagus-50: #effcb9;
  --color-augustus-asparagus-100: #e4f2a6;
  --color-augustus-asparagus-200: #cfde83;
  --color-augustus-asparagus-300: #b8c85c;
  --color-augustus-asparagus-400: #98a815;
  --color-augustus-asparagus-500: #7e8c00;
  --color-augustus-asparagus-600: #657100;
  --color-augustus-asparagus-700: #505a00;
  --color-augustus-asparagus-800: #3f4600;
  --color-augustus-asparagus-900: #303600;
  --color-augustus-asparagus-950: #1e2200;
  --color-perfume-haze: #f4eaff;
  --color-perfume-haze-50: #faf6ff;
  --color-perfume-haze-100: #f4eaff;
  --color-perfume-haze-200: #ded7e6;
  --color-perfume-haze-300: #c7bfd0;
  --color-perfume-haze-400: #a89fb2;
  --color-perfume-haze-500: #8c8396;
  --color-perfume-haze-600: #71687a;
  --color-perfume-haze-700: #595162;
  --color-perfume-haze-800: #463f4d;
  --color-perfume-haze-900: #36303c;
  --color-perfume-haze-950: #211d26;
  --color-creamy-peach: #f2a594;
  --color-creamy-peach-50: #ffeeea;
  --color-creamy-peach-100: #ffdfd8;
  --color-creamy-peach-200: #ffc2b4;
  --color-creamy-peach-300: #f2a594;
  --color-creamy-peach-400: #d08878;
  --color-creamy-peach-500: #b46d5d;
  --color-creamy-peach-600: #975446;
  --color-creamy-peach-700: #7d4033;
  --color-creamy-peach-800: #653025;
  --color-creamy-peach-900: #51231a;
  --color-creamy-peach-950: #35140d;
  --color-lusty-lavender: #845ab9;
  --color-lusty-lavender-50: #f7f3ff;
  --color-lusty-lavender-100: #f0e8ff;
  --color-lusty-lavender-200: #e2d1ff;
  --color-lusty-lavender-300: #d2b4ff;
  --color-lusty-lavender-400: #b790ef;
  --color-lusty-lavender-500: #9e74d5;
  --color-lusty-lavender-600: #845ab9;
  --color-lusty-lavender-700: #6b439a;
  --color-lusty-lavender-800: #55317e;
  --color-lusty-lavender-900: #422365;
  --color-lusty-lavender-950: #2a1343;
}

Similar palettes