Caret Color

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

This example showcases default and custom caret color utilities. The custom caret-color will have an indigo color from the default color palette.

Try writing a sentence to see the caret color.

Default

Custom

<div class="d-g g-16 gtc-1 sm:gtc-2">
  <div class="d-g">
    <label class="fw-600">Default</label>
    <input class="b-1 bc-silver p-1 rad-1" placeholder="Type something..." />
  </div>

  <div class="d-g">
    <label class="fw-600">Custom</label>
    <input class="b-1 bc-silver cc-indigo p-1 rad-1 " placeholder="Type something..." />
  </div>
</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:cc-* utility to override elements and change their values when hovering over them.

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