Accent Color

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

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-l-indigo-4 mr-1" type="checkbox" checked />Custom</label>
</div>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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

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