Text Decoration Color

Set the color for text decorations.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

tdc:red-1

text-decoration-color: #fbdfe1;

tdc:red-2

text-decoration-color: #f8c4c8;

tdc:red-3

text-decoration-color: #f4a8ae;

tdc:red-4

text-decoration-color: #f18c94;

tdc:red-5

text-decoration-color: #ed707a;

tdc:red-6

text-decoration-color: #ea5560;

tdc:red

text-decoration-color: #e63946;

tdc:red-7

text-decoration-color: #c6313c;

tdc:red-8

text-decoration-color: #a62932;

tdc:red-9

text-decoration-color: #852129;

tdc:red-10

text-decoration-color: #65191f;

tdc:red-11

text-decoration-color: #451115;

tdc:red-12

text-decoration-color: #25090b;

tdc:orange-1

text-decoration-color: #ffe7df;

tdc:orange-2

text-decoration-color: #ffd3c2;

tdc:orange-3

text-decoration-color: #ffbea6;

tdc:orange-4

text-decoration-color: #ffa98a;

tdc:orange-5

text-decoration-color: #ff946e;

tdc:orange-6

text-decoration-color: #ff8051;

tdc:orange

text-decoration-color: #ff6b35;

tdc:orange-7

text-decoration-color: #db5c2e;

tdc:orange-8

text-decoration-color: #b84d26;

tdc:orange-9

text-decoration-color: #943e1f;

tdc:orange-10

text-decoration-color: #702f17;

tdc:orange-11

text-decoration-color: #4d2010;

tdc:orange-12

text-decoration-color: #291108;

tdc:yellow-1

text-decoration-color: #fff4db;

tdc:yellow-2

text-decoration-color: #ffeabb;

tdc:yellow-3

text-decoration-color: #ffe09b;

tdc:yellow-4

text-decoration-color: #ffd67b;

tdc:yellow-5

text-decoration-color: #ffcc5c;

tdc:yellow-6

text-decoration-color: #ffc23c;

tdc:yellow

text-decoration-color: #ffb81c;

tdc:yellow-7

text-decoration-color: #db9e18;

tdc:yellow-8

text-decoration-color: #b88414;

tdc:yellow-9

text-decoration-color: #946b10;

tdc:yellow-10

text-decoration-color: #70510c;

tdc:yellow-11

text-decoration-color: #4d3708;

tdc:yellow-12

text-decoration-color: #291d04;

tdc:lime-1

text-decoration-color: #ebf7da;

tdc:lime-2

text-decoration-color: #daf0b9;

tdc:lime-3

text-decoration-color: #c9e998;

tdc:lime-4

text-decoration-color: #b8e178;

tdc:lime-5

text-decoration-color: #a6da57;

tdc:lime-6

text-decoration-color: #95d337;

tdc:lime

text-decoration-color: #84cc16;

tdc:lime-7

text-decoration-color: #72af13;

tdc:lime-8

text-decoration-color: #5f9310;

tdc:lime-9

text-decoration-color: #4d760d;

tdc:lime-10

text-decoration-color: #3a5a0a;

tdc:lime-11

text-decoration-color: #283d07;

tdc:lime-12

text-decoration-color: #152104;

tdc:mint-1

text-decoration-color: #d9f4eb;

tdc:mint-2

text-decoration-color: #b7ead9;

tdc:mint-3

text-decoration-color: #96e0c8;

tdc:mint-4

text-decoration-color: #74d6b6;

tdc:mint-5

text-decoration-color: #53cda4;

tdc:mint-6

text-decoration-color: #31c393;

tdc:mint

text-decoration-color: #10b981;

tdc:mint-7

text-decoration-color: #0e9f6f;

tdc:mint-8

text-decoration-color: #0c855d;

tdc:mint-9

text-decoration-color: #096b4b;

tdc:mint-10

text-decoration-color: #075139;

tdc:mint-11

text-decoration-color: #053827;

tdc:mint-12

text-decoration-color: #031e15;

tdc:green-1

