Burnt Red to Illicit Purple Color Palette

About this palette

Burnt Red to Illicit Purple is a 4-color cool palette: #982703 (Burnt Red), #B8DC78 (Cool as a Cucumber), #002B37 (Black Box), #BB7BF0 (Illicit Purple). It mixes red, green, blue, purple tones and feels cool overall. The strongest text pairing is #B8DC78 on #002B37 with a contrast ratio of 9.67:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burnt Red	rgb(152, 39, 3)	hsl(14, 96%, 30%)
Cool as a Cucumber	rgb(184, 220, 120)	hsl(82, 59%, 67%)
Black Box	rgb(0, 43, 55)	hsl(193, 100%, 11%)
Illicit Purple	rgb(187, 123, 240)	hsl(273, 80%, 71%)

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.

Aa9.67:1 Very good#B8DC78 on #002B37
Aa9.67:1 Very good#002B37 on #B8DC78
Aa5.16:1 Good#982703 on #B8DC78
Aa5.16:1 Good#B8DC78 on #982703
Aa5.14:1 Good#002B37 on #BB7BF0
Aa5.14:1 Good#BB7BF0 on #002B37

Color blindness preview

CSS variables

/* Burnt Red to Illicit Purple — https://swatchly.xyz/palette/982703-b8dc78-002b37-bb7bf0 */
:root {
  --burnt-red: #982703;
  --cool-as-a-cucumber: #b8dc78;
  --black-box: #002b37;
  --illicit-purple: #bb7bf0;
}

Tailwind CSS v4

/* Burnt Red to Illicit Purple — https://swatchly.xyz/palette/982703-b8dc78-002b37-bb7bf0 */
@theme {
  --color-burnt-red: #982703;
  --color-burnt-red-50: #fff2ee;
  --color-burnt-red-100: #ffe4dd;
  --color-burnt-red-200: #ffc9bb;
  --color-burnt-red-300: #ffa790;
  --color-burnt-red-400: #ef7c5f;
  --color-burnt-red-500: #d25e40;
  --color-burnt-red-600: #b24226;
  --color-burnt-red-700: #982703;
  --color-burnt-red-800: #781d02;
  --color-burnt-red-900: #5f1300;
  --color-burnt-red-950: #3e0900;
  --color-cool-as-a-cucumber: #b8dc78;
  --color-cool-as-a-cucumber-50: #e1f8bd;
  --color-cool-as-a-cucumber-100: #d4edab;
  --color-cool-as-a-cucumber-200: #b8dc78;
  --color-cool-as-a-cucumber-300: #a6c66f;
  --color-cool-as-a-cucumber-400: #88a848;
  --color-cool-as-a-cucumber-500: #6e8e27;
  --color-cool-as-a-cucumber-600: #577501;
  --color-cool-as-a-cucumber-700: #455e00;
  --color-cool-as-a-cucumber-800: #364b00;
  --color-cool-as-a-cucumber-900: #293900;
  --color-cool-as-a-cucumber-950: #182400;
  --color-black-box: #002b37;
  --color-black-box-50: #e7f9ff;
  --color-black-box-100: #d6f0fa;
  --color-black-box-200: #bedee9;
  --color-black-box-300: #a4c8d5;
  --color-black-box-400: #81a9b7;
  --color-black-box-500: #668f9d;
  --color-black-box-600: #4e7583;
  --color-black-box-700: #3b5f6c;
  --color-black-box-800: #2c4d58;
  --color-black-box-900: #213d47;
  --color-black-box-950: #002b37;
  --color-illicit-purple: #bb7bf0;
  --color-illicit-purple-50: #f7f0ff;
  --color-illicit-purple-100: #f0e2ff;
  --color-illicit-purple-200: #e3c7ff;
  --color-illicit-purple-300: #d4a5ff;
  --color-illicit-purple-400: #bb7bf0;
  --color-illicit-purple-500: #9f60d2;
  --color-illicit-purple-600: #8446b4;
  --color-illicit-purple-700: #6c3196;
  --color-illicit-purple-800: #56227b;
  --color-illicit-purple-900: #441763;
  --color-illicit-purple-950: #2c0b43;
}