Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS v3.0 is finally live 🎉

Text Decoration Color

Controls the color of the text decoration.

Utility Properties

tdc-red-1

 text-decoration-color: rgb(249, 224, 224);

tdc-red-2

 text-decoration-color: rgb(243, 197, 197);

tdc-red-3

 text-decoration-color: rgb(237, 170, 170);

tdc-red-4

 text-decoration-color: rgb(232, 142, 142);

tdc-red-5

 text-decoration-color: rgb(226, 115, 115);

tdc-red-6

 text-decoration-color: rgb(221, 88, 88);

tdc-red

 text-decoration-color: rgb(215, 61, 61);

tdc-red-7

 text-decoration-color: rgb(185, 52, 52);

tdc-red-8

 text-decoration-color: rgb(155, 44, 44);

tdc-red-9

 text-decoration-color: rgb(125, 35, 35);

tdc-red-10

 text-decoration-color: rgb(95, 27, 27);

tdc-red-11

 text-decoration-color: rgb(65, 18, 18);

tdc-red-12

 text-decoration-color: rgb(34, 10, 10);

tdc-orange-1

 text-decoration-color: rgb(250, 231, 217);

tdc-orange-2

 text-decoration-color: rgb(246, 210, 185);

tdc-orange-3

 text-decoration-color: rgb(241, 189, 152);

tdc-orange-4

 text-decoration-color: rgb(237, 167, 119);

tdc-orange-5

 text-decoration-color: rgb(233, 146, 86);

tdc-orange-6

 text-decoration-color: rgb(228, 125, 53);

tdc-orange

 text-decoration-color: rgb(224, 104, 20);

tdc-orange-7

 text-decoration-color: rgb(193, 89, 17);

tdc-orange-8

 text-decoration-color: rgb(161, 75, 14);

tdc-orange-9

 text-decoration-color: rgb(130, 60, 12);

tdc-orange-10

 text-decoration-color: rgb(99, 46, 9);

tdc-orange-11

 text-decoration-color: rgb(67, 31, 6);

tdc-orange-12

 text-decoration-color: rgb(36, 17, 3);

tdc-yellow-1

 text-decoration-color: rgb(248, 240, 215);

tdc-yellow-2

 text-decoration-color: rgb(242, 227, 181);

tdc-yellow-3

 text-decoration-color: rgb(236, 214, 146);

tdc-yellow-4

 text-decoration-color: rgb(229, 200, 111);

tdc-yellow-5

 text-decoration-color: rgb(223, 187, 76);

tdc-yellow-6

 text-decoration-color: rgb(217, 174, 42);

tdc-yellow

 text-decoration-color: rgb(211, 161, 7);

tdc-yellow-7

 text-decoration-color: rgb(181, 138, 6);

tdc-yellow-8

 text-decoration-color: rgb(152, 116, 5);

tdc-yellow-9

 text-decoration-color: rgb(122, 93, 4);

tdc-yellow-10

 text-decoration-color: rgb(93, 71, 3);

tdc-yellow-11

 text-decoration-color: rgb(63, 48, 2);

tdc-yellow-12

 text-decoration-color: rgb(34, 26, 1);

tdc-green-1

 text-decoration-color: rgb(219, 243, 228);

tdc-green-2

 text-decoration-color: rgb(188, 232, 204);

tdc-green-3

 text-decoration-color: rgb(156, 221, 180);

tdc-green-4

 text-decoration-color: rgb(125, 210, 156);

tdc-green-5

 text-decoration-color: rgb(94, 199, 133);

tdc-green-6

 text-decoration-color: rgb(62, 188, 109);

tdc-green

 text-decoration-color: rgb(31, 177, 85);

tdc-green-7

 text-decoration-color: rgb(27, 152, 73);

tdc-green-8

 text-decoration-color: rgb(22, 127, 61);

tdc-green-9

 text-decoration-color: rgb(18, 103, 49);

tdc-green-10

 text-decoration-color: rgb(14, 78, 37);

tdc-green-11

 text-decoration-color: rgb(9, 53, 26);

tdc-green-12

 text-decoration-color: rgb(5, 28, 14);

tdc-teal-1

 text-decoration-color: rgb(217, 241, 238);

tdc-teal-2

 text-decoration-color: rgb(184, 228, 223);

tdc-teal-3

 text-decoration-color: rgb(151, 216, 208);

tdc-teal-4

 text-decoration-color: rgb(118, 203, 194);

tdc-teal-5

 text-decoration-color: rgb(84, 191, 179);

tdc-teal-6

 text-decoration-color: rgb(51, 178, 164);

tdc-teal

 text-decoration-color: rgb(18, 166, 149);

tdc-teal-7

 text-decoration-color: rgb(15, 143, 128);

tdc-teal-8

 text-decoration-color: rgb(13, 120, 107);

tdc-teal-9

 text-decoration-color: rgb(10, 96, 86);

