CSS Colors

📣 Sponsor

CSS has many different ways to express colors. The main ways are:

hexadecimal - this is the familiar #000000 style color code found in image editors like photoshop and gimp.
rgb(a) - this is the red, green and blue value of the color, with an optional 'a' for alpha, or transparency.
hsl(a) - this is the hue, saturation and lightness value of the color, with again, an optional 'a' for transparency.
keywords - these are keywords which refer to a specific color, i.e. red, green, blue, orange, etc.

Note that all of these are just different ways of expressing a color, and all colors can be expressed in these formats. When picking colors, there are plenty of online tools. You can also use your image editor of choice.

Hexadecimal

Hexadecimal or hex is arguably one of the most common formats colors appear in, and is the color code most people would be familiar with. In CSS, hexadecimals also have an optional last 2 digits which refer to the opacity.

An example of a hexadecimal color code is shown below:


p {
    color: #000000; /* A black text color */
}

As mentioned, you can also use an additional two digits for opacity, so you may see something like this as well:


p {
    color: #0000004f; /* Black, but slightly transparent */
}

RGB(A)

RGB colors can be denoted as follows:


p {
    color: rgb(255,255,255); /* White */
}
a {
    color: rgba(0,0,0,0.5); /* Black with 50% transparency */
}

HSL(A)

HSL colors can be denoted as follows:


p {
    color: hsl(0,100%,50%); /* Red */
}
a {
    color: hsla(0,100%,50%,0.5); /* Red with 50% transparency */
}

Keywords

Colors can also be denoted by keyword, for example, green, red, or orange. CSS provides a number of keywords all of which can be viewed below:

Last Updated 1617478849389