Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Support Yumma CSS by starring us on GitHub!

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;

This example showcases various background colors: light indigo 2, indigo, and dark indigo 2. The backgrounds will have a rich indigo shade, a moderate light indigo shade, and a deeper indigo shade, respectively.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="bg-l-indigo-4 dim-16 rad-1"></div>
  <div class="bg-indigo dim-16 rad-1"></div>
  <div class="bg-d-indigo-2 dim-16 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:bg-* utility to override elements and change their values when hovering over them. 

<div class="bg-lead h:bg-indigo ..."></div>