Color

Class	Style
tc-red-1	color: #f9e0e0;
tc-red-2	color: #f3c5c5;
tc-red-3	color: #edaaaa;
tc-red-4	color: #e88e8e;
tc-red-5	color: #e27373;
tc-red-6	color: #dd5858;
tc-red	color: #d73d3d;
tc-red-7	color: #b93434;
tc-red-8	color: #9b2c2c;
tc-red-9	color: #7d2323;
tc-red-10	color: #5f1b1b;
tc-red-11	color: #411212;
tc-red-12	color: #220a0a;
tc-orange-1	color: #fae7d9;
tc-orange-2	color: #f6d2b9;
tc-orange-3	color: #f1bd98;
tc-orange-4	color: #eda777;
tc-orange-5	color: #e99256;
tc-orange-6	color: #e47d35;
tc-orange	color: #e06814;
tc-orange-7	color: #c15911;
tc-orange-8	color: #a14b0e;
tc-orange-9	color: #823c0c;
tc-orange-10	color: #632e09;
tc-orange-11	color: #431f06;
tc-orange-12	color: #241103;
tc-yellow-1	color: #f8f0d7;
tc-yellow-2	color: #f2e3b5;
tc-yellow-3	color: #ecd692;
tc-yellow-4	color: #e5c86f;
tc-yellow-5	color: #dfbb4c;
tc-yellow-6	color: #d9ae2a;
tc-yellow	color: #d3a107;
tc-yellow-7	color: #b58a06;
tc-yellow-8	color: #987405;
tc-yellow-9	color: #7a5d04;
tc-yellow-10	color: #5d4703;
tc-yellow-11	color: #3f3002;
tc-yellow-12	color: #221a01;
tc-green-1	color: #dbf3e4;
tc-green-2	color: #bce8cc;
tc-green-3	color: #9cddb4;
tc-green-4	color: #7dd29c;
tc-green-5	color: #5ec785;
tc-green-6	color: #3ebc6d;
tc-green	color: #1fb155;
tc-green-7	color: #1b9849;
tc-green-8	color: #167f3d;
tc-green-9	color: #126731;
tc-green-10	color: #0e4e25;
tc-green-11	color: #09351a;
tc-green-12	color: #051c0e;
tc-teal-1	color: #d9f1ee;
tc-teal-2	color: #b8e4df;
tc-teal-3	color: #97d8d0;
tc-teal-4	color: #76cbc2;
tc-teal-5	color: #54bfb3;
tc-teal-6	color: #33b2a4;
tc-teal	color: #12a695;
tc-teal-7	color: #0f8f80;
tc-teal-8	color: #0d786b;
tc-teal-9	color: #0a6056;
tc-teal-10	color: #084942;
tc-teal-11	color: #05322d;
tc-teal-12	color: #031b18;
tc-cyan-1	color: #d7f0f5;
tc-cyan-2	color: #b4e4ec;
tc-cyan-3	color: #91d7e3;
tc-cyan-4	color: #6ecada;
tc-cyan-5	color: #4bbdd1;
tc-cyan-6	color: #28b1c8;
tc-cyan	color: #05a4bf;
tc-cyan-7	color: #048da4;
tc-cyan-8	color: #04768a;
tc-cyan-9	color: #035f6f;
tc-cyan-10	color: #024854;
tc-cyan-11	color: #023139;
tc-cyan-12	color: #011a1f;
tc-blue-1	color: #dfe9fa;
tc-blue-2	color: #c2d6f5;
tc-blue-3	color: #a6c2f0;
tc-blue-4	color: #8aafeb;
tc-blue-5	color: #6e9ce7;
tc-blue-6	color: #5188e2;
tc-blue	color: #3575dd;
tc-blue-7	color: #2e65be;
tc-blue-8	color: #26549f;
tc-blue-9	color: #1f4480;
tc-blue-10	color: #173361;
tc-blue-11	color: #102342;
tc-blue-12	color: #081323;
tc-indigo-1	color: #e4e5f9;
tc-indigo-2	color: #cdcef4;
tc-indigo-3	color: #b6b7ee;
tc-indigo-4	color: #9fa0e9;
tc-indigo-5	color: #878ae4;
tc-indigo-6	color: #7073de;
tc-indigo	color: #595cd9;
tc-indigo-7	color: #4d4fbb;
tc-indigo-8	color: #40429c;
tc-indigo-9	color: #34357e;
tc-indigo-10	color: #27285f;
tc-indigo-11	color: #1b1c41;
tc-indigo-12	color: #0e0f23;
tc-violet-1	color: #eae3fa;
tc-violet-2	color: #d8cbf5;
tc-violet-3	color: #c6b3f0;
tc-violet-4	color: #b49beb;
tc-violet-5	color: #a183e7;
tc-violet-6	color: #8f6be2;
tc-violet	color: #7d53dd;
tc-violet-7	color: #6c47be;
tc-violet-8	color: #5a3c9f;
tc-violet-9	color: #493080;
tc-violet-10	color: #372561;
tc-violet-11	color: #261942;
tc-violet-12	color: #140d23;
tc-pink-1	color: #f8e1ec;
tc-pink-2	color: #f2c6dc;
tc-pink-3	color: #ecabcc;
tc-pink-4	color: #e691bb;
tc-pink-5	color: #e076ab;
tc-pink-6	color: #da5c9a;
tc-pink	color: #d4418a;
tc-pink-7	color: #b63877;
tc-pink-8	color: #992f63;
tc-pink-9	color: #7b2650;
tc-pink-10	color: #5d1d3d;
tc-pink-11	color: #401429;
tc-pink-12	color: #220a16;
tc-slate-1	color: #e0e0e3;
tc-slate-2	color: #c5c5ca;
tc-slate-3	color: #ababb1;
tc-slate-4	color: #909098;
tc-slate-5	color: #757580;
tc-slate-6	color: #5a5a67;
tc-slate	color: #3f3f4e;
tc-slate-7	color: #363643;
tc-slate-8	color: #2d2d38;
tc-slate-9	color: #25252d;
tc-slate-10	color: #1c1c22;
tc-slate-11	color: #131317;
tc-slate-12	color: #0a0a0c;
tc-gray-1	color: #e6e7e9;
tc-gray-2	color: #cfd1d5;
tc-gray-3	color: #b9bcc1;
tc-gray-4	color: #a3a7ae;
tc-gray-5	color: #8d929a;
tc-gray-6	color: #767c87;
tc-gray	color: #606773;
tc-gray-7	color: #535963;
tc-gray-8	color: #454a53;
tc-gray-9	color: #383c43;
tc-gray-10	color: #2a2d33;
tc-gray-11	color: #1d1f23;
tc-gray-12	color: #0f1012;
tc-silver-1	color: #f5f5f6;
tc-silver-2	color: #ecedee;
tc-silver-3	color: #e3e4e6;
tc-silver-4	color: #dadcdf;
tc-silver-5	color: #d1d3d7;
tc-silver-6	color: #c8cbcf;
tc-silver	color: #bfc2c7;
tc-silver-7	color: #a4a7ab;
tc-silver-8	color: #8a8c8f;
tc-silver-9	color: #6f7173;
tc-silver-10	color: #545558;
tc-silver-11	color: #393a3c;
tc-silver-12	color: #1f1f20;
tc-black	color: black;
tc-white	color: white;
tc-transparent	color: transparent;
tc-current	color: currentColor;

This example showcases various color utilities using the indigo colors from the default color palette.

• The tc-indigo-3 utility applies a lighter indigo shade.
• The tc-indigo utility applies the base indigo shade.
• The tc-indigo-8 utility applies a darker indigo shade.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="bg-white d-g p-4 rad-1 rg-4">
    <p class="ta-c tc-indigo-3">Sphinx of black quartz, judge my vow.</p>
    <p class="ta-c tc-indigo">Sphinx of black quartz, judge my vow.</p>
    <p class="ta-c tc-indigo-8">Sphinx of black quartz, judge my vow.</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 variant

Alternatively, you can apply :hover by using h:tc-* utility to override elements and change their values when hovering over them.

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