Golden Frame to Radical Red Color Palette

About this palette

Golden Frame to Radical Red is a 5-color vibrant, warm, neon palette: #E4B200 (Golden Frame), #00923B (Green Revolution), #908000 (Olive), #BF7CFF (Illicit Purple), #FF3558 (Radical Red). It mixes yellow, green, purple, red tones and feels warm overall. The strongest text pairing is #E4B200 on #00923B with a contrast ratio of 2.06:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Golden Frame	rgb(228, 178, 0)	hsl(47, 100%, 45%)
Green Revolution	rgb(0, 146, 59)	hsl(144, 100%, 29%)
Olive	rgb(144, 128, 0)	hsl(53, 100%, 28%)
Illicit Purple	rgb(191, 124, 255)	hsl(271, 100%, 74%)
Radical Red	rgb(255, 53, 88)	hsl(350, 100%, 60%)

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.

Color blindness preview

CSS variables

/* Golden Frame to Radical Red — https://swatchly.xyz/palette/e4b200-00923b-908000-bf7cff-ff3558 */
:root {
  --golden-frame: #e4b200;
  --green-revolution: #00923b;
  --olive: #908000;
  --illicit-purple: #bf7cff;
  --radical-red: #ff3558;
}

Tailwind CSS v4

/* Golden Frame to Radical Red — https://swatchly.xyz/palette/e4b200-00923b-908000-bf7cff-ff3558 */
@theme {
  --color-golden-frame: #e4b200;
  --color-golden-frame-50: #fff0cc;
  --color-golden-frame-100: #ffe3a0;
  --color-golden-frame-200: #f3cd6b;
  --color-golden-frame-300: #e4b200;
  --color-golden-frame-400: #c09500;
  --color-golden-frame-500: #a07c00;
  --color-golden-frame-600: #826400;
  --color-golden-frame-700: #684f00;
  --color-golden-frame-800: #523e00;
  --color-golden-frame-900: #413000;
  --color-golden-frame-950: #291d00;
  --color-green-revolution: #00923b;
  --color-green-revolution-50: #d7ffdc;
  --color-green-revolution-100: #b4fbbf;
  --color-green-revolution-200: #93e8a1;
  --color-green-revolution-300: #6ed181;
  --color-green-revolution-400: #3db05a;
  --color-green-revolution-500: #00923b;
  --color-green-revolution-600: #00762e;
  --color-green-revolution-700: #005e23;
  --color-green-revolution-800: #004a1a;
  --color-green-revolution-900: #003a13;
  --color-green-revolution-950: #002609;
  --color-olive: #908000;
  --color-olive-50: #fef6c0;
  --color-olive-100: #f4ebae;
  --color-olive-200: #e1d68c;
  --color-olive-300: #cbbe68;
  --color-olive-400: #ac9d38;
  --color-olive-500: #908000;
  --color-olive-600: #746700;
  --color-olive-700: #5c5200;
  --color-olive-800: #484000;
  --color-olive-900: #383100;
  --color-olive-950: #241f00;
  --color-illicit-purple: #bf7cff;
  --color-illicit-purple-50: #f8f2ff;
  --color-illicit-purple-100: #f1e6ff;
  --color-illicit-purple-200: #e3ccff;
  --color-illicit-purple-300: #d4acff;
  --color-illicit-purple-400: #bf7cff;
  --color-illicit-purple-500: #a360e0;
  --color-illicit-purple-600: #8744c0;
  --color-illicit-purple-700: #6e2ea1;
  --color-illicit-purple-800: #581e84;
  --color-illicit-purple-900: #45126a;
  --color-illicit-purple-950: #2c0747;
  --color-radical-red: #ff3558;
  --color-radical-red-50: #fff4f4;
  --color-radical-red-100: #ffe9e9;
  --color-radical-red-200: #ffd0d0;
  --color-radical-red-300: #ffb0b2;
  --color-radical-red-400: #ff7c84;
  --color-radical-red-500: #ff3558;
  --color-radical-red-600: #d8003f;
  --color-radical-red-700: #ad0030;
  --color-radical-red-800: #880024;
  --color-radical-red-900: #6a001a;
  --color-radical-red-950: #44000d;
}