Fresh Gum to Nightmare Color Palette

About this palette

Fresh Gum to Nightmare is a 5-color cool, vintage palette: #F8B1DF (Fresh Gum), #B483B0 (Romanov Mauve), #008D4E (Moss), #5C3455 (Long Passionate Night), #021F0D (Nightmare). It mixes pink, green, purple tones and feels cool overall. The strongest text pairing is #F8B1DF on #021F0D with a contrast ratio of 10.25:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fresh Gum	rgb(248, 177, 223)	hsl(321, 84%, 83%)
Romanov Mauve	rgb(180, 131, 176)	hsl(305, 25%, 61%)
Moss	rgb(0, 141, 78)	hsl(153, 100%, 28%)
Long Passionate Night	rgb(92, 52, 85)	hsl(310, 28%, 28%)
Nightmare	rgb(2, 31, 13)	hsl(143, 88%, 6%)

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.25:1 Very good#F8B1DF on #021F0D
Aa10.25:1 Very good#021F0D on #F8B1DF
Aa5.94:1 Good#F8B1DF on #5C3455
Aa5.94:1 Good#5C3455 on #F8B1DF
Aa5.66:1 Good#B483B0 on #021F0D
Aa5.66:1 Good#021F0D on #B483B0
Aa4.09:1 Poor#008D4E on #021F0D
Aa4.09:1 Poor#021F0D on #008D4E

Color blindness preview

CSS variables

/* Fresh Gum to Nightmare — https://swatchly.xyz/palette/f8b1df-b483b0-008d4e-5c3455-021f0d */
:root {
  --fresh-gum: #f8b1df;
  --romanov-mauve: #b483b0;
  --moss: #008d4e;
  --long-passionate-night: #5c3455;
  --nightmare: #021f0d;
}

Tailwind CSS v4

/* Fresh Gum to Nightmare — https://swatchly.xyz/palette/f8b1df-b483b0-008d4e-5c3455-021f0d */
@theme {
  --color-fresh-gum: #f8b1df;
  --color-fresh-gum-50: #fff8fc;
  --color-fresh-gum-100: #ffebf7;
  --color-fresh-gum-200: #ffcfed;
  --color-fresh-gum-300: #f8b1df;
  --color-fresh-gum-400: #d292bc;
  --color-fresh-gum-500: #b5739f;
  --color-fresh-gum-600: #975882;
  --color-fresh-gum-700: #7a4168;
  --color-fresh-gum-800: #613052;
  --color-fresh-gum-900: #4b223e;
  --color-fresh-gum-950: #311328;
  --color-romanov-mauve: #b483b0;
  --color-romanov-mauve-50: #ffe9fd;
  --color-romanov-mauve-100: #fbd8f8;
  --color-romanov-mauve-200: #e9c0e5;
  --color-romanov-mauve-300: #d3a6cf;
  --color-romanov-mauve-400: #b483b0;
  --color-romanov-mauve-500: #9a6a96;
  --color-romanov-mauve-600: #7f537c;
  --color-romanov-mauve-700: #684065;
  --color-romanov-mauve-800: #533151;
  --color-romanov-mauve-900: #432541;
  --color-romanov-mauve-950: #2c162a;
  --color-moss: #008d4e;
  --color-moss-50: #deffe7;
  --color-moss-100: #c0ffd4;
  --color-moss-200: #a5f0bd;
  --color-moss-300: #86dda4;
  --color-moss-400: #5bc182;
  --color-moss-500: #35a767;
  --color-moss-600: #008d4e;
  --color-moss-700: #00703d;
  --color-moss-800: #00582e;
  --color-moss-900: #004322;
  --color-moss-950: #002a13;
  --color-long-passionate-night: #5c3455;
  --color-long-passionate-night-50: #fff0fb;
  --color-long-passionate-night-100: #ffe0f8;
  --color-long-passionate-night-200: #efcae7;
  --color-long-passionate-night-300: #dcb2d3;
  --color-long-passionate-night-400: #be92b5;
  --color-long-passionate-night-500: #a3769a;
  --color-long-passionate-night-600: #875d7f;
  --color-long-passionate-night-700: #6f4867;
  --color-long-passionate-night-800: #5c3455;
  --color-long-passionate-night-900: #462940;
  --color-long-passionate-night-950: #2d1829;
  --color-nightmare: #021f0d;
  --color-nightmare-50: #e8fbed;
  --color-nightmare-100: #dcf2e2;
  --color-nightmare-200: #c6dfcc;
  --color-nightmare-300: #adc9b4;
  --color-nightmare-400: #8bab94;
  --color-nightmare-500: #6e8e77;
  --color-nightmare-600: #53725c;
  --color-nightmare-700: #3e5945;
  --color-nightmare-800: #2c4433;
  --color-nightmare-900: #1f3225;
  --color-nightmare-950: #021f0d;
}