CSS Colors

Keywords

css, colors, css colors, dataidea, data science, web development, website

Photo by DATAIDEA

Colors

CSS provides various ways to specify colors, including:

  • Named colors
  • Hexadecimal (hex) colors
  • RGB andRGBA colors
  • HSL and HSLA colors.

Each method has its advantages and use cases.

Named Colors

CSS defines a set of named colors that you can use directly in your stylesheets. Some common named colors include “red”, “blue”, “green”, “yellow”, “black”, “white”, etc.

Example:

We can set the color of a heading h1 to be red as:

h1 {
    color: red;
}

Hexadecimal (Hex) Colors

Hexadecimal notation represents colors using a combination of six hexadecimal digits, each specifying the intensity of red, green, and blue (RGB) components. Hex colors start with a hash symbol #, followed by six characters (0-9, A-F).

Example:

We can set the color of a heading h1 to be red and green background like:

h1 {
    color: #ff0000; /* Red */
    background-color: #00ff00; /* Green */
}

RGB Colors

RGB notation defines colors using a combination of red, green, and blue color values. Each color value is specified as an integer between 0 and 255.

Example:

We can set the color of a heading h1 to be red and green background like:

h1 {
    color: rgb(255, 0, 0); /* Red */
    background-color: rgb(0, 255, 0); /* Green */
}

RGBA Colors

RGBA notation extends RGB by adding an alpha channel, which represents the opacity of the color. The alpha value is a number between 0 (fully transparent) and 1 (fully opaque).

Example:

We can set the color of a heading h1 to be red and green background like:

h1 {
    /* Red with 50% opacity */
    color: rgba(255, 0, 0, 0.5); 
    /* Green with 75% opacity */
    background-color: rgba(0, 255, 0, 0.75); 
}

HSL Colors

HSL (Hue, Saturation, Lightness) notation defines colors using three parameters: hue, saturation, and lightness. Hue represents the color itself (0-360), saturation represents the intensity of the color (0-100%), and lightness represents the brightness (0-100%).

Example:

We can set the color of a heading h1 to be red and green background like:

h1 {
    color: hsl(0, 100%, 50%); /* Red */
    background-color: hsl(120, 100%, 50%); /* Green */
}

HSLA Colors

HSLA notation extends HSL by adding an alpha channel for opacity.

Example:

We can set the color of a heading h1 to be red and green background like:

h1 {
    /* Red with 50% opacity */
    color: hsla(0, 100%, 50%, 0.5); 
    /* Green with 75% opacity */
    background-color: hsla(120, 100%, 50%, 0.75); 
}

Note!

Each color notation has its advantages and use cases. Experiment with different color formats to find the one that best suits your design needs.

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Back to top