Burned to Gossip Color Palette

About this palette

Burned to Gossip is a 4-color cool palette: #531302 (Burned), #7F3195 (Perkin Mauve), #0098BB (Blue Ocean), #A8D07C (Gossip). It mixes brown, purple, blue, green tones and feels cool overall. The strongest text pairing is #531302 on #A8D07C with a contrast ratio of 8.19:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burned	rgb(83, 19, 2)	hsl(13, 95%, 17%)
Perkin Mauve	rgb(127, 49, 149)	hsl(287, 51%, 39%)
Blue Ocean	rgb(0, 152, 187)	hsl(191, 100%, 37%)
Gossip	rgb(168, 208, 124)	hsl(89, 47%, 65%)

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.

Aa8.19:1 Very good#531302 on #A8D07C
Aa8.19:1 Very good#A8D07C on #531302
Aa4.32:1 Poor#7F3195 on #A8D07C
Aa4.32:1 Poor#A8D07C on #7F3195
Aa4.25:1 Poor#531302 on #0098BB
Aa4.25:1 Poor#0098BB on #531302

Color blindness preview

CSS variables

/* Burned to Gossip — https://swatchly.xyz/palette/531302-7f3195-0098bb-a8d07c */
:root {
  --burned: #531302;
  --perkin-mauve: #7f3195;
  --blue-ocean: #0098bb;
  --gossip: #a8d07c;
}

Tailwind CSS v4

/* Burned to Gossip — https://swatchly.xyz/palette/531302-7f3195-0098bb-a8d07c */
@theme {
  --color-burned: #531302;
  --color-burned-50: #fff2ee;
  --color-burned-100: #ffe5dd;
  --color-burned-200: #ffc9ba;
  --color-burned-300: #f2ae9c;
  --color-burned-400: #d48b77;
  --color-burned-500: #b66e5a;
  --color-burned-600: #975340;
  --color-burned-700: #7a3d2d;
  --color-burned-800: #602c1e;
  --color-burned-900: #531302;
  --color-burned-950: #2e1009;
  --color-perkin-mauve: #7f3195;
  --color-perkin-mauve-50: #fcf1ff;
  --color-perkin-mauve-100: #f8e2ff;
  --color-perkin-mauve-200: #f2c6ff;
  --color-perkin-mauve-300: #e9a4fe;
  --color-perkin-mauve-400: #cd81e4;
  --color-perkin-mauve-500: #b264ca;
  --color-perkin-mauve-600: #974aad;
  --color-perkin-mauve-700: #7f3195;
  --color-perkin-mauve-800: #652477;
  --color-perkin-mauve-900: #4f175f;
  --color-perkin-mauve-950: #340b3f;
  --color-blue-ocean: #0098bb;
  --color-blue-ocean-50: #e9f9ff;
  --color-blue-ocean-100: #d1f3ff;
  --color-blue-ocean-200: #9de6ff;
  --color-blue-ocean-300: #75d2f0;
  --color-blue-ocean-400: #43b3d5;
  --color-blue-ocean-500: #0098bb;
  --color-blue-ocean-600: #007a97;
  --color-blue-ocean-700: #006178;
  --color-blue-ocean-800: #004c5f;
  --color-blue-ocean-900: #003a49;
  --color-blue-ocean-950: #00242f;
  --color-gossip: #a8d07c;
  --color-gossip-50: #e7fed0;
  --color-gossip-100: #dbf5c2;
  --color-gossip-200: #c5e3a6;
  --color-gossip-300: #a8d07c;
  --color-gossip-400: #8aaf60;
  --color-gossip-500: #6f9442;
  --color-gossip-600: #557827;
  --color-gossip-700: #416011;
  --color-gossip-800: #314c02;
  --color-gossip-900: #243b00;
  --color-gossip-950: #152500;
}