ColorsAccent Color
Yumma CSS 3.7 🎉

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 silver color from the default color palette.

<div class="d-g g-8 gtc-1 sm:gtc-2">
  <label class="c-slate"><input class="mr-1" type="checkbox" checked />Default </label>
  <label class="c-slate"><input class="ac-silver-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.

Targeting with opacity

You can also control the opacity of colors using opacity modifiers with ac-* syntax, where * represents the opacity value (e.g., ac-*/25, ac-*/50, ac-*/75, ac-*/100) to create semi-transparent versions of the base color.