Background Color

You can set the background color for HTML elements.

<div class="row">
    <div class="col-3">
        <h4>Background Color</h4>
    </div>
    <div class="col-9" id="backgroundColor">
        Hi my name is Folau
    </div>
</div>
<style>
  #backgroundColor{
       background-color: grey;
  }
</style>

Text color

You can set the color of text.

<div class="row">
    <div class="col-3">
        <h4>Text Color</h4>
    </div>
    <div class="col-9" id="textColor">
        Hi my name is Folau
    </div>
</div>
            <style>
            #textColor{
                color: green;
            }
            </style>

Border color

<div class="row">
    <div class="col-3">
        <h4>Border Color</h4>
    </div>
    <div class="col-9" id="borderColor">
        Hi my name is Folau
    </div>
</div>
            <style>
            #borderColor{
                border:2px solid violet;
            } 
            </style>

RGB color

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. To display black, set all color parameters to 0, like this: rgb(0, 0, 0). To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

<div class="row">
    <div class="col-3">
        <h4>RGB Color</h4>
    </div>
    <div class="col-9" id="rgbColor">
        Hi my name is Folau
    </div>
</div>
            <style>  
            #rgbColor{
                background-color: rgb(255, 99, 71);
            }
            </style>

Hex color

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

<div class="row">
    <div class="col-3">
        <h4>Hex Color</h4>
    </div>
    <div class="col-9" id="hexColor">
        Hi my name is Folau
    </div>
</div>
        <style>
            #hexColor{
                background-color: #ff6347;
            }
        </style>

HSL color

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Saturation can be described as the intensity of a color. 100% is pure color, no shades of gray. 50% is 50% gray, but you can still see the color. 0% is completely gray, you can no longer see the color.

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white. The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

<div class="row">
    <div class="col-3">
        <h4>HSL Color</h4>
    </div>
    <div class="col-9" id="hslColor">
        Hi my name is Folau
    </div>
</div>    
         <style>
            #hslColor{
                background-color: hsl(9, 100%, 64%);
            }
        </style>

Source code on Github