Accent Color

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

This example showcases the default browser accent color and a custom Indigo color. The custom accent will have a light indigo shade.

Default Custom

<div class="d-g g-8 gtc-1 sm:gtc-2">
  <label><input class="mr-1" type="checkbox" checked />Default </label>
  <label><input class="ac-indigo-2 mr-1" type="checkbox" checked />Custom</label>
</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:ac-* utility to override elements and change their values when hovering over them.

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