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