Outline Color
Controls the color of the outline of an element.
| Class | Properties |
|---|---|
| oc-l-red-6 | outline-color: #efb1b1; |
| oc-l-red-5 | outline-color: #eb9e9e; |
| oc-l-red-4 | outline-color: #e78b8b; |
| oc-l-red-3 | outline-color: #e37777; |
| oc-l-red-2 | outline-color: #df6464; |
| oc-l-red-1 | outline-color: #db5050; |
| oc-red | outline-color: #d73d3d; |
| oc-d-red-1 | outline-color: #c23737; |
| oc-d-red-2 | outline-color: #ac3131; |
| oc-d-red-3 | outline-color: #972b2b; |
| oc-d-red-4 | outline-color: #812525; |
| oc-d-red-5 | outline-color: #6c1f1f; |
| oc-d-red-6 | outline-color: #561818; |
| oc-l-orange-6 | outline-color: #f3c3a1; |
| oc-l-orange-5 | outline-color: #f0b48a; |
| oc-l-orange-4 | outline-color: #eca472; |
| oc-l-orange-3 | outline-color: #e9955b; |
| oc-l-orange-2 | outline-color: #e68643; |
| oc-l-orange-1 | outline-color: #e3772c; |
| oc-orange | outline-color: #e06814; |
| oc-d-orange-1 | outline-color: #ca5e12; |
| oc-d-orange-2 | outline-color: #b35310; |
| oc-d-orange-3 | outline-color: #9d490e; |
| oc-d-orange-4 | outline-color: #863e0c; |
| oc-d-orange-5 | outline-color: #70340a; |
| oc-d-orange-6 | outline-color: #5a2a08; |
| oc-l-yellow-6 | outline-color: #edd99c; |
| oc-l-yellow-5 | outline-color: #e9d083; |
| oc-l-yellow-4 | outline-color: #e5c76a; |
| oc-l-yellow-3 | outline-color: #e0bd51; |
| oc-l-yellow-2 | outline-color: #dcb439; |
| oc-l-yellow-1 | outline-color: #d7aa20; |
| oc-yellow | outline-color: #d3a107; |
| oc-d-yellow-1 | outline-color: #be9106; |
| oc-d-yellow-2 | outline-color: #a98106; |
| oc-d-yellow-3 | outline-color: #947105; |
| oc-d-yellow-4 | outline-color: #7f6104; |
| oc-d-yellow-5 | outline-color: #6a5104; |
| oc-d-yellow-6 | outline-color: #544003; |
| oc-l-green-6 | outline-color: #a5e0bb; |
| oc-l-green-5 | outline-color: #8fd8aa; |
| oc-l-green-4 | outline-color: #79d099; |
| oc-l-green-3 | outline-color: #62c888; |
| oc-l-green-2 | outline-color: #4cc177; |
| oc-l-green-1 | outline-color: #35b966; |
| oc-green | outline-color: #1fb155; |
| oc-d-green-1 | outline-color: #1c9f4d; |
| oc-d-green-2 | outline-color: #198e44; |
| oc-d-green-3 | outline-color: #167c3c; |
| oc-d-green-4 | outline-color: #136a33; |
| oc-d-green-5 | outline-color: #10592b; |
| oc-d-green-6 | outline-color: #0c4722; |
| oc-l-teal-6 | outline-color: #a0dbd5; |
| oc-l-teal-5 | outline-color: #89d3ca; |
| oc-l-teal-4 | outline-color: #71cabf; |
| oc-l-teal-3 | outline-color: #59c1b5; |
| oc-l-teal-2 | outline-color: #41b8aa; |
| oc-l-teal-1 | outline-color: #2aafa0; |
| oc-teal | outline-color: #12a695; |
| oc-d-teal-1 | outline-color: #109586; |
| oc-d-teal-2 | outline-color: #0e8577; |
| oc-d-teal-3 | outline-color: #0d7468; |
| oc-d-teal-4 | outline-color: #0b6459; |
| oc-d-teal-5 | outline-color: #09534b; |
| oc-d-teal-6 | outline-color: #07423c; |
| oc-l-cyan-6 | outline-color: #9bdbe5; |
| oc-l-cyan-5 | outline-color: #82d2df; |
| oc-l-cyan-4 | outline-color: #69c8d9; |
| oc-l-cyan-3 | outline-color: #50bfd2; |
| oc-l-cyan-2 | outline-color: #37b6cc; |
| oc-l-cyan-1 | outline-color: #1eadc5; |
| oc-cyan | outline-color: #05a4bf; |
| oc-d-cyan-1 | outline-color: #0594ac; |
| oc-d-cyan-2 | outline-color: #048399; |
| oc-d-cyan-3 | outline-color: #047386; |
| oc-d-cyan-4 | outline-color: #036273; |
| oc-d-cyan-5 | outline-color: #035260; |
| oc-d-cyan-6 | outline-color: #02424c; |
| oc-l-blue-6 | outline-color: #aec8f1; |
| oc-l-blue-5 | outline-color: #9abaee; |
| oc-l-blue-4 | outline-color: #86aceb; |
| oc-l-blue-3 | outline-color: #729ee7; |
| oc-l-blue-2 | outline-color: #5d91e4; |
| oc-l-blue-1 | outline-color: #4983e0; |
| oc-blue | outline-color: #3575dd; |
| oc-d-blue-1 | outline-color: #3069c7; |
| oc-d-blue-2 | outline-color: #2a5eb1; |
| oc-d-blue-3 | outline-color: #25529b; |
| oc-d-blue-4 | outline-color: #204685; |
| oc-d-blue-5 | outline-color: #1b3b6f; |
| oc-d-blue-6 | outline-color: #152f58; |
| oc-l-indigo-6 | outline-color: #bdbef0; |
| oc-l-indigo-5 | outline-color: #acaeec; |
| oc-l-indigo-4 | outline-color: #9b9de8; |
| oc-l-indigo-3 | outline-color: #8b8de4; |
| oc-l-indigo-2 | outline-color: #7a7de1; |
| oc-l-indigo-1 | outline-color: #6a6cdd; |
| oc-indigo | outline-color: #595cd9; |
| oc-d-indigo-1 | outline-color: #5053c3; |
| oc-d-indigo-2 | outline-color: #474aae; |
| oc-d-indigo-3 | outline-color: #3e4098; |
| oc-d-indigo-4 | outline-color: #353782; |
| oc-d-indigo-5 | outline-color: #2d2e6d; |
| oc-d-indigo-6 | outline-color: #242557; |
| oc-l-violet-6 | outline-color: #cbbaf1; |
| oc-l-violet-5 | outline-color: #bea9ee; |
| oc-l-violet-4 | outline-color: #b198eb; |
| oc-l-violet-3 | outline-color: #a487e7; |
| oc-l-violet-2 | outline-color: #9775e4; |
| oc-l-violet-1 | outline-color: #8a64e0; |
| oc-violet | outline-color: #7d53dd; |
| oc-d-violet-1 | outline-color: #714bc7; |
| oc-d-violet-2 | outline-color: #6442b1; |
| oc-d-violet-3 | outline-color: #583a9b; |
| oc-d-violet-4 | outline-color: #4b3285; |
| oc-d-violet-5 | outline-color: #3f2a6f; |
| oc-d-violet-6 | outline-color: #322158; |
| oc-l-pink-6 | outline-color: #eeb3d0; |
| oc-l-pink-5 | outline-color: #eaa0c5; |
| oc-l-pink-4 | outline-color: #e58db9; |
| oc-l-pink-3 | outline-color: #e17aad; |
| oc-l-pink-2 | outline-color: #dd67a1; |
| oc-l-pink-1 | outline-color: #d85496; |
| oc-pink | outline-color: #d4418a; |
| oc-d-pink-1 | outline-color: #bf3b7c; |
| oc-d-pink-2 | outline-color: #aa346e; |
| oc-d-pink-3 | outline-color: #942e61; |
| oc-d-pink-4 | outline-color: #7f2753; |
| oc-d-pink-5 | outline-color: #6a2145; |
| oc-d-pink-6 | outline-color: #551a37; |
| oc-l-gray-6 | outline-color: #bfc2c7; |
| oc-l-gray-5 | outline-color: #b0b3b9; |
| oc-l-gray-4 | outline-color: #a0a4ab; |
| oc-l-gray-3 | outline-color: #90959d; |
| oc-l-gray-2 | outline-color: #80858f; |
| oc-l-gray-1 | outline-color: #707681; |
| oc-gray | outline-color: #606773; |
| oc-d-gray-1 | outline-color: #565d68; |
| oc-d-gray-2 | outline-color: #4d525c; |
| oc-d-gray-3 | outline-color: #434851; |
| oc-d-gray-4 | outline-color: #3a3e45; |
| oc-d-gray-5 | outline-color: #30343a; |
| oc-d-gray-6 | outline-color: #26292e; |
| oc-l-lead-6 | outline-color: #b2b2b8; |
| oc-l-lead-5 | outline-color: #9f9fa7; |
| oc-l-lead-4 | outline-color: #8c8c95; |
| oc-l-lead-3 | outline-color: #797983; |
| oc-l-lead-2 | outline-color: #656571; |
| oc-l-lead-1 | outline-color: #525260; |
| oc-lead | outline-color: #3f3f4e; |
| oc-d-lead-1 | outline-color: #393946; |
| oc-d-lead-2 | outline-color: #32323e; |
| oc-d-lead-3 | outline-color: #2c2c37; |
| oc-d-lead-4 | outline-color: #26262f; |
| oc-d-lead-5 | outline-color: #202027; |
| oc-d-lead-6 | outline-color: #19191f; |
| oc-l-silver-6 | outline-color: #e5e7e9; |
| oc-l-silver-5 | outline-color: #dfe1e3; |
| oc-l-silver-4 | outline-color: #d9dadd; |
| oc-l-silver-3 | outline-color: #d2d4d8; |
| oc-l-silver-2 | outline-color: #ccced2; |
| oc-l-silver-1 | outline-color: #c5c8cd; |
| oc-silver | outline-color: #bfc2c7; |
| oc-d-silver-1 | outline-color: #acafb3; |
| oc-d-silver-2 | outline-color: #999b9f; |
| oc-d-silver-3 | outline-color: #86888b; |
| oc-d-silver-4 | outline-color: #737477; |
| oc-d-silver-5 | outline-color: #606164; |
| oc-d-silver-6 | outline-color: #4c4e50; |
This example showcases various outline colors: light indigo 2, indigo, and dark indigo 2. The outlines will have a moderate light indigo shade, a rich indigo shade, and a deeper indigo shade, respectively.
<div class="d-g g-16 gtc-1 sm:gtc-3"> <div class="b-1 b-s bc-gray dim-16 oc-l-indigo-4 oo-1 os-s rad-1"></div> <div class="b-1 b-s bc-gray dim-16 oc-indigo oo-1 os-s rad-1"></div> <div class="b-1 b-s bc-gray dim-16 oc-d-indigo-2 oo-1 os-s rad-1"></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:oc-* utility to override elements
and change their values when hovering over them.
<div class="oc-lead h:oc-indigo ..."></div>