Fill
Set the fill color for SVG elements.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
f-red-1fill: #fbdfe1;f-red-2fill: #f8c4c8;f-red-3fill: #f4a8ae;f-red-4fill: #f18c94;f-red-5fill: #ed707a;f-red-6fill: #ea5560;f-redfill: #e63946;f-red-7fill: #c6313c;f-red-8fill: #a62932;f-red-9fill: #852129;f-red-10fill: #65191f;f-red-11fill: #451115;f-red-12fill: #25090b;f-orange-1fill: #ffe7df;f-orange-2fill: #ffd3c2;f-orange-3fill: #ffbea6;f-orange-4fill: #ffa98a;f-orange-5fill: #ff946e;f-orange-6fill: #ff8051;f-orangefill: #ff6b35;f-orange-7fill: #db5c2e;f-orange-8fill: #b84d26;f-orange-9fill: #943e1f;f-orange-10fill: #702f17;f-orange-11fill: #4d2010;f-orange-12fill: #291108;f-yellow-1fill: #fff4db;f-yellow-2fill: #ffeabb;f-yellow-3fill: #ffe09b;f-yellow-4fill: #ffd67b;f-yellow-5fill: #ffcc5c;f-yellow-6fill: #ffc23c;f-yellowfill: #ffb81c;f-yellow-7fill: #db9e18;f-yellow-8fill: #b88414;f-yellow-9fill: #946b10;f-yellow-10fill: #70510c;f-yellow-11fill: #4d3708;f-yellow-12fill: #291d04;f-lime-1fill: #ebf7da;f-lime-2fill: #daf0b9;f-lime-3fill: #c9e998;f-lime-4fill: #b8e178;f-lime-5fill: #a6da57;f-lime-6fill: #95d337;f-limefill: #84cc16;f-lime-7fill: #72af13;f-lime-8fill: #5f9310;f-lime-9fill: #4d760d;f-lime-10fill: #3a5a0a;f-lime-11fill: #283d07;f-lime-12fill: #152104;f-mint-1fill: #d9f4eb;f-mint-2fill: #b7ead9;f-mint-3fill: #96e0c8;f-mint-4fill: #74d6b6;f-mint-5fill: #53cda4;f-mint-6fill: #31c393;f-mintfill: #10b981;f-mint-7fill: #0e9f6f;f-mint-8fill: #0c855d;f-mint-9fill: #096b4b;f-mint-10fill: #075139;f-mint-11fill: #053827;f-mint-12fill: #031e15;f-green-1fill: #d7f8f0;f-green-2fill: #b4f3e3;f-green-3fill: #91edd5;f-green-4fill: #6fe7c8;f-green-5fill: #4ce1bb;f-green-6fill: #29dcad;f-greenfill: #06d6a0;f-green-7fill: #05b88a;f-green-8fill: #049a73;f-green-9fill: #037c5d;f-green-10fill: #035e46;f-green-11fill: #024030;f-green-12fill: #01221a;f-cyan-1fill: #d7f3f8;f-cyan-2fill: #b4e9f2;f-cyan-3fill: #91dfec;f-cyan-4fill: #6fd5e6;f-cyan-5fill: #4ccae0;f-cyan-6fill: #29c0da;f-cyanfill: #06b6d4;f-cyan-7fill: #059db6;f-cyan-8fill: #048399;f-cyan-9fill: #036a7b;f-cyan-10fill: #03505d;f-cyan-11fill: #023740;f-cyan-12fill: #011d22;f-sky-1fill: #dff4fe;f-sky-2fill: #c3ebfd;f-sky-3fill: #a7e2fc;f-sky-4fill: #8cd9fb;f-sky-5fill: #70cffa;f-sky-6fill: #54c6f9;f-skyfill: #38bdf8;f-sky-7fill: #30a3d5;f-sky-8fill: #2888b3;f-sky-9fill: #206e90;f-sky-10fill: #19536d;f-sky-11fill: #11394a;f-sky-12fill: #091e28;f-blue-1fill: #dce6fc;f-blue-2fill: #bed0f9;f-blue-3fill: #9fbaf6;f-blue-4fill: #81a5f3;f-blue-5fill: #628ff1;f-blue-6fill: #4479ee;f-bluefill: #2563eb;f-blue-7fill: #2055ca;f-blue-8fill: #1b47a9;f-blue-9fill: #153988;f-blue-10fill: #102c67;f-blue-11fill: #0b1e47;f-blue-12fill: #061026;f-indigo-1fill: #e6e7fd;f-indigo-2fill: #d0d1fb;f-indigo-3fill: #babcf9;f-indigo-4fill: #a5a6f7;f-indigo-5fill: #8f91f5;f-indigo-6fill: #797bf3;f-indigofill: #6366f1;f-indigo-7fill: #5558cf;f-indigo-8fill: #4749ae;f-indigo-9fill: #393b8c;f-indigo-10fill: #2c2d6a;f-indigo-11fill: #1e1f48;f-indigo-12fill: #101027;f-violet-1fill: #ece5fe;f-violet-2fill: #dccefc;f-violet-3fill: #ccb7fb;f-violet-4fill: #bca0fa;f-violet-5fill: #ab8af9;f-violet-6fill: #9b73f7;f-violetfill: #8b5cf6;f-violet-7fill: #784fd4;f-violet-8fill: #6442b1;f-violet-9fill: #51358f;f-violet-10fill: #3d286c;f-violet-11fill: #2a1c4a;f-violet-12fill: #160f27;f-lavender-1fill: #f1ecfe;f-lavender-2fill: #e5dcfe;f-lavender-3fill: #d8ccfd;f-lavender-4fill: #ccbcfc;f-lavender-5fill: #c0abfb;f-lavender-6fill: #b39bfb;f-lavenderfill: #a78bfa;f-lavender-7fill: #9078d7;f-lavender-8fill: #7864b4;f-lavender-9fill: #615191;f-lavender-10fill: #493d6e;f-lavender-11fill: #322a4b;f-lavender-12fill: #1b1628;f-magenta-1fill: #f9e1fc;f-magenta-2fill: #f4c8fa;f-magenta-3fill: #eeaef8;f-magenta-4fill: #e994f6;f-magenta-5fill: #e47af3;f-magenta-6fill: #de60f1;f-magentafill: #d946ef;f-magenta-7fill: #bb3cce;f-magenta-8fill: #9c32ac;f-magenta-9fill: #7e298b;f-magenta-10fill: #5f1f69;f-magenta-11fill: #411548;f-magenta-12fill: #230b26;f-pink-1fill: #fce2ef;f-pink-2fill: #f9c8e0;f-pink-3fill: #f7aed2;f-pink-4fill: #f495c4;f-pink-5fill: #f17bb6;f-pink-6fill: #ef62a7;f-pinkfill: #ec4899;f-pink-7fill: #cb3e84;f-pink-8fill: #aa346e;f-pink-9fill: #892a59;f-pink-10fill: #682043;f-pink-11fill: #47162e;f-pink-12fill: #260c18;f-coral-1fill: #ffe8ed;f-coral-2fill: #ffd4de;f-coral-3fill: #ffc0cf;f-coral-4fill: #ffabbf;f-coral-5fill: #ff97b0;f-coral-6fill: #ff83a0;f-coralfill: #ff6f91;f-coral-7fill: #db5f7d;f-coral-8fill: #b85068;f-coral-9fill: #944054;f-coral-10fill: #703140;f-coral-11fill: #4d212c;f-coral-12fill: #291217;f-zinc-1fill: #e3e3e5;f-zinc-2fill: #cbcbce;f-zinc-3fill: #b3b3b7;f-zinc-4fill: #9b9ba0;f-zinc-5fill: #828289;f-zinc-6fill: #6a6a72;f-zincfill: #52525b;f-zinc-7fill: #47474e;f-zinc-8fill: #3b3b42;f-zinc-9fill: #303035;f-zinc-10fill: #242428;f-zinc-11fill: #19191b;f-zinc-12fill: #0d0d0f;f-gray-1fill: #e7e8eb;f-gray-2fill: #d3d5d9;f-gray-3fill: #bec1c7;f-gray-4fill: #a9adb5;f-gray-5fill: #9499a4;f-gray-6fill: #808692;f-grayfill: #6b7280;f-gray-7fill: #5c626e;f-gray-8fill: #4d525c;f-gray-9fill: #3e424a;f-gray-10fill: #2f3238;f-gray-11fill: #202226;f-gray-12fill: #111214;f-slate-1fill: #e6e9ec;f-slate-2fill: #d1d5dc;f-slate-3fill: #bbc2cc;f-slate-4fill: #a5aebc;f-slate-5fill: #8f9bab;f-slate-6fill: #7a879b;f-slatefill: #64748b;f-slate-7fill: #566478;f-slate-8fill: #485464;f-slate-9fill: #3a4351;f-slate-10fill: #2c333d;f-slate-11fill: #1e232a;f-slate-12fill: #101316;f-silver-1fill: #eff0f2;f-silver-2fill: #e1e3e7;f-silver-3fill: #d3d7dc;f-silver-4fill: #c6cad1;f-silver-5fill: #b8bdc5;f-silver-6fill: #aab0ba;f-silverfill: #9ca3af;f-silver-7fill: #868c97;f-silver-8fill: #70757e;f-silver-9fill: #5a5f66;f-silver-10fill: #45484d;f-silver-11fill: #2f3135;f-silver-12fill: #191a1c;f-blackfill: #000000;f-currentfill: currentColor;f-transparentfill: transparent;f-whitefill: #ffffff;Responsiveness
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
Target viewport sizes with breakpoint prefixes.
sm:f-*Small≥640px
md:f-*Medium≥768px
lg:f-*Large≥1024px
xxl:f-*Extra Large≥1536px
Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
Syntax:
h:f-*Opacity Modifiers
Adjust color transparency by appending an opacity suffix.
Append /[opacity] to any color utility to control its transparency level.
Syntax:
f-[color]/[0-100]