tdc-teal-10

 text-decoration-color: rgb(8, 73, 66);

tdc-teal-11

 text-decoration-color: rgb(5, 50, 45);

tdc-teal-12

 text-decoration-color: rgb(3, 27, 24);

tdc-cyan-1

 text-decoration-color: rgb(215, 240, 245);

tdc-cyan-2

 text-decoration-color: rgb(180, 228, 236);

tdc-cyan-3

 text-decoration-color: rgb(145, 215, 227);

tdc-cyan-4

 text-decoration-color: rgb(110, 202, 218);

tdc-cyan-5

 text-decoration-color: rgb(75, 189, 209);

tdc-cyan-6

 text-decoration-color: rgb(40, 177, 200);

tdc-cyan

 text-decoration-color: rgb(5, 164, 191);

tdc-cyan-7

 text-decoration-color: rgb(4, 141, 164);

tdc-cyan-8

 text-decoration-color: rgb(4, 118, 138);

tdc-cyan-9

 text-decoration-color: rgb(3, 95, 111);

tdc-cyan-10

 text-decoration-color: rgb(2, 72, 84);

tdc-cyan-11

 text-decoration-color: rgb(2, 49, 57);

tdc-cyan-12

 text-decoration-color: rgb(1, 26, 31);

tdc-blue-1

 text-decoration-color: rgb(223, 233, 250);

tdc-blue-2

 text-decoration-color: rgb(194, 214, 245);

tdc-blue-3

 text-decoration-color: rgb(166, 194, 240);

tdc-blue-4

 text-decoration-color: rgb(138, 175, 235);

tdc-blue-5

 text-decoration-color: rgb(110, 156, 231);

tdc-blue-6

 text-decoration-color: rgb(81, 136, 226);

tdc-blue

 text-decoration-color: rgb(53, 117, 221);

tdc-blue-7

 text-decoration-color: rgb(46, 101, 190);

tdc-blue-8

 text-decoration-color: rgb(38, 84, 159);

tdc-blue-9

 text-decoration-color: rgb(31, 68, 128);

tdc-blue-10

 text-decoration-color: rgb(23, 51, 97);

tdc-blue-11

 text-decoration-color: rgb(16, 35, 66);

tdc-blue-12

 text-decoration-color: rgb(8, 19, 35);

tdc-indigo-1

 text-decoration-color: rgb(228, 229, 249);

tdc-indigo-2

 text-decoration-color: rgb(205, 206, 244);

tdc-indigo-3

 text-decoration-color: rgb(182, 183, 238);

tdc-indigo-4

 text-decoration-color: rgb(159, 160, 233);

tdc-indigo-5

 text-decoration-color: rgb(135, 138, 228);

tdc-indigo-6

 text-decoration-color: rgb(112, 115, 222);

tdc-indigo

 text-decoration-color: rgb(89, 92, 217);

tdc-indigo-7

 text-decoration-color: rgb(77, 79, 187);

tdc-indigo-8

 text-decoration-color: rgb(64, 66, 156);

tdc-indigo-9

 text-decoration-color: rgb(52, 53, 126);

tdc-indigo-10

 text-decoration-color: rgb(39, 40, 95);

tdc-indigo-11

 text-decoration-color: rgb(27, 28, 65);

tdc-indigo-12

 text-decoration-color: rgb(14, 15, 35);

tdc-violet-1

 text-decoration-color: rgb(234, 227, 250);

tdc-violet-2

 text-decoration-color: rgb(216, 203, 245);

tdc-violet-3

 text-decoration-color: rgb(198, 179, 240);

tdc-violet-4

 text-decoration-color: rgb(180, 155, 235);

tdc-violet-5

 text-decoration-color: rgb(161, 131, 231);

tdc-violet-6

 text-decoration-color: rgb(143, 107, 226);

tdc-violet

 text-decoration-color: rgb(125, 83, 221);

tdc-violet-7

 text-decoration-color: rgb(108, 71, 190);

tdc-violet-8

 text-decoration-color: rgb(90, 60, 159);

tdc-violet-9

 text-decoration-color: rgb(73, 48, 128);

tdc-violet-10

 text-decoration-color: rgb(55, 37, 97);

tdc-violet-11

 text-decoration-color: rgb(38, 25, 66);

tdc-violet-12

 text-decoration-color: rgb(20, 13, 35);

tdc-pink-1

 text-decoration-color: rgb(248, 225, 236);

tdc-pink-2

 text-decoration-color: rgb(242, 198, 220);

tdc-pink-3

 text-decoration-color: rgb(236, 171, 204);

tdc-pink-4

 text-decoration-color: rgb(230, 145, 187);

tdc-pink-5

 text-decoration-color: rgb(224, 118, 171);

tdc-pink-6

 text-decoration-color: rgb(218, 92, 154);

tdc-pink

 text-decoration-color: rgb(212, 65, 138);

tdc-pink-7

 text-decoration-color: rgb(182, 56, 119);

