Caret Color

Utility	Properties
cc-red-1	caret-color: rgb(249, 224, 224);
cc-red-2	caret-color: rgb(243, 197, 197);
cc-red-3	caret-color: rgb(237, 170, 170);
cc-red-4	caret-color: rgb(232, 142, 142);
cc-red-5	caret-color: rgb(226, 115, 115);
cc-red-6	caret-color: rgb(221, 88, 88);
cc-red	caret-color: rgb(215, 61, 61);
cc-red-7	caret-color: rgb(185, 52, 52);
cc-red-8	caret-color: rgb(155, 44, 44);
cc-red-9	caret-color: rgb(125, 35, 35);
cc-red-10	caret-color: rgb(95, 27, 27);
cc-red-11	caret-color: rgb(65, 18, 18);
cc-red-12	caret-color: rgb(34, 10, 10);
cc-orange-1	caret-color: rgb(250, 231, 217);
cc-orange-2	caret-color: rgb(246, 210, 185);
cc-orange-3	caret-color: rgb(241, 189, 152);
cc-orange-4	caret-color: rgb(237, 167, 119);
cc-orange-5	caret-color: rgb(233, 146, 86);
cc-orange-6	caret-color: rgb(228, 125, 53);
cc-orange	caret-color: rgb(224, 104, 20);
cc-orange-7	caret-color: rgb(193, 89, 17);
cc-orange-8	caret-color: rgb(161, 75, 14);
cc-orange-9	caret-color: rgb(130, 60, 12);
cc-orange-10	caret-color: rgb(99, 46, 9);
cc-orange-11	caret-color: rgb(67, 31, 6);
cc-orange-12	caret-color: rgb(36, 17, 3);
cc-yellow-1	caret-color: rgb(248, 240, 215);
cc-yellow-2	caret-color: rgb(242, 227, 181);
cc-yellow-3	caret-color: rgb(236, 214, 146);
cc-yellow-4	caret-color: rgb(229, 200, 111);
cc-yellow-5	caret-color: rgb(223, 187, 76);
cc-yellow-6	caret-color: rgb(217, 174, 42);
cc-yellow	caret-color: rgb(211, 161, 7);
cc-yellow-7	caret-color: rgb(181, 138, 6);
cc-yellow-8	caret-color: rgb(152, 116, 5);
cc-yellow-9	caret-color: rgb(122, 93, 4);
cc-yellow-10	caret-color: rgb(93, 71, 3);
cc-yellow-11	caret-color: rgb(63, 48, 2);
cc-yellow-12	caret-color: rgb(34, 26, 1);
cc-green-1	caret-color: rgb(219, 243, 228);
cc-green-2	caret-color: rgb(188, 232, 204);
cc-green-3	caret-color: rgb(156, 221, 180);
cc-green-4	caret-color: rgb(125, 210, 156);
cc-green-5	caret-color: rgb(94, 199, 133);
cc-green-6	caret-color: rgb(62, 188, 109);
cc-green	caret-color: rgb(31, 177, 85);
cc-green-7	caret-color: rgb(27, 152, 73);
cc-green-8	caret-color: rgb(22, 127, 61);
cc-green-9	caret-color: rgb(18, 103, 49);
cc-green-10	caret-color: rgb(14, 78, 37);
cc-green-11	caret-color: rgb(9, 53, 26);
cc-green-12	caret-color: rgb(5, 28, 14);
cc-teal-1	caret-color: rgb(217, 241, 238);
cc-teal-2	caret-color: rgb(184, 228, 223);
cc-teal-3	caret-color: rgb(151, 216, 208);
cc-teal-4	caret-color: rgb(118, 203, 194);
cc-teal-5	caret-color: rgb(84, 191, 179);
cc-teal-6	caret-color: rgb(51, 178, 164);
cc-teal	caret-color: rgb(18, 166, 149);
cc-teal-7	caret-color: rgb(15, 143, 128);
cc-teal-8	caret-color: rgb(13, 120, 107);
cc-teal-9	caret-color: rgb(10, 96, 86);
cc-teal-10	caret-color: rgb(8, 73, 66);
cc-teal-11	caret-color: rgb(5, 50, 45);
cc-teal-12	caret-color: rgb(3, 27, 24);
cc-cyan-1	caret-color: rgb(215, 240, 245);
cc-cyan-2	caret-color: rgb(180, 228, 236);
cc-cyan-3	caret-color: rgb(145, 215, 227);
cc-cyan-4	caret-color: rgb(110, 202, 218);
cc-cyan-5	caret-color: rgb(75, 189, 209);
cc-cyan-6	caret-color: rgb(40, 177, 200);
cc-cyan	caret-color: rgb(5, 164, 191);
cc-cyan-7	caret-color: rgb(4, 141, 164);
cc-cyan-8	caret-color: rgb(4, 118, 138);
cc-cyan-9	caret-color: rgb(3, 95, 111);
cc-cyan-10	caret-color: rgb(2, 72, 84);
cc-cyan-11	caret-color: rgb(2, 49, 57);
cc-cyan-12	caret-color: rgb(1, 26, 31);
cc-blue-1	caret-color: rgb(223, 233, 250);
cc-blue-2	caret-color: rgb(194, 214, 245);
cc-blue-3	caret-color: rgb(166, 194, 240);
cc-blue-4	caret-color: rgb(138, 175, 235);
cc-blue-5	caret-color: rgb(110, 156, 231);
cc-blue-6	caret-color: rgb(81, 136, 226);
cc-blue	caret-color: rgb(53, 117, 221);
cc-blue-7	caret-color: rgb(46, 101, 190);
cc-blue-8	caret-color: rgb(38, 84, 159);
cc-blue-9	caret-color: rgb(31, 68, 128);
cc-blue-10	caret-color: rgb(23, 51, 97);
cc-blue-11	caret-color: rgb(16, 35, 66);
cc-blue-12	caret-color: rgb(8, 19, 35);
cc-indigo-1	caret-color: rgb(228, 229, 249);
cc-indigo-2	caret-color: rgb(205, 206, 244);
cc-indigo-3	caret-color: rgb(182, 183, 238);
cc-indigo-4	caret-color: rgb(159, 160, 233);
cc-indigo-5	caret-color: rgb(135, 138, 228);
cc-indigo-6	caret-color: rgb(112, 115, 222);
cc-indigo	caret-color: rgb(89, 92, 217);
cc-indigo-7	caret-color: rgb(77, 79, 187);
cc-indigo-8	caret-color: rgb(64, 66, 156);
cc-indigo-9	caret-color: rgb(52, 53, 126);
cc-indigo-10	caret-color: rgb(39, 40, 95);
cc-indigo-11	caret-color: rgb(27, 28, 65);
cc-indigo-12	caret-color: rgb(14, 15, 35);
cc-violet-1	caret-color: rgb(234, 227, 250);
cc-violet-2	caret-color: rgb(216, 203, 245);
cc-violet-3	caret-color: rgb(198, 179, 240);
cc-violet-4	caret-color: rgb(180, 155, 235);
cc-violet-5	caret-color: rgb(161, 131, 231);
cc-violet-6	caret-color: rgb(143, 107, 226);
cc-violet	caret-color: rgb(125, 83, 221);
cc-violet-7	caret-color: rgb(108, 71, 190);
cc-violet-8	caret-color: rgb(90, 60, 159);
cc-violet-9	caret-color: rgb(73, 48, 128);
cc-violet-10	caret-color: rgb(55, 37, 97);
cc-violet-11	caret-color: rgb(38, 25, 66);
cc-violet-12	caret-color: rgb(20, 13, 35);
cc-pink-1	caret-color: rgb(248, 225, 236);
cc-pink-2	caret-color: rgb(242, 198, 220);
cc-pink-3	caret-color: rgb(236, 171, 204);
cc-pink-4	caret-color: rgb(230, 145, 187);
cc-pink-5	caret-color: rgb(224, 118, 171);
cc-pink-6	caret-color: rgb(218, 92, 154);
cc-pink	caret-color: rgb(212, 65, 138);
cc-pink-7	caret-color: rgb(182, 56, 119);
cc-pink-8	caret-color: rgb(153, 47, 99);
cc-pink-9	caret-color: rgb(123, 38, 80);
cc-pink-10	caret-color: rgb(93, 29, 61);
cc-pink-11	caret-color: rgb(64, 20, 41);
cc-pink-12	caret-color: rgb(34, 10, 22);
cc-lead-1	caret-color: rgb(224, 224, 227);
cc-lead-2	caret-color: rgb(197, 197, 202);
cc-lead-3	caret-color: rgb(171, 171, 177);
cc-lead-4	caret-color: rgb(144, 144, 152);
cc-lead-5	caret-color: rgb(117, 117, 128);
cc-lead-6	caret-color: rgb(90, 90, 103);
cc-lead	caret-color: rgb(63, 63, 78);
cc-lead-7	caret-color: rgb(54, 54, 67);
cc-lead-8	caret-color: rgb(45, 45, 56);
cc-lead-9	caret-color: rgb(37, 37, 45);
cc-lead-10	caret-color: rgb(28, 28, 34);
cc-lead-11	caret-color: rgb(19, 19, 23);
cc-lead-12	caret-color: rgb(10, 10, 12);
cc-gray-1	caret-color: rgb(230, 231, 233);
cc-gray-2	caret-color: rgb(207, 209, 213);
cc-gray-3	caret-color: rgb(185, 188, 193);
cc-gray-4	caret-color: rgb(163, 167, 174);
cc-gray-5	caret-color: rgb(141, 146, 154);
cc-gray-6	caret-color: rgb(118, 124, 135);
cc-gray	caret-color: rgb(96, 103, 115);
cc-gray-7	caret-color: rgb(83, 89, 99);
cc-gray-8	caret-color: rgb(69, 74, 83);
cc-gray-9	caret-color: rgb(56, 60, 67);
cc-gray-10	caret-color: rgb(42, 45, 51);
cc-gray-11	caret-color: rgb(29, 31, 35);
cc-gray-12	caret-color: rgb(15, 16, 18);
cc-silver-1	caret-color: rgb(245, 245, 246);
cc-silver-2	caret-color: rgb(236, 237, 238);
cc-silver-3	caret-color: rgb(227, 228, 230);
cc-silver-4	caret-color: rgb(218, 220, 223);
cc-silver-5	caret-color: rgb(209, 211, 215);
cc-silver-6	caret-color: rgb(200, 203, 207);
cc-silver	caret-color: rgb(191, 194, 199);
cc-silver-7	caret-color: rgb(164, 167, 171);
cc-silver-8	caret-color: rgb(138, 140, 143);
cc-silver-9	caret-color: rgb(111, 113, 115);
cc-silver-10	caret-color: rgb(84, 85, 88);
cc-silver-11	caret-color: rgb(57, 58, 60);
cc-silver-12	caret-color: rgb(31, 31, 32);
cc-black	caret-color: black;
cc-white	caret-color: white;
cc-transparent	caret-color: transparent;

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 modifier

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

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