Fill

Utility	Properties
f-red-1	fill: rgb(249, 224, 224);
f-red-2	fill: rgb(243, 197, 197);
f-red-3	fill: rgb(237, 170, 170);
f-red-4	fill: rgb(232, 142, 142);
f-red-5	fill: rgb(226, 115, 115);
f-red-6	fill: rgb(221, 88, 88);
f-red	fill: rgb(215, 61, 61);
f-red-7	fill: rgb(185, 52, 52);
f-red-8	fill: rgb(155, 44, 44);
f-red-9	fill: rgb(125, 35, 35);
f-red-10	fill: rgb(95, 27, 27);
f-red-11	fill: rgb(65, 18, 18);
f-red-12	fill: rgb(34, 10, 10);
f-orange-1	fill: rgb(250, 231, 217);
f-orange-2	fill: rgb(246, 210, 185);
f-orange-3	fill: rgb(241, 189, 152);
f-orange-4	fill: rgb(237, 167, 119);
f-orange-5	fill: rgb(233, 146, 86);
f-orange-6	fill: rgb(228, 125, 53);
f-orange	fill: rgb(224, 104, 20);
f-orange-7	fill: rgb(193, 89, 17);
f-orange-8	fill: rgb(161, 75, 14);
f-orange-9	fill: rgb(130, 60, 12);
f-orange-10	fill: rgb(99, 46, 9);
f-orange-11	fill: rgb(67, 31, 6);
f-orange-12	fill: rgb(36, 17, 3);
f-yellow-1	fill: rgb(248, 240, 215);
f-yellow-2	fill: rgb(242, 227, 181);
f-yellow-3	fill: rgb(236, 214, 146);
f-yellow-4	fill: rgb(229, 200, 111);
f-yellow-5	fill: rgb(223, 187, 76);
f-yellow-6	fill: rgb(217, 174, 42);
f-yellow	fill: rgb(211, 161, 7);
f-yellow-7	fill: rgb(181, 138, 6);
f-yellow-8	fill: rgb(152, 116, 5);
f-yellow-9	fill: rgb(122, 93, 4);
f-yellow-10	fill: rgb(93, 71, 3);
f-yellow-11	fill: rgb(63, 48, 2);
f-yellow-12	fill: rgb(34, 26, 1);
f-green-1	fill: rgb(219, 243, 228);
f-green-2	fill: rgb(188, 232, 204);
f-green-3	fill: rgb(156, 221, 180);
f-green-4	fill: rgb(125, 210, 156);
f-green-5	fill: rgb(94, 199, 133);
f-green-6	fill: rgb(62, 188, 109);
f-green	fill: rgb(31, 177, 85);
f-green-7	fill: rgb(27, 152, 73);
f-green-8	fill: rgb(22, 127, 61);
f-green-9	fill: rgb(18, 103, 49);
f-green-10	fill: rgb(14, 78, 37);
f-green-11	fill: rgb(9, 53, 26);
f-green-12	fill: rgb(5, 28, 14);
f-teal-1	fill: rgb(217, 241, 238);
f-teal-2	fill: rgb(184, 228, 223);
f-teal-3	fill: rgb(151, 216, 208);
f-teal-4	fill: rgb(118, 203, 194);
f-teal-5	fill: rgb(84, 191, 179);
f-teal-6	fill: rgb(51, 178, 164);
f-teal	fill: rgb(18, 166, 149);
f-teal-7	fill: rgb(15, 143, 128);
f-teal-8	fill: rgb(13, 120, 107);
f-teal-9	fill: rgb(10, 96, 86);
f-teal-10	fill: rgb(8, 73, 66);
f-teal-11	fill: rgb(5, 50, 45);
f-teal-12	fill: rgb(3, 27, 24);
f-cyan-1	fill: rgb(215, 240, 245);
f-cyan-2	fill: rgb(180, 228, 236);
f-cyan-3	fill: rgb(145, 215, 227);
f-cyan-4	fill: rgb(110, 202, 218);
f-cyan-5	fill: rgb(75, 189, 209);
f-cyan-6	fill: rgb(40, 177, 200);
f-cyan	fill: rgb(5, 164, 191);
f-cyan-7	fill: rgb(4, 141, 164);
f-cyan-8	fill: rgb(4, 118, 138);
f-cyan-9	fill: rgb(3, 95, 111);
f-cyan-10	fill: rgb(2, 72, 84);
f-cyan-11	fill: rgb(2, 49, 57);
f-cyan-12	fill: rgb(1, 26, 31);
f-blue-1	fill: rgb(223, 233, 250);
f-blue-2	fill: rgb(194, 214, 245);
f-blue-3	fill: rgb(166, 194, 240);
f-blue-4	fill: rgb(138, 175, 235);
f-blue-5	fill: rgb(110, 156, 231);
f-blue-6	fill: rgb(81, 136, 226);
f-blue	fill: rgb(53, 117, 221);
f-blue-7	fill: rgb(46, 101, 190);
f-blue-8	fill: rgb(38, 84, 159);
f-blue-9	fill: rgb(31, 68, 128);
f-blue-10	fill: rgb(23, 51, 97);
f-blue-11	fill: rgb(16, 35, 66);
f-blue-12	fill: rgb(8, 19, 35);
f-indigo-1	fill: rgb(228, 229, 249);
f-indigo-2	fill: rgb(205, 206, 244);
f-indigo-3	fill: rgb(182, 183, 238);
f-indigo-4	fill: rgb(159, 160, 233);
f-indigo-5	fill: rgb(135, 138, 228);
f-indigo-6	fill: rgb(112, 115, 222);
f-indigo	fill: rgb(89, 92, 217);
f-indigo-7	fill: rgb(77, 79, 187);
f-indigo-8	fill: rgb(64, 66, 156);
f-indigo-9	fill: rgb(52, 53, 126);
f-indigo-10	fill: rgb(39, 40, 95);
f-indigo-11	fill: rgb(27, 28, 65);
f-indigo-12	fill: rgb(14, 15, 35);
f-violet-1	fill: rgb(234, 227, 250);
f-violet-2	fill: rgb(216, 203, 245);
f-violet-3	fill: rgb(198, 179, 240);
f-violet-4	fill: rgb(180, 155, 235);
f-violet-5	fill: rgb(161, 131, 231);
f-violet-6	fill: rgb(143, 107, 226);
f-violet	fill: rgb(125, 83, 221);
f-violet-7	fill: rgb(108, 71, 190);
f-violet-8	fill: rgb(90, 60, 159);
f-violet-9	fill: rgb(73, 48, 128);
f-violet-10	fill: rgb(55, 37, 97);
f-violet-11	fill: rgb(38, 25, 66);
f-violet-12	fill: rgb(20, 13, 35);
f-pink-1	fill: rgb(248, 225, 236);
f-pink-2	fill: rgb(242, 198, 220);
f-pink-3	fill: rgb(236, 171, 204);
f-pink-4	fill: rgb(230, 145, 187);
f-pink-5	fill: rgb(224, 118, 171);
f-pink-6	fill: rgb(218, 92, 154);
f-pink	fill: rgb(212, 65, 138);
f-pink-7	fill: rgb(182, 56, 119);
f-pink-8	fill: rgb(153, 47, 99);
f-pink-9	fill: rgb(123, 38, 80);
f-pink-10	fill: rgb(93, 29, 61);
f-pink-11	fill: rgb(64, 20, 41);
f-pink-12	fill: rgb(34, 10, 22);
f-lead-1	fill: rgb(224, 224, 227);
f-lead-2	fill: rgb(197, 197, 202);
f-lead-3	fill: rgb(171, 171, 177);
f-lead-4	fill: rgb(144, 144, 152);
f-lead-5	fill: rgb(117, 117, 128);
f-lead-6	fill: rgb(90, 90, 103);
f-lead	fill: rgb(63, 63, 78);
f-lead-7	fill: rgb(54, 54, 67);
f-lead-8	fill: rgb(45, 45, 56);
f-lead-9	fill: rgb(37, 37, 45);
f-lead-10	fill: rgb(28, 28, 34);
f-lead-11	fill: rgb(19, 19, 23);
f-lead-12	fill: rgb(10, 10, 12);
f-gray-1	fill: rgb(230, 231, 233);
f-gray-2	fill: rgb(207, 209, 213);
f-gray-3	fill: rgb(185, 188, 193);
f-gray-4	fill: rgb(163, 167, 174);
f-gray-5	fill: rgb(141, 146, 154);
f-gray-6	fill: rgb(118, 124, 135);
f-gray	fill: rgb(96, 103, 115);
f-gray-7	fill: rgb(83, 89, 99);
f-gray-8	fill: rgb(69, 74, 83);
f-gray-9	fill: rgb(56, 60, 67);
f-gray-10	fill: rgb(42, 45, 51);
f-gray-11	fill: rgb(29, 31, 35);
f-gray-12	fill: rgb(15, 16, 18);
f-silver-1	fill: rgb(245, 245, 246);
f-silver-2	fill: rgb(236, 237, 238);
f-silver-3	fill: rgb(227, 228, 230);
f-silver-4	fill: rgb(218, 220, 223);
f-silver-5	fill: rgb(209, 211, 215);
f-silver-6	fill: rgb(200, 203, 207);
f-silver	fill: rgb(191, 194, 199);
f-silver-7	fill: rgb(164, 167, 171);
f-silver-8	fill: rgb(138, 140, 143);
f-silver-9	fill: rgb(111, 113, 115);
f-silver-10	fill: rgb(84, 85, 88);
f-silver-11	fill: rgb(57, 58, 60);
f-silver-12	fill: rgb(31, 31, 32);
f-black	fill: black;
f-white	fill: white;
f-transparent	fill: transparent;

This example showcases various fill colors using the indigo color palette:

• The f-indigo-4 utility applies a lighter indigo shade.
• The f-indigo utility applies the base indigo shade.
• The f-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div>
    <svg class="d-16 f-indigo-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg>
  </div>
  <div>
    <svg class="d-16 f-indigo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg>
  </div>
  <div>
    <svg class="d-16 f-indigo-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg>
  </div>
</div>

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Hover modifiers

Alternatively, you can apply :hover by using h:f-* utility to override elements and change their values when hovering over them.

<div class="f-lead h:f-indigo ..."></div>