HTML Colors Tutorial

Colors in HTML are defined using hexadecimal values, RGB values, color names, or HSL values. Here is how each of these methods works:

Hexadecimal Values

Hexadecimal values are a way to represent colors by using a combination of six characters: #RRGGBB, where RR represents a value for red, GG represents a value for green, and BB represents a value for blue. Each character can range from 00 to FF. For example, the color red is represented as #FF0000.

<div style="background-color: #FF0000">
    This is a red box
</div>

RGB Values

RGB values are another way to represent colors by using a combination of three values for red, green, and blue between 0 and 255. For example, the color green is represented as rgb(0, 255, 0).

<div style="background-color: rgb(0, 255, 0)">
    This is a green box
</div>

Color Names

HTML also supports a variety of color names such as "red", "blue", "green", etc. These names provide an easy way to define colors without having to remember hexadecimal values or RGB values.

<div style="background-color: blue">
    This is a blue box
</div>

HSL Values

HSL (Hue, Saturation, Lightness) values represent colors based on their hue, saturation, and lightness. Each value ranges from 0 to 100%. For example, the color orange can be represented as hsl(30, 100%, 50%).

<div style="background-color: hsl(30, 100%, 50%)">
    This is an orange box
</div>

Summary

Method	Example
Hexadecimal	#FF0000
RGB	rgb(0, 255, 0)
Color Name	blue
HSL	hsl(30, 100%, 50%)