Text Color

Controls the text color of an element.

Class	Properties	Color
tc-l-red-6	color: #efb1b1;
tc-l-red-5	color: #eb9e9e;
tc-l-red-4	color: #e78b8b;
tc-l-red-3	color: #e37777;
tc-l-red-2	color: #df6464;
tc-l-red-1	color: #db5050;
tc-red	color: #d73d3d;
tc-d-red-1	color: #c23737;
tc-d-red-2	color: #ac3131;
tc-d-red-3	color: #972b2b;
tc-d-red-4	color: #812525;
tc-d-red-5	color: #6c1f1f;
tc-d-red-6	color: #561818;
tc-l-orange-6	color: #f3c3a1;
tc-l-orange-5	color: #f0b48a;
tc-l-orange-4	color: #eca472;
tc-l-orange-3	color: #e9955b;
tc-l-orange-2	color: #e68643;
tc-l-orange-1	color: #e3772c;
tc-orange	color: #e06814;
tc-d-orange-1	color: #ca5e12;
tc-d-orange-2	color: #b35310;
tc-d-orange-3	color: #9d490e;
tc-d-orange-4	color: #863e0c;
tc-d-orange-5	color: #70340a;
tc-d-orange-6	color: #5a2a08;
tc-l-yellow-6	color: #edd99c;
tc-l-yellow-5	color: #e9d083;
tc-l-yellow-4	color: #e5c76a;
tc-l-yellow-3	color: #e0bd51;
tc-l-yellow-2	color: #dcb439;
tc-l-yellow-1	color: #d7aa20;
tc-yellow	color: #d3a107;
tc-d-yellow-1	color: #be9106;
tc-d-yellow-2	color: #a98106;
tc-d-yellow-3	color: #947105;
tc-d-yellow-4	color: #7f6104;
tc-d-yellow-5	color: #6a5104;
tc-d-yellow-6	color: #544003;
tc-l-green-6	color: #a5e0bb;
tc-l-green-5	color: #8fd8aa;
tc-l-green-4	color: #79d099;
tc-l-green-3	color: #62c888;
tc-l-green-2	color: #4cc177;
tc-l-green-1	color: #35b966;
tc-green	color: #1fb155;
tc-d-green-1	color: #1c9f4d;
tc-d-green-2	color: #198e44;
tc-d-green-3	color: #167c3c;
tc-d-green-4	color: #136a33;
tc-d-green-5	color: #10592b;
tc-d-green-6	color: #0c4722;
tc-l-teal-6	color: #a0dbd5;
tc-l-teal-5	color: #89d3ca;
tc-l-teal-4	color: #71cabf;
tc-l-teal-3	color: #59c1b5;
tc-l-teal-2	color: #41b8aa;
tc-l-teal-1	color: #2aafa0;
tc-teal	color: #12a695;
tc-d-teal-1	color: #109586;
tc-d-teal-2	color: #0e8577;
tc-d-teal-3	color: #0d7468;
tc-d-teal-4	color: #0b6459;
tc-d-teal-5	color: #09534b;
tc-d-teal-6	color: #07423c;
tc-l-cyan-6	color: #9bdbe5;
tc-l-cyan-5	color: #82d2df;
tc-l-cyan-4	color: #69c8d9;
tc-l-cyan-3	color: #50bfd2;
tc-l-cyan-2	color: #37b6cc;
tc-l-cyan-1	color: #1eadc5;
tc-cyan	color: #05a4bf;
tc-d-cyan-1	color: #0594ac;
tc-d-cyan-2	color: #048399;
tc-d-cyan-3	color: #047386;
tc-d-cyan-4	color: #036273;
tc-d-cyan-5	color: #035260;
tc-d-cyan-6	color: #02424c;
tc-l-blue-6	color: #aec8f1;
tc-l-blue-5	color: #9abaee;
tc-l-blue-4	color: #86aceb;
tc-l-blue-3	color: #729ee7;
tc-l-blue-2	color: #5d91e4;
tc-l-blue-1	color: #4983e0;
tc-blue	color: #3575dd;
tc-d-blue-1	color: #3069c7;
tc-d-blue-2	color: #2a5eb1;
tc-d-blue-3	color: #25529b;
tc-d-blue-4	color: #204685;
tc-d-blue-5	color: #1b3b6f;
tc-d-blue-6	color: #152f58;
tc-l-indigo-6	color: #bdbef0;
tc-l-indigo-5	color: #acaeec;
tc-l-indigo-4	color: #9b9de8;
tc-l-indigo-3	color: #8b8de4;
tc-l-indigo-2	color: #7a7de1;
tc-l-indigo-1	color: #6a6cdd;
tc-indigo	color: #595cd9;
tc-d-indigo-1	color: #5053c3;
tc-d-indigo-2	color: #474aae;
tc-d-indigo-3	color: #3e4098;
tc-d-indigo-4	color: #353782;
tc-d-indigo-5	color: #2d2e6d;
tc-d-indigo-6	color: #242557;
tc-l-violet-6	color: #cbbaf1;
tc-l-violet-5	color: #bea9ee;
tc-l-violet-4	color: #b198eb;
tc-l-violet-3	color: #a487e7;
tc-l-violet-2	color: #9775e4;
tc-l-violet-1	color: #8a64e0;
tc-violet	color: #7d53dd;
tc-d-violet-1	color: #714bc7;
tc-d-violet-2	color: #6442b1;
tc-d-violet-3	color: #583a9b;
tc-d-violet-4	color: #4b3285;
tc-d-violet-5	color: #3f2a6f;
tc-d-violet-6	color: #322158;
tc-l-pink-6	color: #eeb3d0;
tc-l-pink-5	color: #eaa0c5;
tc-l-pink-4	color: #e58db9;
tc-l-pink-3	color: #e17aad;
tc-l-pink-2	color: #dd67a1;
tc-l-pink-1	color: #d85496;
tc-pink	color: #d4418a;
tc-d-pink-1	color: #bf3b7c;
tc-d-pink-2	color: #aa346e;
tc-d-pink-3	color: #942e61;
tc-d-pink-4	color: #7f2753;
tc-d-pink-5	color: #6a2145;
tc-d-pink-6	color: #551a37;
tc-l-gray-6	color: #bfc2c7;
tc-l-gray-5	color: #b0b3b9;
tc-l-gray-4	color: #a0a4ab;
tc-l-gray-3	color: #90959d;
tc-l-gray-2	color: #80858f;
tc-l-gray-1	color: #707681;
tc-gray	color: #606773;
tc-d-gray-1	color: #565d68;
tc-d-gray-2	color: #4d525c;
tc-d-gray-3	color: #434851;
tc-d-gray-4	color: #3a3e45;
tc-d-gray-5	color: #30343a;
tc-d-gray-6	color: #26292e;
tc-l-lead-6	color: #b2b2b8;
tc-l-lead-5	color: #9f9fa7;
tc-l-lead-4	color: #8c8c95;
tc-l-lead-3	color: #797983;
tc-l-lead-2	color: #656571;
tc-l-lead-1	color: #525260;
tc-lead	color: #3f3f4e;
tc-d-lead-1	color: #393946;
tc-d-lead-2	color: #32323e;
tc-d-lead-3	color: #2c2c37;
tc-d-lead-4	color: #26262f;
tc-d-lead-5	color: #202027;
tc-d-lead-6	color: #19191f;
tc-l-silver-6	color: #e5e7e9;
tc-l-silver-5	color: #dfe1e3;
tc-l-silver-4	color: #d9dadd;
tc-l-silver-3	color: #d2d4d8;
tc-l-silver-2	color: #ccced2;
tc-l-silver-1	color: #c5c8cd;
tc-silver	color: #bfc2c7;
tc-d-silver-1	color: #acafb3;
tc-d-silver-2	color: #999b9f;
tc-d-silver-3	color: #86888b;
tc-d-silver-4	color: #737477;
tc-d-silver-5	color: #606164;
tc-d-silver-6	color: #4c4e50;

---

Using variants

The :hover variant, such as h:tc-*, allows you to modify text colors when hovering over elements.

<h3 class="tc-lead h:tc-pink ...">
  The quick brown fox jumps over the lazy dog.
</h3>