Skip to content
Sunsetting Yumma CSS Intellisense extension 👋

Text Decoration Color

Controls the color of the text decoration.

Class Properties

tdc-l-red-6

text-decoration-color: #efb1b1;

tdc-l-red-5

text-decoration-color: #eb9e9e;

tdc-l-red-4

text-decoration-color: #e78b8b;

tdc-l-red-3

text-decoration-color: #e37777;

tdc-l-red-2

text-decoration-color: #df6464;

tdc-l-red-1

text-decoration-color: #db5050;

tdc-red

text-decoration-color: #d73d3d;

tdc-d-red-1

text-decoration-color: #c23737;

tdc-d-red-2

text-decoration-color: #ac3131;

tdc-d-red-3

text-decoration-color: #972b2b;

tdc-d-red-4

text-decoration-color: #812525;

tdc-d-red-5

text-decoration-color: #6c1f1f;

tdc-d-red-6

text-decoration-color: #561818;

tdc-l-orange-6

text-decoration-color: #f3c3a1;

tdc-l-orange-5

text-decoration-color: #f0b48a;

tdc-l-orange-4

text-decoration-color: #eca472;

tdc-l-orange-3

text-decoration-color: #e9955b;

tdc-l-orange-2

text-decoration-color: #e68643;

tdc-l-orange-1

text-decoration-color: #e3772c;

tdc-orange

text-decoration-color: #e06814;

tdc-d-orange-1

text-decoration-color: #ca5e12;

tdc-d-orange-2

text-decoration-color: #b35310;

tdc-d-orange-3

text-decoration-color: #9d490e;

tdc-d-orange-4

text-decoration-color: #863e0c;

tdc-d-orange-5

text-decoration-color: #70340a;

tdc-d-orange-6

text-decoration-color: #5a2a08;

tdc-l-yellow-6

text-decoration-color: #edd99c;

tdc-l-yellow-5

text-decoration-color: #e9d083;

tdc-l-yellow-4

text-decoration-color: #e5c76a;

tdc-l-yellow-3

text-decoration-color: #e0bd51;

tdc-l-yellow-2

text-decoration-color: #dcb439;

tdc-l-yellow-1

text-decoration-color: #d7aa20;

tdc-yellow

text-decoration-color: #d3a107;

tdc-d-yellow-1

text-decoration-color: #be9106;

tdc-d-yellow-2

text-decoration-color: #a98106;

tdc-d-yellow-3

text-decoration-color: #947105;

tdc-d-yellow-4

text-decoration-color: #7f6104;

tdc-d-yellow-5

text-decoration-color: #6a5104;

tdc-d-yellow-6

text-decoration-color: #544003;

tdc-l-green-6

text-decoration-color: #a5e0bb;

tdc-l-green-5

text-decoration-color: #8fd8aa;

tdc-l-green-4

text-decoration-color: #79d099;

tdc-l-green-3

text-decoration-color: #62c888;

tdc-l-green-2

text-decoration-color: #4cc177;

tdc-l-green-1

text-decoration-color: #35b966;

tdc-green

text-decoration-color: #1fb155;

tdc-d-green-1

text-decoration-color: #1c9f4d;

tdc-d-green-2

text-decoration-color: #198e44;

tdc-d-green-3

text-decoration-color: #167c3c;

tdc-d-green-4

text-decoration-color: #136a33;

tdc-d-green-5

text-decoration-color: #10592b;

tdc-d-green-6

text-decoration-color: #0c4722;

tdc-l-teal-6

text-decoration-color: #a0dbd5;

tdc-l-teal-5

text-decoration-color: #89d3ca;

tdc-l-teal-4

text-decoration-color: #71cabf;

tdc-l-teal-3

text-decoration-color: #59c1b5;

tdc-l-teal-2

text-decoration-color: #41b8aa;

tdc-l-teal-1

text-decoration-color: #2aafa0;

tdc-teal

text-decoration-color: #12a695;

tdc-d-teal-1

text-decoration-color: #109586;

tdc-d-teal-2

