Primer CSS Colors Background Color

Last Updated : 12 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.

One such style element of the Primer CSS is Background Color. In this article, we will learn about the Background Color element in Primer CSS.
Background Color as the name suggests is used to fill color in large areas of the website.

Note: While selecting a background color, we must note that the foreground color contrast passes a minimum WCAG accessibility rating to level AA which can be checked on the following website( or in simple words, you must have good contrast between the foreground color and background color ).

Classes: Below is the list of all background color classes present in Primer CSS along with their color:

.color-bg-default – This class applies the default white background color to the element. It is applied by default.
.color-bg-overlay – This class when applied gives a slightly dark shade of white to the element’s background.
.color-bg-emphasis – This class when applied gives a dark black color to the element’s background.
.color-bg-accent – This class when applied gives a light blue color to the element’s background.
.color-bg-accent-emphasis – This class when applied gives a deep blue color to the element’s background.
.color-bg-success – This class when applied gives a light green color to the element’s background.
.color-bg-success-emphasis – This class when applied gives a dark green color to the element’s background.
.color-bg-attention – This class when applied gives a light yellowish color to the element’s background.
.color-bg-attention-emphasis – This class when applied gives a darkish yellowish color to the element’s background.
.color-bg-severe – This class when applied gives a light brown color to the element’s background.
.color-bg-severe-emphasis – This class when applied gives a dark brown color to the element’s background.
.color-bg-danger – This class when applied gives a light red color to the element’s background.
.color-bg-danger-emphasis – This class when applied gives a dark red color to the element’s background.
.color-bg-done – This class when applied gives a light violet color to the element’s background.
.color-bg-done-emphasis – This class when applied gives a dark violet color to the element’s background color.
.color-bg-transparent – This class when applied makes the background color transparent.
.color-bg-sponsors – This class when applied gives a light pink color to the element’s background color.
.color-bg-sponsors-emphasis – This class when applied gives a dark pink color to the element’s background color.

Syntax:

<div class= “…” > </div>

Note: Here we have shown the examples and syntaxes using the <div> element but you can use the Primer CSS Background color classes.

Example 1: In the below example, we have created three boxes with text written in them and given them different colors with the help of primer background color classes. We have also given a blue background color to the whole screen.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> Primer CSS Background Color </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="color-bg-accent-emphasis" style="color: white;"> 
        <h2>GeeksforGeeks</h2> 
        <h3>Primer CSS Background Color</h3> 
        <div class="color-bg-success-emphasis" 
        style="height: 200px; width: 200px;  color: white;"> 
            This is the first text box with sample text.  
          This article will be published in GeeksforGeeks website. 
        </div> 
        <div class="color-bg-done-emphasis" 
        style="height: 200px; width: 200px;  color: white;" > 
            This is the second text box with sample text.  
          This article will be published in GeeksforGeeks website. 
        </div> 
        <div class="color-bg-sponsors-emphasis" 
        style="height: 200px; width: 200px; color: white;"> 
            This is the third text box with sample text.  
          This article will be published in GeeksforGeeks website. 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: In this example give background color to different buttons.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> Primer CSS Toast animation in </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div> 
        <h2>GeeksforGeeks</h2> 
        <h3>Primer CSS Background Color</h3> 
        <button class="btn color-bg-success-emphasis" 
                type="button"> 
          Button 1 
      </button> 
        <button class="btn color-bg-danger-emphasis" 
                type="button"> 
          Button 2 
      </button> 
    </div> 
</body> 
</html>