How do I apply these colors?

You can apply background colors in CSS using the background-color property. Here are a few examples demonstrating how to use different color options:

1. Using Named Colors

<div style="background-color: lightblue;">
    This div has a light blue background.
</div>

2. Using Hexadecimal Color Codes

<div style="background-color: #FF5733;">
    This div has a background color of #FF5733 (a shade of orange).
</div>

3. Using RGB Values

<div style="background-color: rgb(0, 128, 0);">
    This div has a green background using RGB.
</div>

4. Using RGBA Values (with transparency)

<div style="background-color: rgba(255, 0, 0, 0.5);">
    This div has a semi-transparent red background.
</div>

5. Using HSL Values

<div style="background-color: hsl(240, 100%, 50%);">
    This div has a blue background using HSL.
</div>

Example in a CSS File

You can also define background colors in a CSS file:

.my-div {
    background-color: #4CAF50; /* Green */
}

.another-div {
    background-color: rgba(0, 0, 255, 0.3); /* Semi-transparent blue */
}

HTML Usage

<div class="my-div">
    This div has a green background.
</div>
<div class="another-div">
    This div has a semi-transparent blue background.
</div>

You can apply these styles to any HTML element by using the style attribute directly or by defining classes in a CSS file.