text-decoration-color: #0e8577;

tdc-d-teal-3

text-decoration-color: #0d7468;

tdc-d-teal-4

text-decoration-color: #0b6459;

tdc-d-teal-5

text-decoration-color: #09534b;

tdc-d-teal-6

text-decoration-color: #07423c;

tdc-l-cyan-6

text-decoration-color: #9bdbe5;

tdc-l-cyan-5

text-decoration-color: #82d2df;

tdc-l-cyan-4

text-decoration-color: #69c8d9;

tdc-l-cyan-3

text-decoration-color: #50bfd2;

tdc-l-cyan-2

text-decoration-color: #37b6cc;

tdc-l-cyan-1

text-decoration-color: #1eadc5;

tdc-cyan

text-decoration-color: #05a4bf;

tdc-d-cyan-1

text-decoration-color: #0594ac;

tdc-d-cyan-2

text-decoration-color: #048399;

tdc-d-cyan-3

text-decoration-color: #047386;

tdc-d-cyan-4

text-decoration-color: #036273;

tdc-d-cyan-5

text-decoration-color: #035260;

tdc-d-cyan-6

text-decoration-color: #02424c;

tdc-l-blue-6

text-decoration-color: #aec8f1;

tdc-l-blue-5

text-decoration-color: #9abaee;

tdc-l-blue-4

text-decoration-color: #86aceb;

tdc-l-blue-3

text-decoration-color: #729ee7;

tdc-l-blue-2

text-decoration-color: #5d91e4;

tdc-l-blue-1

text-decoration-color: #4983e0;

tdc-blue

text-decoration-color: #3575dd;

tdc-d-blue-1

text-decoration-color: #3069c7;

tdc-d-blue-2

text-decoration-color: #2a5eb1;

tdc-d-blue-3

text-decoration-color: #25529b;

tdc-d-blue-4

text-decoration-color: #204685;

tdc-d-blue-5

text-decoration-color: #1b3b6f;

tdc-d-blue-6

text-decoration-color: #152f58;

tdc-l-indigo-6

text-decoration-color: #bdbef0;

tdc-l-indigo-5

text-decoration-color: #acaeec;

tdc-l-indigo-4

text-decoration-color: #9b9de8;

tdc-l-indigo-3

text-decoration-color: #8b8de4;

tdc-l-indigo-2

text-decoration-color: #7a7de1;

tdc-l-indigo-1

text-decoration-color: #6a6cdd;

tdc-indigo

text-decoration-color: #595cd9;

tdc-d-indigo-1

text-decoration-color: #5053c3;

tdc-d-indigo-2

text-decoration-color: #474aae;

tdc-d-indigo-3

text-decoration-color: #3e4098;

tdc-d-indigo-4

text-decoration-color: #353782;

tdc-d-indigo-5

text-decoration-color: #2d2e6d;

tdc-d-indigo-6

text-decoration-color: #242557;

tdc-l-violet-6

text-decoration-color: #cbbaf1;

tdc-l-violet-5

text-decoration-color: #bea9ee;

tdc-l-violet-4

text-decoration-color: #b198eb;

tdc-l-violet-3

text-decoration-color: #a487e7;

tdc-l-violet-2

text-decoration-color: #9775e4;

tdc-l-violet-1

text-decoration-color: #8a64e0;

tdc-violet

text-decoration-color: #7d53dd;

tdc-d-violet-1

text-decoration-color: #714bc7;

tdc-d-violet-2

text-decoration-color: #6442b1;

tdc-d-violet-3

text-decoration-color: #583a9b;

tdc-d-violet-4

text-decoration-color: #4b3285;

tdc-d-violet-5

text-decoration-color: #3f2a6f;

tdc-d-violet-6

text-decoration-color: #322158;

tdc-l-pink-6

text-decoration-color: #eeb3d0;

tdc-l-pink-5

text-decoration-color: #eaa0c5;

tdc-l-pink-4

text-decoration-color: #e58db9;

tdc-l-pink-3

