CSS Colors

CSS has a predefined set of named colors. Some of the values can be: red, blue, yellow, green etc. For beginners, these are the easiest to remember and use.

Example:

p {
    color: red;
}

This styles all <p> elements with red text.

Hexadecimal (HEX) color values are based on the combination of red, green, and blue (RGB) values in a base-16 format. A HEX color code starts with a hash # followed by 6 characters - two for red, two for green, and two for blue.

Example:

div {
    background-color: #FF5733; /* A shade of orange */
}

HEX is one of the most common methods to define colors in web design. It’s ideal for situations where opacity changes aren't necessary. Short and easily copy-pasteable, especially with shorthand versions (e.g., #FFF for white)

Colors can be defined using the rgb() function, where values for red, green, and blue are provided in the range of 0-255.

Example:

div {
    background-color: rgb(0, 0, 0); /* This is black */
}

Using rgb() directly relates to the red, green, and blue light components, making it more intuitive for some. Often used in software that deals with screen displays and images.

RGBA is similar to RGB but has an additional value for alpha (A) representing opacity. The alpha value is between 0 (completely transparent) and 1 (fully opaque).

Example:

div {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

In this example we are specifying the red, green and blue channels to zero, while adding a 50% opacity, hence we get a partly transparent background.

Use when you need to specify the opacity of a color. Useful for hover effects, modal backgrounds, or any overlaying component where you want the background to be partly visible.

HSL stands for Hue, Saturation, and Lightness. It offers a more intuitive way to pick colors.

Example:

button {
    background-color: hsl(120, 100%, 50%); /* Pure green */
}

Allows for easier theme changes. Altering the lightness or saturation while keeping the hue can give a different feel to a design while remaining consistent. Easier to understand in terms of human perception. Adjusting saturation and lightness can be more intuitive than tweaking RGB values.

Like RGBA, HSLA includes an alpha value for opacity.

button {
    background-color: hsla(120, 100%, 50%, 0.5); /* Pure green */
}

Combines the benefits of HSL with the transparency feature, offering both themability and opacity controls. Useful when you need a deeper level of control over both color and transparency, especially in layered designs.