ColorsAccent Color
Yumma CSS 3.5 is live! 🎉

Accent Color

Controls form control accent color.

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

This example showcases the default browser accent color and a custom indigo color from the default color palette.

<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>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:ac-*, md:ac-*, lg:ac-*, and xxl:ac-* to allow targeting specific utilities in different viewports.

Using hover states

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