text-decoration-color: #e17aad;

tdc-l-pink-2

text-decoration-color: #dd67a1;

tdc-l-pink-1

text-decoration-color: #d85496;

tdc-pink

text-decoration-color: #d4418a;

tdc-d-pink-1

text-decoration-color: #bf3b7c;

tdc-d-pink-2

text-decoration-color: #aa346e;

tdc-d-pink-3

text-decoration-color: #942e61;

tdc-d-pink-4

text-decoration-color: #7f2753;

tdc-d-pink-5

text-decoration-color: #6a2145;

tdc-d-pink-6

text-decoration-color: #551a37;

tdc-l-gray-6

text-decoration-color: #bfc2c7;

tdc-l-gray-5

text-decoration-color: #b0b3b9;

tdc-l-gray-4

text-decoration-color: #a0a4ab;

tdc-l-gray-3

text-decoration-color: #90959d;

tdc-l-gray-2

text-decoration-color: #80858f;

tdc-l-gray-1

text-decoration-color: #707681;

tdc-gray

text-decoration-color: #606773;

tdc-d-gray-1

text-decoration-color: #565d68;

tdc-d-gray-2

text-decoration-color: #4d525c;

tdc-d-gray-3

text-decoration-color: #434851;

tdc-d-gray-4

text-decoration-color: #3a3e45;

tdc-d-gray-5

text-decoration-color: #30343a;

tdc-d-gray-6

text-decoration-color: #26292e;

tdc-l-lead-6

text-decoration-color: #b2b2b8;

tdc-l-lead-5

text-decoration-color: #9f9fa7;

tdc-l-lead-4

text-decoration-color: #8c8c95;

tdc-l-lead-3

text-decoration-color: #797983;

tdc-l-lead-2

text-decoration-color: #656571;

tdc-l-lead-1

text-decoration-color: #525260;

tdc-lead

text-decoration-color: #3f3f4e;

tdc-d-lead-1

text-decoration-color: #393946;

tdc-d-lead-2

text-decoration-color: #32323e;

tdc-d-lead-3

text-decoration-color: #2c2c37;

tdc-d-lead-4

text-decoration-color: #26262f;

tdc-d-lead-5

text-decoration-color: #202027;

tdc-d-lead-6

text-decoration-color: #19191f;

tdc-l-silver-6

text-decoration-color: #e5e7e9;

tdc-l-silver-5

text-decoration-color: #dfe1e3;

tdc-l-silver-4

text-decoration-color: #d9dadd;

tdc-l-silver-3

text-decoration-color: #d2d4d8;

tdc-l-silver-2

text-decoration-color: #ccced2;

tdc-l-silver-1

text-decoration-color: #c5c8cd;

tdc-silver

text-decoration-color: #bfc2c7;

tdc-d-silver-1

text-decoration-color: #acafb3;

tdc-d-silver-2

text-decoration-color: #999b9f;

tdc-d-silver-3

text-decoration-color: #86888b;

tdc-d-silver-4

text-decoration-color: #737477;

tdc-d-silver-5

text-decoration-color: #606164;

tdc-d-silver-6

text-decoration-color: #4c4e50;

This example showcases various text decoration colors using the indigo color palette:

  • The tdc-l-indigo-4 utility applies a lighter indigo shade.
  • The tdc-indigo utility applies the base indigo shade.
  • The tdc-d-indigo-2 utility applies a darker indigo 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-l-indigo-6 p-4 rad-1">
<div class="bg-white p-4 rad-1 ta-j tc-lead">
The <span class="h:bg-l-yellow-6 tdc-yellow tdl-u tdt-2">quicks</span> brown fox jumps over the lazy dog, and the dog barks loudly.
<span class="h:bg-l-teal-6 tdc-teal tdl-u tdt-2">However</span>, the fox doesn't seem to mind. It continues to run
<span class="h:bg-l-teal-6 tdc-teal tdl-u tdt-2">swiftly</span>, while the dog chases after it. In the end, the fox
<span class="h:bg-l-red-6 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>