Skip to main content

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;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

Opacity Modifiers

Adjust color transparency by appending an opacity suffix.