text-decoration-color: #d7f8f0;

tdc:green-2

text-decoration-color: #b4f3e3;

tdc:green-3

text-decoration-color: #91edd5;

tdc:green-4

text-decoration-color: #6fe7c8;

tdc:green-5

text-decoration-color: #4ce1bb;

tdc:green-6

text-decoration-color: #29dcad;

tdc:green

text-decoration-color: #06d6a0;

tdc:green-7

text-decoration-color: #05b88a;

tdc:green-8

text-decoration-color: #049a73;

tdc:green-9

text-decoration-color: #037c5d;

tdc:green-10

text-decoration-color: #035e46;

tdc:green-11

text-decoration-color: #024030;

tdc:green-12

text-decoration-color: #01221a;

tdc:cyan-1

text-decoration-color: #d7f3f8;

tdc:cyan-2

text-decoration-color: #b4e9f2;

tdc:cyan-3

text-decoration-color: #91dfec;

tdc:cyan-4

text-decoration-color: #6fd5e6;

tdc:cyan-5

text-decoration-color: #4ccae0;

tdc:cyan-6

text-decoration-color: #29c0da;

tdc:cyan

text-decoration-color: #06b6d4;

tdc:cyan-7

text-decoration-color: #059db6;

tdc:cyan-8

text-decoration-color: #048399;

tdc:cyan-9

text-decoration-color: #036a7b;

tdc:cyan-10

text-decoration-color: #03505d;

tdc:cyan-11

text-decoration-color: #023740;

tdc:cyan-12

text-decoration-color: #011d22;

tdc:sky-1

text-decoration-color: #dff4fe;

tdc:sky-2

text-decoration-color: #c3ebfd;

tdc:sky-3

text-decoration-color: #a7e2fc;

tdc:sky-4

text-decoration-color: #8cd9fb;

tdc:sky-5

text-decoration-color: #70cffa;

tdc:sky-6

text-decoration-color: #54c6f9;

tdc:sky

text-decoration-color: #38bdf8;

tdc:sky-7

text-decoration-color: #30a3d5;

tdc:sky-8

text-decoration-color: #2888b3;

tdc:sky-9

text-decoration-color: #206e90;

tdc:sky-10

text-decoration-color: #19536d;

tdc:sky-11

text-decoration-color: #11394a;

tdc:sky-12

text-decoration-color: #091e28;

tdc:blue-1

text-decoration-color: #dce6fc;

tdc:blue-2

text-decoration-color: #bed0f9;

tdc:blue-3

text-decoration-color: #9fbaf6;

tdc:blue-4

text-decoration-color: #81a5f3;

tdc:blue-5

text-decoration-color: #628ff1;

tdc:blue-6

text-decoration-color: #4479ee;

tdc:blue

text-decoration-color: #2563eb;

tdc:blue-7

text-decoration-color: #2055ca;

tdc:blue-8

text-decoration-color: #1b47a9;

tdc:blue-9

text-decoration-color: #153988;

tdc:blue-10

text-decoration-color: #102c67;

tdc:blue-11

text-decoration-color: #0b1e47;

tdc:blue-12

text-decoration-color: #061026;

tdc:indigo-1

text-decoration-color: #e6e7fd;

tdc:indigo-2

text-decoration-color: #d0d1fb;

tdc:indigo-3

text-decoration-color: #babcf9;

tdc:indigo-4

text-decoration-color: #a5a6f7;

tdc:indigo-5

text-decoration-color: #8f91f5;

tdc:indigo-6

text-decoration-color: #797bf3;

tdc:indigo

text-decoration-color: #6366f1;

tdc:indigo-7

text-decoration-color: #5558cf;

tdc:indigo-8

text-decoration-color: #4749ae;

tdc:indigo-9

text-decoration-color: #393b8c;

tdc:indigo-10

text-decoration-color: #2c2d6a;

tdc:indigo-11

text-decoration-color: #1e1f48;

tdc:indigo-12

text-decoration-color: #101027;

tdc:violet-1

