Caret Color

Class	Properties
cc-l-red-6	caret-color: #efb1b1;
cc-l-red-5	caret-color: #eb9e9e;
cc-l-red-4	caret-color: #e78b8b;
cc-l-red-3	caret-color: #e37777;
cc-l-red-2	caret-color: #df6464;
cc-l-red-1	caret-color: #db5050;
cc-red	caret-color: #d73d3d;
cc-d-red-1	caret-color: #c23737;
cc-d-red-2	caret-color: #ac3131;
cc-d-red-3	caret-color: #972b2b;
cc-d-red-4	caret-color: #812525;
cc-d-red-5	caret-color: #6c1f1f;
cc-d-red-6	caret-color: #561818;
cc-l-orange-6	caret-color: #f3c3a1;
cc-l-orange-5	caret-color: #f0b48a;
cc-l-orange-4	caret-color: #eca472;
cc-l-orange-3	caret-color: #e9955b;
cc-l-orange-2	caret-color: #e68643;
cc-l-orange-1	caret-color: #e3772c;
cc-orange	caret-color: #e06814;
cc-d-orange-1	caret-color: #ca5e12;
cc-d-orange-2	caret-color: #b35310;
cc-d-orange-3	caret-color: #9d490e;
cc-d-orange-4	caret-color: #863e0c;
cc-d-orange-5	caret-color: #70340a;
cc-d-orange-6	caret-color: #5a2a08;
cc-l-yellow-6	caret-color: #edd99c;
cc-l-yellow-5	caret-color: #e9d083;
cc-l-yellow-4	caret-color: #e5c76a;
cc-l-yellow-3	caret-color: #e0bd51;
cc-l-yellow-2	caret-color: #dcb439;
cc-l-yellow-1	caret-color: #d7aa20;
cc-yellow	caret-color: #d3a107;
cc-d-yellow-1	caret-color: #be9106;
cc-d-yellow-2	caret-color: #a98106;
cc-d-yellow-3	caret-color: #947105;
cc-d-yellow-4	caret-color: #7f6104;
cc-d-yellow-5	caret-color: #6a5104;
cc-d-yellow-6	caret-color: #544003;
cc-l-green-6	caret-color: #a5e0bb;
cc-l-green-5	caret-color: #8fd8aa;
cc-l-green-4	caret-color: #79d099;
cc-l-green-3	caret-color: #62c888;
cc-l-green-2	caret-color: #4cc177;
cc-l-green-1	caret-color: #35b966;
cc-green	caret-color: #1fb155;
cc-d-green-1	caret-color: #1c9f4d;
cc-d-green-2	caret-color: #198e44;
cc-d-green-3	caret-color: #167c3c;
cc-d-green-4	caret-color: #136a33;
cc-d-green-5	caret-color: #10592b;
cc-d-green-6	caret-color: #0c4722;
cc-l-teal-6	caret-color: #a0dbd5;
cc-l-teal-5	caret-color: #89d3ca;
cc-l-teal-4	caret-color: #71cabf;
cc-l-teal-3	caret-color: #59c1b5;
cc-l-teal-2	caret-color: #41b8aa;
cc-l-teal-1	caret-color: #2aafa0;
cc-teal	caret-color: #12a695;
cc-d-teal-1	caret-color: #109586;
cc-d-teal-2	caret-color: #0e8577;
cc-d-teal-3	caret-color: #0d7468;
cc-d-teal-4	caret-color: #0b6459;
cc-d-teal-5	caret-color: #09534b;
cc-d-teal-6	caret-color: #07423c;
cc-l-cyan-6	caret-color: #9bdbe5;
cc-l-cyan-5	caret-color: #82d2df;
cc-l-cyan-4	caret-color: #69c8d9;
cc-l-cyan-3	caret-color: #50bfd2;
cc-l-cyan-2	caret-color: #37b6cc;
cc-l-cyan-1	caret-color: #1eadc5;
cc-cyan	caret-color: #05a4bf;
cc-d-cyan-1	caret-color: #0594ac;
cc-d-cyan-2	caret-color: #048399;
cc-d-cyan-3	caret-color: #047386;
cc-d-cyan-4	caret-color: #036273;
cc-d-cyan-5	caret-color: #035260;
cc-d-cyan-6	caret-color: #02424c;
cc-l-blue-6	caret-color: #aec8f1;
cc-l-blue-5	caret-color: #9abaee;
cc-l-blue-4	caret-color: #86aceb;
cc-l-blue-3	caret-color: #729ee7;
cc-l-blue-2	caret-color: #5d91e4;
cc-l-blue-1	caret-color: #4983e0;
cc-blue	caret-color: #3575dd;
cc-d-blue-1	caret-color: #3069c7;
cc-d-blue-2	caret-color: #2a5eb1;
cc-d-blue-3	caret-color: #25529b;
cc-d-blue-4	caret-color: #204685;
cc-d-blue-5	caret-color: #1b3b6f;
cc-d-blue-6	caret-color: #152f58;
cc-l-indigo-6	caret-color: #bdbef0;
cc-l-indigo-5	caret-color: #acaeec;
cc-l-indigo-4	caret-color: #9b9de8;
cc-l-indigo-3	caret-color: #8b8de4;
cc-l-indigo-2	caret-color: #7a7de1;
cc-l-indigo-1	caret-color: #6a6cdd;
cc-indigo	caret-color: #595cd9;
cc-d-indigo-1	caret-color: #5053c3;
cc-d-indigo-2	caret-color: #474aae;
cc-d-indigo-3	caret-color: #3e4098;
cc-d-indigo-4	caret-color: #353782;
cc-d-indigo-5	caret-color: #2d2e6d;
cc-d-indigo-6	caret-color: #242557;
cc-l-violet-6	caret-color: #cbbaf1;
cc-l-violet-5	caret-color: #bea9ee;
cc-l-violet-4	caret-color: #b198eb;
cc-l-violet-3	caret-color: #a487e7;
cc-l-violet-2	caret-color: #9775e4;
cc-l-violet-1	caret-color: #8a64e0;
cc-violet	caret-color: #7d53dd;
cc-d-violet-1	caret-color: #714bc7;
cc-d-violet-2	caret-color: #6442b1;
cc-d-violet-3	caret-color: #583a9b;
cc-d-violet-4	caret-color: #4b3285;
cc-d-violet-5	caret-color: #3f2a6f;
cc-d-violet-6	caret-color: #322158;
cc-l-pink-6	caret-color: #eeb3d0;
cc-l-pink-5	caret-color: #eaa0c5;
cc-l-pink-4	caret-color: #e58db9;
cc-l-pink-3	caret-color: #e17aad;
cc-l-pink-2	caret-color: #dd67a1;
cc-l-pink-1	caret-color: #d85496;
cc-pink	caret-color: #d4418a;
cc-d-pink-1	caret-color: #bf3b7c;
cc-d-pink-2	caret-color: #aa346e;
cc-d-pink-3	caret-color: #942e61;
cc-d-pink-4	caret-color: #7f2753;
cc-d-pink-5	caret-color: #6a2145;
cc-d-pink-6	caret-color: #551a37;
cc-l-gray-6	caret-color: #bfc2c7;
cc-l-gray-5	caret-color: #b0b3b9;
cc-l-gray-4	caret-color: #a0a4ab;
cc-l-gray-3	caret-color: #90959d;
cc-l-gray-2	caret-color: #80858f;
cc-l-gray-1	caret-color: #707681;
cc-gray	caret-color: #606773;
cc-d-gray-1	caret-color: #565d68;
cc-d-gray-2	caret-color: #4d525c;
cc-d-gray-3	caret-color: #434851;
cc-d-gray-4	caret-color: #3a3e45;
cc-d-gray-5	caret-color: #30343a;
cc-d-gray-6	caret-color: #26292e;
cc-l-lead-6	caret-color: #b2b2b8;
cc-l-lead-5	caret-color: #9f9fa7;
cc-l-lead-4	caret-color: #8c8c95;
cc-l-lead-3	caret-color: #797983;
cc-l-lead-2	caret-color: #656571;
cc-l-lead-1	caret-color: #525260;
cc-lead	caret-color: #3f3f4e;
cc-d-lead-1	caret-color: #393946;
cc-d-lead-2	caret-color: #32323e;
cc-d-lead-3	caret-color: #2c2c37;
cc-d-lead-4	caret-color: #26262f;
cc-d-lead-5	caret-color: #202027;
cc-d-lead-6	caret-color: #19191f;
cc-l-silver-6	caret-color: #e5e7e9;
cc-l-silver-5	caret-color: #dfe1e3;
cc-l-silver-4	caret-color: #d9dadd;
cc-l-silver-3	caret-color: #d2d4d8;
cc-l-silver-2	caret-color: #ccced2;
cc-l-silver-1	caret-color: #c5c8cd;
cc-silver	caret-color: #bfc2c7;
cc-d-silver-1	caret-color: #acafb3;
cc-d-silver-2	caret-color: #999b9f;
cc-d-silver-3	caret-color: #86888b;
cc-d-silver-4	caret-color: #737477;
cc-d-silver-5	caret-color: #606164;
cc-d-silver-6	caret-color: #4c4e50;

This example showcases the default browser caret color and a custom Indigo color. The custom caret will have a rich indigo shade.

Try writing a sentence to see the caret color.

Default

Custom

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

  <div>
    <label class="fw-600">Custom</label>
    <input class="b-s cc-indigo p-1 rad-1 " placeholder="Type something..." />
  </div>
</div>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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>