Outline Color

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

This example showcases various outline-color utilities colors using the indigo colors from the default color palette.

• The oc-indigo-3 utility applies a lighter indigo shade to the outline of an element.
• The oc-indigo utility applies the base indigo shade to the outline of an element.
• The oc-indigo-8 utility applies a darker indigo shade to the outline of an element.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-1 bc-indigo d-16 oc-indigo-3 oo-1 os-s rad-1"></div>
  <div class="b-1 bc-indigo d-16 oc-indigo oo-1 os-s rad-1"></div>
  <div class="b-1 bc-indigo d-16 oc-indigo-8 oo-1 os-s rad-1"></div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

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

<div class="oc-slate md:oc-indigo ..."></div>

Hover variant

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

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