Text Color

Class	Properties
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;

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

• The tc-l-indigo-4 utility applies a lighter indigo shade.
• The tc-indigo utility applies the base indigo shade.
• The tc-d-indigo-2 utility applies a darker indigo shade.

Try writing a sentence to see the caret color.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <div class="bg-white d-g p-4 rad-1 rg-4">
    <p class="ta-c tc-l-indigo-4">The quick brown fox jumps over the lazy dog.</p>
    <p class="ta-c tc-indigo">The quick brown fox jumps over the lazy dog.</p>
    <p class="ta-c tc-d-indigo-2">The quick brown fox jumps over the lazy dog.</p>
  </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:tc-* utility to override elements and change their values when hovering over them.

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