Fire Ant to Purple Rain Color Palette

About this palette

Fire Ant to Purple Rain is a 5-color cool palette: #C45F0E (Fire Ant), #FF9955 (Pastel Orange), #425100 (Godzilla), #AADAFF (Droplet), #7D4ACA (Purple Rain). It mixes orange, green, blue, purple tones and feels cool overall. The strongest text pairing is #425100 on #AADAFF with a contrast ratio of 5.89:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fire Ant	rgb(196, 95, 14)	hsl(27, 87%, 41%)
Pastel Orange	rgb(255, 153, 85)	hsl(24, 100%, 67%)
Godzilla	rgb(66, 81, 0)	hsl(71, 100%, 16%)
Droplet	rgb(170, 218, 255)	hsl(206, 100%, 83%)
Purple Rain	rgb(125, 74, 202)	hsl(264, 55%, 54%)

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.

Aa5.89:1 Good#425100 on #AADAFF
Aa5.89:1 Good#AADAFF on #425100
Aa4.13:1 Poor#FF9955 on #425100
Aa4.13:1 Poor#425100 on #FF9955
Aa3.83:1 Poor#AADAFF on #7D4ACA
Aa3.83:1 Poor#7D4ACA on #AADAFF

Color blindness preview

CSS variables

/* Fire Ant to Purple Rain — https://swatchly.xyz/palette/c45f0e-ff9955-425100-aadaff-7d4aca */
:root {
  --fire-ant: #c45f0e;
  --pastel-orange: #ff9955;
  --godzilla: #425100;
  --droplet: #aadaff;
  --purple-rain: #7d4aca;
}

Tailwind CSS v4

/* Fire Ant to Purple Rain — https://swatchly.xyz/palette/c45f0e-ff9955-425100-aadaff-7d4aca */
@theme {
  --color-fire-ant: #c45f0e;
  --color-fire-ant-50: #fff1e9;
  --color-fire-ant-100: #ffe2d2;
  --color-fire-ant-200: #ffc6a5;
  --color-fire-ant-300: #ffa26b;
  --color-fire-ant-400: #e27d3c;
  --color-fire-ant-500: #c45f0e;
  --color-fire-ant-600: #a04a00;
  --color-fire-ant-700: #813a00;
  --color-fire-ant-800: #662d00;
  --color-fire-ant-900: #502200;
  --color-fire-ant-950: #351300;
  --color-pastel-orange: #ff9955;
  --color-pastel-orange-50: #ffebe0;
  --color-pastel-orange-100: #ffdcc7;
  --color-pastel-orange-200: #ffbe97;
  --color-pastel-orange-300: #ff9955;
  --color-pastel-orange-400: #dd7c38;
  --color-pastel-orange-500: #c2610f;
  --color-pastel-orange-600: #9f4d00;
  --color-pastel-orange-700: #803c00;
  --color-pastel-orange-800: #672f00;
  --color-pastel-orange-900: #522400;
  --color-pastel-orange-950: #351500;
  --color-godzilla: #425100;
  --color-godzilla-50: #effbd3;
  --color-godzilla-100: #e5f2c5;
  --color-godzilla-200: #d0dfaa;
  --color-godzilla-300: #bacb8f;
  --color-godzilla-400: #9bae6a;
  --color-godzilla-500: #81934d;
  --color-godzilla-600: #697a34;
  --color-godzilla-700: #546321;
  --color-godzilla-800: #425100;
  --color-godzilla-900: #333e07;
  --color-godzilla-950: #1f2801;
  --color-droplet: #aadaff;
  --color-droplet-50: #e7f4ff;
  --color-droplet-100: #d3ebff;
  --color-droplet-200: #aadaff;
  --color-droplet-300: #9bc3e3;
  --color-droplet-400: #78a5c7;
  --color-droplet-500: #5c8aac;
  --color-droplet-600: #447090;
  --color-droplet-700: #315976;
  --color-droplet-800: #224660;
  --color-droplet-900: #17364c;
  --color-droplet-950: #0b2131;
  --color-purple-rain: #7d4aca;
  --color-purple-rain-50: #f6f3ff;
  --color-purple-rain-100: #eee7ff;
  --color-purple-rain-200: #ddcfff;
  --color-purple-rain-300: #cab2ff;
  --color-purple-rain-400: #b187ff;
  --color-purple-rain-500: #9766e8;
  --color-purple-rain-600: #7d4aca;
  --color-purple-rain-700: #6535a9;
  --color-purple-rain-800: #50248b;
  --color-purple-rain-900: #3f1770;
  --color-purple-rain-950: #280b4b;
}