ColorsAccent Color
Yumma CSS 3.5 is live! 🎉

Accent Color

Controls form control accent color.

Limited availability

This feature does not work in some of the most widely-used browsers.

Chrome
Edge
Firefox
Safari
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.

Targeting different viewports

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

Targeting hover states

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