text-decoration-color: #ece5fe;

tdc:violet-2

text-decoration-color: #dccefc;

tdc:violet-3

text-decoration-color: #ccb7fb;

tdc:violet-4

text-decoration-color: #bca0fa;

tdc:violet-5

text-decoration-color: #ab8af9;

tdc:violet-6

text-decoration-color: #9b73f7;

tdc:violet

text-decoration-color: #8b5cf6;

tdc:violet-7

text-decoration-color: #784fd4;

tdc:violet-8

text-decoration-color: #6442b1;

tdc:violet-9

text-decoration-color: #51358f;

tdc:violet-10

text-decoration-color: #3d286c;

tdc:violet-11

text-decoration-color: #2a1c4a;

tdc:violet-12

text-decoration-color: #160f27;

tdc:lavender-1

text-decoration-color: #f1ecfe;

tdc:lavender-2

text-decoration-color: #e5dcfe;

tdc:lavender-3

text-decoration-color: #d8ccfd;

tdc:lavender-4

text-decoration-color: #ccbcfc;

tdc:lavender-5

text-decoration-color: #c0abfb;

tdc:lavender-6

text-decoration-color: #b39bfb;

tdc:lavender

text-decoration-color: #a78bfa;

tdc:lavender-7

text-decoration-color: #9078d7;

tdc:lavender-8

text-decoration-color: #7864b4;

tdc:lavender-9

text-decoration-color: #615191;

tdc:lavender-10

text-decoration-color: #493d6e;

tdc:lavender-11

text-decoration-color: #322a4b;

tdc:lavender-12

text-decoration-color: #1b1628;

tdc:magenta-1

text-decoration-color: #f9e1fc;

tdc:magenta-2

text-decoration-color: #f4c8fa;

tdc:magenta-3

text-decoration-color: #eeaef8;

tdc:magenta-4

text-decoration-color: #e994f6;

tdc:magenta-5

text-decoration-color: #e47af3;

tdc:magenta-6

text-decoration-color: #de60f1;

tdc:magenta

text-decoration-color: #d946ef;

tdc:magenta-7

text-decoration-color: #bb3cce;

tdc:magenta-8

text-decoration-color: #9c32ac;

tdc:magenta-9

text-decoration-color: #7e298b;

tdc:magenta-10

text-decoration-color: #5f1f69;

tdc:magenta-11

text-decoration-color: #411548;

tdc:magenta-12

text-decoration-color: #230b26;

tdc:pink-1

text-decoration-color: #fce2ef;

tdc:pink-2

text-decoration-color: #f9c8e0;

tdc:pink-3

text-decoration-color: #f7aed2;

tdc:pink-4

text-decoration-color: #f495c4;

tdc:pink-5

text-decoration-color: #f17bb6;

tdc:pink-6

text-decoration-color: #ef62a7;

tdc:pink

text-decoration-color: #ec4899;

tdc:pink-7

text-decoration-color: #cb3e84;

tdc:pink-8

text-decoration-color: #aa346e;

tdc:pink-9

text-decoration-color: #892a59;

tdc:pink-10

text-decoration-color: #682043;

tdc:pink-11

text-decoration-color: #47162e;

tdc:pink-12

text-decoration-color: #260c18;

tdc:coral-1

text-decoration-color: #ffe8ed;

tdc:coral-2

text-decoration-color: #ffd4de;

tdc:coral-3

text-decoration-color: #ffc0cf;

tdc:coral-4

text-decoration-color: #ffabbf;

tdc:coral-5

text-decoration-color: #ff97b0;

tdc:coral-6

text-decoration-color: #ff83a0;

tdc:coral

text-decoration-color: #ff6f91;

tdc:coral-7

text-decoration-color: #db5f7d;

tdc:coral-8

text-decoration-color: #b85068;

tdc:coral-9

text-decoration-color: #944054;

tdc:coral-10

text-decoration-color: #703140;

tdc:coral-11

text-decoration-color: #4d212c;

tdc:coral-12

