Mahogany to Shivering Green color palette

C04400Mahogany DF004DCherry Velvet A49700Greedy Gecko 99B200Citrus 00C480Magical Malachite 00E785Shivering Green

Open in generator Export PNG, PDF, ASE…

About this palette

Mahogany to Shivering Green is a 6-color vibrant, neon palette: #C04400 (Mahogany), #DF004D (Cherry Velvet), #A49700 (Greedy Gecko), #99B200 (Citrus), #00C480 (Magical Malachite), #00E785 (Shivering Green). It mixes orange, red, yellow, green tones and feels balanced overall. The strongest text pairing is #C04400 on #00E785 with a contrast ratio of 3.14:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mahogany	rgb(192, 68, 0)	hsl(21, 100%, 38%)
Cherry Velvet	rgb(223, 0, 77)	hsl(339, 100%, 44%)
Greedy Gecko	rgb(164, 151, 0)	hsl(55, 100%, 32%)
Citrus	rgb(153, 178, 0)	hsl(68, 100%, 35%)
Magical Malachite	rgb(0, 196, 128)	hsl(159, 100%, 38%)
Shivering Green	rgb(0, 231, 133)	hsl(155, 100%, 45%)

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.

Aa3.14:1 Poor#C04400 on #00E785
Aa3.14:1 Poor#00E785 on #C04400
Aa3.01:1 Poor#DF004D on #00E785
Aa3.01:1 Poor#00E785 on #DF004D

Color blindness preview

CSS variables

/* Mahogany to Shivering Green — https://swatchly.xyz/palette/c04400-df004d-a49700-99b200-00c480-00e785 */
:root {
  --mahogany: #c04400;
  --cherry-velvet: #df004d;
  --greedy-gecko: #a49700;
  --citrus: #99b200;
  --magical-malachite: #00c480;
  --shivering-green: #00e785;
}

Tailwind CSS v4

/* Mahogany to Shivering Green — https://swatchly.xyz/palette/c04400-df004d-a49700-99b200-00c480-00e785 */
@theme {
  --color-mahogany: #c04400;
  --color-mahogany-50: #fff2ed;
  --color-mahogany-100: #ffe6de;
  --color-mahogany-200: #ffcdbb;
  --color-mahogany-300: #ffae90;
  --color-mahogany-400: #f97e50;
  --color-mahogany-500: #de602d;
  --color-mahogany-600: #c04400;
  --color-mahogany-700: #9a3500;
  --color-mahogany-800: #7a2800;
  --color-mahogany-900: #5f1d00;
  --color-mahogany-950: #3e1000;
  --color-cherry-velvet: #df004d;
  --color-cherry-velvet-50: #fff1f2;
  --color-cherry-velvet-100: #ffe7e8;
  --color-cherry-velvet-200: #ffced1;
  --color-cherry-velvet-300: #ffafb5;
  --color-cherry-velvet-400: #ff7b8b;
  --color-cherry-velvet-500: #fd3a65;
  --color-cherry-velvet-600: #df004d;
  --color-cherry-velvet-700: #b3003c;
  --color-cherry-velvet-800: #8d002e;
  --color-cherry-velvet-900: #6e0022;
  --color-cherry-velvet-950: #480013;
  --color-greedy-gecko: #a49700;
  --color-greedy-gecko-50: #faf4b4;
  --color-greedy-gecko-100: #efe89e;
  --color-greedy-gecko-200: #dbd279;
  --color-greedy-gecko-300: #c4b950;
  --color-greedy-gecko-400: #a49700;
  --color-greedy-gecko-500: #897e00;
  --color-greedy-gecko-600: #6f6500;
  --color-greedy-gecko-700: #585100;
  --color-greedy-gecko-800: #464000;
  --color-greedy-gecko-900: #373200;
  --color-greedy-gecko-950: #242000;
  --color-citrus: #99b200;
  --color-citrus-50: #efffbf;
  --color-citrus-100: #e4f7a8;
  --color-citrus-200: #d0e585;
  --color-citrus-300: #b9d05e;
  --color-citrus-400: #99b200;
  --color-citrus-500: #7f9400;
  --color-citrus-600: #667700;
  --color-citrus-700: #505e00;
  --color-citrus-800: #3e4900;
  --color-citrus-900: #2f3800;
  --color-citrus-950: #1c2300;
  --color-magical-malachite: #00c480;
  --color-magical-malachite-50: #e2ffee;
  --color-magical-malachite-100: #beffda;
  --color-magical-malachite-200: #90f3bf;
  --color-magical-malachite-300: #68e0a5;
  --color-magical-malachite-400: #00c480;
  --color-magical-malachite-500: #00a36a;
  --color-magical-malachite-600: #008354;
  --color-magical-malachite-700: #006842;
  --color-magical-malachite-800: #005132;
  --color-magical-malachite-900: #003e26;
  --color-magical-malachite-950: #002716;
  --color-shivering-green: #00e785;
  --color-shivering-green-50: #e1ffea;
  --color-shivering-green-100: #bcffd2;
  --color-shivering-green-200: #80f6ad;
  --color-shivering-green-300: #00e785;
  --color-shivering-green-400: #00c26f;
  --color-shivering-green-500: #00a15b;
  --color-shivering-green-600: #008248;
  --color-shivering-green-700: #006738;
  --color-shivering-green-800: #00512b;
  --color-shivering-green-900: #003e20;
  --color-shivering-green-950: #002712;
}