Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
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>