Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS 3.0 — All new CLI, utilities, and more 🎉

Stroke

Controls the color of SVG elements.

Utility Properties

s-red-1

 stroke: rgb(249, 224, 224);

s-red-2

 stroke: rgb(243, 197, 197);

s-red-3

 stroke: rgb(237, 170, 170);

s-red-4

 stroke: rgb(232, 142, 142);

s-red-5

 stroke: rgb(226, 115, 115);

s-red-6

 stroke: rgb(221, 88, 88);

s-red

 stroke: rgb(215, 61, 61);

s-red-7

 stroke: rgb(185, 52, 52);

s-red-8

 stroke: rgb(155, 44, 44);

s-red-9

 stroke: rgb(125, 35, 35);

s-red-10

 stroke: rgb(95, 27, 27);

s-red-11

 stroke: rgb(65, 18, 18);

s-red-12

 stroke: rgb(34, 10, 10);

s-orange-1

 stroke: rgb(250, 231, 217);

s-orange-2

 stroke: rgb(246, 210, 185);

s-orange-3

 stroke: rgb(241, 189, 152);

s-orange-4

 stroke: rgb(237, 167, 119);

s-orange-5

 stroke: rgb(233, 146, 86);

s-orange-6

 stroke: rgb(228, 125, 53);

s-orange

 stroke: rgb(224, 104, 20);

s-orange-7

 stroke: rgb(193, 89, 17);

s-orange-8

 stroke: rgb(161, 75, 14);

s-orange-9

 stroke: rgb(130, 60, 12);

s-orange-10

 stroke: rgb(99, 46, 9);

s-orange-11

 stroke: rgb(67, 31, 6);

s-orange-12

 stroke: rgb(36, 17, 3);

s-yellow-1

 stroke: rgb(248, 240, 215);

s-yellow-2

 stroke: rgb(242, 227, 181);

s-yellow-3

 stroke: rgb(236, 214, 146);

s-yellow-4

 stroke: rgb(229, 200, 111);

s-yellow-5

 stroke: rgb(223, 187, 76);

s-yellow-6

 stroke: rgb(217, 174, 42);

s-yellow

 stroke: rgb(211, 161, 7);

s-yellow-7

 stroke: rgb(181, 138, 6);

s-yellow-8

 stroke: rgb(152, 116, 5);

s-yellow-9

 stroke: rgb(122, 93, 4);

s-yellow-10

 stroke: rgb(93, 71, 3);

s-yellow-11

 stroke: rgb(63, 48, 2);

s-yellow-12

 stroke: rgb(34, 26, 1);

s-green-1

 stroke: rgb(219, 243, 228);

s-green-2

 stroke: rgb(188, 232, 204);

s-green-3

 stroke: rgb(156, 221, 180);

s-green-4

 stroke: rgb(125, 210, 156);

s-green-5

 stroke: rgb(94, 199, 133);

s-green-6

 stroke: rgb(62, 188, 109);

s-green

 stroke: rgb(31, 177, 85);

s-green-7

 stroke: rgb(27, 152, 73);

s-green-8

 stroke: rgb(22, 127, 61);

s-green-9

 stroke: rgb(18, 103, 49);

s-green-10

 stroke: rgb(14, 78, 37);

s-green-11

 stroke: rgb(9, 53, 26);

s-green-12

 stroke: rgb(5, 28, 14);

s-teal-1

 stroke: rgb(217, 241, 238);

s-teal-2

 stroke: rgb(184, 228, 223);

s-teal-3

 stroke: rgb(151, 216, 208);

s-teal-4

 stroke: rgb(118, 203, 194);

s-teal-5

 stroke: rgb(84, 191, 179);

s-teal-6

 stroke: rgb(51, 178, 164);

s-teal

 stroke: rgb(18, 166, 149);

s-teal-7

 stroke: rgb(15, 143, 128);

s-teal-8

 stroke: rgb(13, 120, 107);

s-teal-9

 stroke: rgb(10, 96, 86);

s-teal-10

 stroke: rgb(8, 73, 66);

s-teal-11

 stroke: rgb(5, 50, 45);

s-teal-12

 stroke: rgb(3, 27, 24);

s-cyan-1

 stroke: rgb(215, 240, 245);

s-cyan-2

 stroke: rgb(180, 228, 236);

s-cyan-3

 stroke: rgb(145, 215, 227);

s-cyan-4

 stroke: rgb(110, 202, 218);

s-cyan-5

 stroke: rgb(75, 189, 209);

s-cyan-6

 stroke: rgb(40, 177, 200);

s-cyan

 stroke: rgb(5, 164, 191);

s-cyan-7

 stroke: rgb(4, 141, 164);

s-cyan-8

 stroke: rgb(4, 118, 138);

s-cyan-9

 stroke: rgb(3, 95, 111);

s-cyan-10

 stroke: rgb(2, 72, 84);

s-cyan-11

 stroke: rgb(2, 49, 57);

s-cyan-12

 stroke: rgb(1, 26, 31);

s-blue-1

 stroke: rgb(223, 233, 250);

s-blue-2

 stroke: rgb(194, 214, 245);

s-blue-3

 stroke: rgb(166, 194, 240);

s-blue-4

 stroke: rgb(138, 175, 235);

s-blue-5

 stroke: rgb(110, 156, 231);

s-blue-6

 stroke: rgb(81, 136, 226);

s-blue

 stroke: rgb(53, 117, 221);

s-blue-7

 stroke: rgb(46, 101, 190);

s-blue-8

 stroke: rgb(38, 84, 159);

s-blue-9

 stroke: rgb(31, 68, 128);

s-blue-10

 stroke: rgb(23, 51, 97);

s-blue-11

 stroke: rgb(16, 35, 66);