tdc-pink-8

 text-decoration-color: rgb(153, 47, 99);

tdc-pink-9

 text-decoration-color: rgb(123, 38, 80);

tdc-pink-10

 text-decoration-color: rgb(93, 29, 61);

tdc-pink-11

 text-decoration-color: rgb(64, 20, 41);

tdc-pink-12

 text-decoration-color: rgb(34, 10, 22);

tdc-lead-1

 text-decoration-color: rgb(224, 224, 227);

tdc-lead-2

 text-decoration-color: rgb(197, 197, 202);

tdc-lead-3

 text-decoration-color: rgb(171, 171, 177);

tdc-lead-4

 text-decoration-color: rgb(144, 144, 152);

tdc-lead-5

 text-decoration-color: rgb(117, 117, 128);

tdc-lead-6

 text-decoration-color: rgb(90, 90, 103);

tdc-lead

 text-decoration-color: rgb(63, 63, 78);

tdc-lead-7

 text-decoration-color: rgb(54, 54, 67);

tdc-lead-8

 text-decoration-color: rgb(45, 45, 56);

tdc-lead-9

 text-decoration-color: rgb(37, 37, 45);

tdc-lead-10

 text-decoration-color: rgb(28, 28, 34);

tdc-lead-11

 text-decoration-color: rgb(19, 19, 23);

tdc-lead-12

 text-decoration-color: rgb(10, 10, 12);

tdc-gray-1

 text-decoration-color: rgb(230, 231, 233);

tdc-gray-2

 text-decoration-color: rgb(207, 209, 213);

tdc-gray-3

 text-decoration-color: rgb(185, 188, 193);

tdc-gray-4

 text-decoration-color: rgb(163, 167, 174);

tdc-gray-5

 text-decoration-color: rgb(141, 146, 154);

tdc-gray-6

 text-decoration-color: rgb(118, 124, 135);

tdc-gray

 text-decoration-color: rgb(96, 103, 115);

tdc-gray-7

 text-decoration-color: rgb(83, 89, 99);

tdc-gray-8

 text-decoration-color: rgb(69, 74, 83);

tdc-gray-9

 text-decoration-color: rgb(56, 60, 67);

tdc-gray-10

 text-decoration-color: rgb(42, 45, 51);

tdc-gray-11

 text-decoration-color: rgb(29, 31, 35);

tdc-gray-12

 text-decoration-color: rgb(15, 16, 18);

tdc-silver-1

 text-decoration-color: rgb(245, 245, 246);

tdc-silver-2

 text-decoration-color: rgb(236, 237, 238);

tdc-silver-3

 text-decoration-color: rgb(227, 228, 230);

tdc-silver-4

 text-decoration-color: rgb(218, 220, 223);

tdc-silver-5

 text-decoration-color: rgb(209, 211, 215);

tdc-silver-6

 text-decoration-color: rgb(200, 203, 207);

tdc-silver

 text-decoration-color: rgb(191, 194, 199);

tdc-silver-7

 text-decoration-color: rgb(164, 167, 171);

tdc-silver-8

 text-decoration-color: rgb(138, 140, 143);

tdc-silver-9

 text-decoration-color: rgb(111, 113, 115);

tdc-silver-10

 text-decoration-color: rgb(84, 85, 88);

tdc-silver-11

 text-decoration-color: rgb(57, 58, 60);

tdc-silver-12

 text-decoration-color: rgb(31, 31, 32);

tdc-black

 text-decoration-color: black;

tdc-white

 text-decoration-color: white;

tdc-transparent

 text-decoration-color: transparent;

This example showcases various text decoration colors using the teal, red, and yellow colors:

  • The tdc-teal utility applies the base teal shade.
  • The tdc-red utility applies the base red shade.
  • The tdc-yellow utility applies the base yellow shade.
The quicks brown fox jumps over the lazy dog, and the dog barks loudly. However, the fox doesn't seem to mind. It continues to run swiftly, while the dog chases after it. In the end, the fox realises that it can be friends with the dog, despite their differences. 
<div class="bg-indigo-1 p-4 rad-1">
  <div class="bg-white p-4 rad-1 ta-j tc-lead">
    The <span class="h:bg-yellow-1 tdc-yellow tdl-u tdt-2">quicks</span> brown fox jumps over the lazy dog, and the dog barks loudly.
    <span class="h:bg-teal-1 tdc-teal tdl-u tdt-2">However</span>, the fox doesn't seem to mind. It continues to run <span class="h:bg-teal-1 tdc-teal tdl-u tdt-2">swiftly</span>,
    while the dog chases after it. In the end, the fox <span class="h:bg-red-1 tdc-red tdl-u tdt-2">realises</span> that it can be friends with the dog, despite their differences.
  </div>
</div>

Conditional styles

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:tdc-* utility to override elements and change their values when hovering over them. 

<div class="tdc-lead h:tdc-teal ..."></div>