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