s-blue-12

 stroke: rgb(8, 19, 35);

s-indigo-1

 stroke: rgb(228, 229, 249);

s-indigo-2

 stroke: rgb(205, 206, 244);

s-indigo-3

 stroke: rgb(182, 183, 238);

s-indigo-4

 stroke: rgb(159, 160, 233);

s-indigo-5

 stroke: rgb(135, 138, 228);

s-indigo-6

 stroke: rgb(112, 115, 222);

s-indigo

 stroke: rgb(89, 92, 217);

s-indigo-7

 stroke: rgb(77, 79, 187);

s-indigo-8

 stroke: rgb(64, 66, 156);

s-indigo-9

 stroke: rgb(52, 53, 126);

s-indigo-10

 stroke: rgb(39, 40, 95);

s-indigo-11

 stroke: rgb(27, 28, 65);

s-indigo-12

 stroke: rgb(14, 15, 35);

s-violet-1

 stroke: rgb(234, 227, 250);

s-violet-2

 stroke: rgb(216, 203, 245);

s-violet-3

 stroke: rgb(198, 179, 240);

s-violet-4

 stroke: rgb(180, 155, 235);

s-violet-5

 stroke: rgb(161, 131, 231);

s-violet-6

 stroke: rgb(143, 107, 226);

s-violet

 stroke: rgb(125, 83, 221);

s-violet-7

 stroke: rgb(108, 71, 190);

s-violet-8

 stroke: rgb(90, 60, 159);

s-violet-9

 stroke: rgb(73, 48, 128);

s-violet-10

 stroke: rgb(55, 37, 97);

s-violet-11

 stroke: rgb(38, 25, 66);

s-violet-12

 stroke: rgb(20, 13, 35);

s-pink-1

 stroke: rgb(248, 225, 236);

s-pink-2

 stroke: rgb(242, 198, 220);

s-pink-3

 stroke: rgb(236, 171, 204);

s-pink-4

 stroke: rgb(230, 145, 187);

s-pink-5

 stroke: rgb(224, 118, 171);

s-pink-6

 stroke: rgb(218, 92, 154);

s-pink

 stroke: rgb(212, 65, 138);

s-pink-7

 stroke: rgb(182, 56, 119);

s-pink-8

 stroke: rgb(153, 47, 99);

s-pink-9

 stroke: rgb(123, 38, 80);

s-pink-10

 stroke: rgb(93, 29, 61);

s-pink-11

 stroke: rgb(64, 20, 41);

s-pink-12

 stroke: rgb(34, 10, 22);

s-lead-1

 stroke: rgb(224, 224, 227);

s-lead-2

 stroke: rgb(197, 197, 202);

s-lead-3

 stroke: rgb(171, 171, 177);

s-lead-4

 stroke: rgb(144, 144, 152);

s-lead-5

 stroke: rgb(117, 117, 128);

s-lead-6

 stroke: rgb(90, 90, 103);

s-lead

 stroke: rgb(63, 63, 78);

s-lead-7

 stroke: rgb(54, 54, 67);

s-lead-8

 stroke: rgb(45, 45, 56);

s-lead-9

 stroke: rgb(37, 37, 45);

s-lead-10

 stroke: rgb(28, 28, 34);

s-lead-11

 stroke: rgb(19, 19, 23);

s-lead-12

 stroke: rgb(10, 10, 12);

s-gray-1

 stroke: rgb(230, 231, 233);

s-gray-2

 stroke: rgb(207, 209, 213);

s-gray-3

 stroke: rgb(185, 188, 193);

s-gray-4

 stroke: rgb(163, 167, 174);

s-gray-5

 stroke: rgb(141, 146, 154);

s-gray-6

 stroke: rgb(118, 124, 135);

s-gray

 stroke: rgb(96, 103, 115);

s-gray-7

 stroke: rgb(83, 89, 99);

s-gray-8

 stroke: rgb(69, 74, 83);

s-gray-9

 stroke: rgb(56, 60, 67);

s-gray-10

 stroke: rgb(42, 45, 51);

s-gray-11

 stroke: rgb(29, 31, 35);

s-gray-12

 stroke: rgb(15, 16, 18);

s-silver-1

 stroke: rgb(245, 245, 246);

s-silver-2

 stroke: rgb(236, 237, 238);

s-silver-3

 stroke: rgb(227, 228, 230);

s-silver-4

 stroke: rgb(218, 220, 223);

s-silver-5

 stroke: rgb(209, 211, 215);

s-silver-6

 stroke: rgb(200, 203, 207);

s-silver

 stroke: rgb(191, 194, 199);

s-silver-7

 stroke: rgb(164, 167, 171);

s-silver-8

 stroke: rgb(138, 140, 143);

s-silver-9

 stroke: rgb(111, 113, 115);

s-silver-10

 stroke: rgb(84, 85, 88);

s-silver-11

 stroke: rgb(57, 58, 60);

s-silver-12

 stroke: rgb(31, 31, 32);

s-black

 stroke: black;

s-white

 stroke: white;

s-transparent

 stroke: transparent;

This example showcases various stroke-color utilities using the indigo colors from the default color palette.

  • The s-indigo-4 stroke utility applies a lighter indigo color to an SVG element.
  • The s-indigo stroke utility applies the base indigo color to an SVG element.
  • The s-indigo-8 stroke utility applies a darker indigo color to an SVG element.
 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div>
    <svg class="d-16 s-indigo-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" 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 s-indigo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" 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 s-indigo-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" 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>

Conditional styles

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

Media modifier

You can combine responsive breakpoints like sm:s-*,md:s-*, lg:s-*, and xxl:s-* allows targeting specific utilities in different viewports. 

<div class="s-lead md:s-indigo ..."></div>

Hover modifier

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

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