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-1
fill: #fbdfe1;
f-red-2
fill: #f8c4c8;
f-red-3
fill: #f4a8ae;
f-red-4
fill: #f18c94;
f-red-5
fill: #ed707a;
f-red-6
fill: #ea5560;
f-red
fill: #e63946;
f-red-7
fill: #c6313c;
f-red-8
fill: #a62932;
f-red-9
fill: #852129;
f-red-10
fill: #65191f;
f-red-11
fill: #451115;
f-red-12
fill: #25090b;
f-orange-1
fill: #ffe7df;
f-orange-2
fill: #ffd3c2;
f-orange-3
fill: #ffbea6;
f-orange-4
fill: #ffa98a;
f-orange-5
fill: #ff946e;
f-orange-6
fill: #ff8051;
f-orange
fill: #ff6b35;
f-orange-7
fill: #db5c2e;
f-orange-8
fill: #b84d26;
f-orange-9
fill: #943e1f;
f-orange-10
fill: #702f17;
f-orange-11
fill: #4d2010;
f-orange-12
fill: #291108;
f-yellow-1
fill: #fff4db;
f-yellow-2
fill: #ffeabb;
f-yellow-3
fill: #ffe09b;
f-yellow-4
fill: #ffd67b;
f-yellow-5
fill: #ffcc5c;
f-yellow-6
fill: #ffc23c;
f-yellow
fill: #ffb81c;
f-yellow-7
fill: #db9e18;
f-yellow-8
fill: #b88414;
f-yellow-9
fill: #946b10;
f-yellow-10
fill: #70510c;
f-yellow-11
fill: #4d3708;
f-yellow-12
fill: #291d04;
f-lime-1
fill: #ebf7da;
f-lime-2
fill: #daf0b9;
f-lime-3
fill: #c9e998;
f-lime-4
fill: #b8e178;
f-lime-5
fill: #a6da57;
f-lime-6
fill: #95d337;
f-lime
fill: #84cc16;
f-lime-7
fill: #72af13;
f-lime-8
fill: #5f9310;
f-lime-9
fill: #4d760d;
f-lime-10
fill: #3a5a0a;
f-lime-11
fill: #283d07;
f-lime-12
fill: #152104;
f-mint-1
fill: #d9f4eb;
f-mint-2
fill: #b7ead9;
f-mint-3
fill: #96e0c8;
f-mint-4
fill: #74d6b6;
f-mint-5
fill: #53cda4;
f-mint-6
fill: #31c393;
f-mint
fill: #10b981;
f-mint-7
fill: #0e9f6f;
f-mint-8
fill: #0c855d;
f-mint-9
fill: #096b4b;
f-mint-10
fill: #075139;
f-mint-11
fill: #053827;
f-mint-12
fill: #031e15;
f-green-1
fill: #d7f8f0;
f-green-2
fill: #b4f3e3;
f-green-3
fill: #91edd5;
f-green-4
fill: #6fe7c8;
f-green-5
fill: #4ce1bb;
f-green-6
fill: #29dcad;
f-green
fill: #06d6a0;
f-green-7
fill: #05b88a;
f-green-8
fill: #049a73;
f-green-9
fill: #037c5d;
f-green-10
fill: #035e46;
f-green-11
fill: #024030;
f-green-12
fill: #01221a;
f-cyan-1
fill: #d7f3f8;
f-cyan-2
fill: #b4e9f2;
f-cyan-3
fill: #91dfec;
f-cyan-4
fill: #6fd5e6;
f-cyan-5
fill: #4ccae0;
f-cyan-6
fill: #29c0da;
f-cyan
fill: #06b6d4;
f-cyan-7
fill: #059db6;
f-cyan-8
fill: #048399;
f-cyan-9
fill: #036a7b;
f-cyan-10
fill: #03505d;
f-cyan-11
fill: #023740;
f-cyan-12
fill: #011d22;
f-sky-1
fill: #dff4fe;
f-sky-2
fill: #c3ebfd;
f-sky-3
fill: #a7e2fc;
f-sky-4
fill: #8cd9fb;
f-sky-5
fill: #70cffa;
f-sky-6
fill: #54c6f9;
f-sky
fill: #38bdf8;
f-sky-7
fill: #30a3d5;
f-sky-8
fill: #2888b3;
f-sky-9
fill: #206e90;
f-sky-10
fill: #19536d;
f-sky-11
fill: #11394a;
f-sky-12
fill: #091e28;
f-blue-1
fill: #dce6fc;
f-blue-2
fill: #bed0f9;
f-blue-3
fill: #9fbaf6;
f-blue-4
fill: #81a5f3;
f-blue-5
fill: #628ff1;
f-blue-6
fill: #4479ee;
f-blue
fill: #2563eb;
f-blue-7
fill: #2055ca;
f-blue-8
fill: #1b47a9;
f-blue-9
fill: #153988;
f-blue-10
fill: #102c67;
f-blue-11
fill: #0b1e47;
f-blue-12
fill: #061026;
f-indigo-1
fill: #e6e7fd;
f-indigo-2
fill: #d0d1fb;
f-indigo-3
fill: #babcf9;
f-indigo-4
fill: #a5a6f7;
f-indigo-5
fill: #8f91f5;
f-indigo-6
fill: #797bf3;
f-indigo
fill: #6366f1;
f-indigo-7
fill: #5558cf;
f-indigo-8
fill: #4749ae;
f-indigo-9
fill: #393b8c;
f-indigo-10
fill: #2c2d6a;
f-indigo-11
fill: #1e1f48;
f-indigo-12
fill: #101027;
f-violet-1
fill: #ece5fe;
f-violet-2
fill: #dccefc;
f-violet-3
fill: #ccb7fb;
f-violet-4
fill: #bca0fa;
f-violet-5
fill: #ab8af9;
f-violet-6
fill: #9b73f7;
f-violet
fill: #8b5cf6;
f-violet-7
fill: #784fd4;
f-violet-8
fill: #6442b1;
f-violet-9
fill: #51358f;
f-violet-10
fill: #3d286c;
f-violet-11
fill: #2a1c4a;
f-violet-12
fill: #160f27;
f-lavender-1
fill: #f1ecfe;
f-lavender-2
fill: #e5dcfe;
f-lavender-3
fill: #d8ccfd;
f-lavender-4
fill: #ccbcfc;
f-lavender-5
fill: #c0abfb;
f-lavender-6
fill: #b39bfb;
f-lavender
fill: #a78bfa;
f-lavender-7
fill: #9078d7;
f-lavender-8
fill: #7864b4;
f-lavender-9
fill: #615191;
f-lavender-10
fill: #493d6e;
f-lavender-11
fill: #322a4b;
f-lavender-12
fill: #1b1628;
f-magenta-1
fill: #f9e1fc;
f-magenta-2
fill: #f4c8fa;
f-magenta-3
fill: #eeaef8;
f-magenta-4
fill: #e994f6;
f-magenta-5
fill: #e47af3;
f-magenta-6
fill: #de60f1;
f-magenta
fill: #d946ef;
f-magenta-7
fill: #bb3cce;
f-magenta-8
fill: #9c32ac;
f-magenta-9
fill: #7e298b;
f-magenta-10
fill: #5f1f69;
f-magenta-11
fill: #411548;
f-magenta-12
fill: #230b26;
f-pink-1
fill: #fce2ef;
f-pink-2
fill: #f9c8e0;
f-pink-3
fill: #f7aed2;
f-pink-4
fill: #f495c4;
f-pink-5
fill: #f17bb6;
f-pink-6
fill: #ef62a7;
f-pink
fill: #ec4899;
f-pink-7
fill: #cb3e84;
f-pink-8
fill: #aa346e;
f-pink-9
fill: #892a59;
f-pink-10
fill: #682043;
f-pink-11
fill: #47162e;
f-pink-12
fill: #260c18;
f-coral-1
fill: #ffe8ed;
f-coral-2
fill: #ffd4de;
f-coral-3
fill: #ffc0cf;
f-coral-4
fill: #ffabbf;
f-coral-5
fill: #ff97b0;
f-coral-6
fill: #ff83a0;
f-coral
fill: #ff6f91;
f-coral-7
fill: #db5f7d;
f-coral-8
fill: #b85068;
f-coral-9
fill: #944054;
f-coral-10
fill: #703140;
f-coral-11
fill: #4d212c;
f-coral-12
fill: #291217;
f-zinc-1
fill: #e3e3e5;
f-zinc-2
fill: #cbcbce;
f-zinc-3
fill: #b3b3b7;
f-zinc-4
fill: #9b9ba0;
f-zinc-5
fill: #828289;
f-zinc-6
fill: #6a6a72;
f-zinc
fill: #52525b;
f-zinc-7
fill: #47474e;
f-zinc-8
fill: #3b3b42;
f-zinc-9
fill: #303035;
f-zinc-10
fill: #242428;
f-zinc-11
fill: #19191b;
f-zinc-12
fill: #0d0d0f;
f-gray-1
fill: #e7e8eb;
f-gray-2
fill: #d3d5d9;
f-gray-3
fill: #bec1c7;
f-gray-4
fill: #a9adb5;
f-gray-5
fill: #9499a4;
f-gray-6
fill: #808692;
f-gray
fill: #6b7280;
f-gray-7
fill: #5c626e;
f-gray-8
fill: #4d525c;
f-gray-9
fill: #3e424a;
f-gray-10
fill: #2f3238;
f-gray-11
fill: #202226;
f-gray-12
fill: #111214;
f-slate-1
fill: #e6e9ec;
f-slate-2
fill: #d1d5dc;
f-slate-3
fill: #bbc2cc;
f-slate-4
fill: #a5aebc;
f-slate-5
fill: #8f9bab;
f-slate-6
fill: #7a879b;
f-slate
fill: #64748b;
f-slate-7
fill: #566478;
f-slate-8
fill: #485464;
f-slate-9
fill: #3a4351;
f-slate-10
fill: #2c333d;
f-slate-11
fill: #1e232a;
f-slate-12
fill: #101316;
f-silver-1
fill: #eff0f2;
f-silver-2
fill: #e1e3e7;
f-silver-3
fill: #d3d7dc;
f-silver-4
fill: #c6cad1;
f-silver-5
fill: #b8bdc5;
f-silver-6
fill: #aab0ba;
f-silver
fill: #9ca3af;
f-silver-7
fill: #868c97;
f-silver-8
fill: #70757e;
f-silver-9
fill: #5a5f66;
f-silver-10
fill: #45484d;
f-silver-11
fill: #2f3135;
f-silver-12
fill: #191a1c;
f-black
fill: #000000;
f-current
fill: currentColor;
f-transparent
fill: transparent;
f-white
fill: #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]