Outline Color
Controls the color of the outline of an element.
| Class | Properties | Color |
|---|---|---|
| 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; |
<button class="b-1 bc-l-silver-6 bg-white fw-600 oc-cyan oo-1 os-s px-5 py-1 rad-1">Subscribe</button>Using variants
Using :hover variants such as h:oc-* allows you to override elements and change their values when hovering over them.
<div class="oc-lead h:oc-pink ..."></div>