Melon to Roastery Color Palette

About this palette

Melon to Roastery is a 5-color cool palette: #FF7C58 (Melon), #002516 (Nightmare), #6A5BFB (Candy Grape Fizz), #D5DEFF (Icy Plains), #6B2500 (Roastery). It mixes red, green, purple, blue, brown tones and feels cool overall. The strongest text pairing is #002516 on #D5DEFF with a contrast ratio of 12.32:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melon	rgb(255, 124, 88)	hsl(13, 100%, 67%)
Nightmare	rgb(0, 37, 22)	hsl(156, 100%, 7%)
Candy Grape Fizz	rgb(106, 91, 251)	hsl(246, 95%, 67%)
Icy Plains	rgb(213, 222, 255)	hsl(227, 100%, 92%)
Roastery	rgb(107, 37, 0)	hsl(21, 100%, 21%)

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.

Aa12.32:1 Super#002516 on #D5DEFF
Aa12.32:1 Super#D5DEFF on #002516
Aa8.32:1 Very good#D5DEFF on #6B2500
Aa8.32:1 Very good#6B2500 on #D5DEFF
Aa6.48:1 Good#FF7C58 on #002516
Aa6.48:1 Good#002516 on #FF7C58
Aa4.38:1 Poor#FF7C58 on #6B2500
Aa4.38:1 Poor#6B2500 on #FF7C58

Color blindness preview

CSS variables

/* Melon to Roastery — https://swatchly.xyz/palette/ff7c58-002516-6a5bfb-d5deff-6b2500 */
:root {
  --melon: #ff7c58;
  --nightmare: #002516;
  --candy-grape-fizz: #6a5bfb;
  --icy-plains: #d5deff;
  --roastery: #6b2500;
}

Tailwind CSS v4

/* Melon to Roastery — https://swatchly.xyz/palette/ff7c58-002516-6a5bfb-d5deff-6b2500 */
@theme {
  --color-melon: #ff7c58;
  --color-melon-50: #fff5f2;
  --color-melon-100: #ffe9e3;
  --color-melon-200: #ffd0c3;
  --color-melon-300: #ffb09a;
  --color-melon-400: #ff7c58;
  --color-melon-500: #dd5e3b;
  --color-melon-600: #bc411c;
  --color-melon-700: #9c2900;
  --color-melon-800: #7b1e00;
  --color-melon-900: #601500;
  --color-melon-950: #3e0a00;
  --color-nightmare: #002516;
  --color-nightmare-50: #e5fbef;
  --color-nightmare-100: #d9f2e5;
  --color-nightmare-200: #c2e0d0;
  --color-nightmare-300: #a9cab8;
  --color-nightmare-400: #87ac98;
  --color-nightmare-500: #6a907c;
  --color-nightmare-600: #507562;
  --color-nightmare-700: #3c5d4c;
  --color-nightmare-800: #2c483a;
  --color-nightmare-900: #1f382c;
  --color-nightmare-950: #002516;
  --color-candy-grape-fizz: #6a5bfb;
  --color-candy-grape-fizz-50: #f0f2ff;
  --color-candy-grape-fizz-100: #e2e5ff;
  --color-candy-grape-fizz-200: #c8ccff;
  --color-candy-grape-fizz-300: #abb0ff;
  --color-candy-grape-fizz-400: #8686ff;
  --color-candy-grape-fizz-500: #6a5bfb;
  --color-candy-grape-fizz-600: #5541d9;
  --color-candy-grape-fizz-700: #442cb8;
  --color-candy-grape-fizz-800: #351c99;
  --color-candy-grape-fizz-900: #29127d;
  --color-candy-grape-fizz-950: #190756;
  --color-icy-plains: #d5deff;
  --color-icy-plains-50: #f9faff;
  --color-icy-plains-100: #edf1ff;
  --color-icy-plains-200: #d5deff;
  --color-icy-plains-300: #bfc6e1;
  --color-icy-plains-400: #9da5c3;
  --color-icy-plains-500: #8088a6;
  --color-icy-plains-600: #656d89;
  --color-icy-plains-700: #4e556f;
  --color-icy-plains-800: #3b4157;
  --color-icy-plains-900: #2d3245;
  --color-icy-plains-950: #1b1e2c;
  --color-roastery: #6b2500;
  --color-roastery-50: #fff2ed;
  --color-roastery-100: #ffe5db;
  --color-roastery-200: #ffcab5;
  --color-roastery-300: #f4ad90;
  --color-roastery-400: #d78a6a;
  --color-roastery-500: #ba6d4d;
  --color-roastery-600: #9b5234;
  --color-roastery-700: #7e3d21;
  --color-roastery-800: #6b2500;
  --color-roastery-900: #4f200a;
  --color-roastery-950: #331104;
}