text-decoration-color: #291217;

tdc:zinc-1

text-decoration-color: #e3e3e5;

tdc:zinc-2

text-decoration-color: #cbcbce;

tdc:zinc-3

text-decoration-color: #b3b3b7;

tdc:zinc-4

text-decoration-color: #9b9ba0;

tdc:zinc-5

text-decoration-color: #828289;

tdc:zinc-6

text-decoration-color: #6a6a72;

tdc:zinc

text-decoration-color: #52525b;

tdc:zinc-7

text-decoration-color: #47474e;

tdc:zinc-8

text-decoration-color: #3b3b42;

tdc:zinc-9

text-decoration-color: #303035;

tdc:zinc-10

text-decoration-color: #242428;

tdc:zinc-11

text-decoration-color: #19191b;

tdc:zinc-12

text-decoration-color: #0d0d0f;

tdc:gray-1

text-decoration-color: #e7e8eb;

tdc:gray-2

text-decoration-color: #d3d5d9;

tdc:gray-3

text-decoration-color: #bec1c7;

tdc:gray-4

text-decoration-color: #a9adb5;

tdc:gray-5

text-decoration-color: #9499a4;

tdc:gray-6

text-decoration-color: #808692;

tdc:gray

text-decoration-color: #6b7280;

tdc:gray-7

text-decoration-color: #5c626e;

tdc:gray-8

text-decoration-color: #4d525c;

tdc:gray-9

text-decoration-color: #3e424a;

tdc:gray-10

text-decoration-color: #2f3238;

tdc:gray-11

text-decoration-color: #202226;

tdc:gray-12

text-decoration-color: #111214;

tdc:slate-1

text-decoration-color: #e6e9ec;

tdc:slate-2

text-decoration-color: #d1d5dc;

tdc:slate-3

text-decoration-color: #bbc2cc;

tdc:slate-4

text-decoration-color: #a5aebc;

tdc:slate-5

text-decoration-color: #8f9bab;

tdc:slate-6

text-decoration-color: #7a879b;

tdc:slate

text-decoration-color: #64748b;

tdc:slate-7

text-decoration-color: #566478;

tdc:slate-8

text-decoration-color: #485464;

tdc:slate-9

text-decoration-color: #3a4351;

tdc:slate-10

text-decoration-color: #2c333d;

tdc:slate-11

text-decoration-color: #1e232a;

tdc:slate-12

text-decoration-color: #101316;

tdc:silver-1

text-decoration-color: #eff0f2;

tdc:silver-2

text-decoration-color: #e1e3e7;

tdc:silver-3

text-decoration-color: #d3d7dc;

tdc:silver-4

text-decoration-color: #c6cad1;

tdc:silver-5

text-decoration-color: #b8bdc5;

tdc:silver-6

text-decoration-color: #aab0ba;

tdc:silver

text-decoration-color: #9ca3af;

tdc:silver-7

text-decoration-color: #868c97;

tdc:silver-8

text-decoration-color: #70757e;

tdc:silver-9

text-decoration-color: #5a5f66;

tdc:silver-10

text-decoration-color: #45484d;

tdc:silver-11

text-decoration-color: #2f3135;

tdc:silver-12

text-decoration-color: #191a1c;

tdc:black

text-decoration-color: #000000;

tdc:current

text-decoration-color: currentColor;

tdc:transparent

text-decoration-color: transparent;

tdc:white

text-decoration-color: #ffffff;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

Opacity Modifiers

Adjust color transparency by appending an opacity suffix.

Text Decoration Color

Widely available

tdc:red-1, tdc:red-2, tdc:red-3, …251 utilities

Media Queries

@pc:tdc:indigo-8, @prm:tdc:indigo-8, @xs:tdc:indigo-8, …8 media queries

Pseudo Classes

a:tdc:indigo-8, c:tdc:indigo-8, d:tdc:indigo-8, …16 pseudo classes

Opacity Modifiers

tdc:indigo-8/0 … tdc:indigo-8/9520 steps