CSS Colors

CSS Colors are used to style the color of HTML elements. There are several ways to specify color in CSS.

Color Names

There are 140 standard color names that are recognized in CSS. Here are a few examples:

body {
    background-color: red;
}

h1 {
    color: green;
}

In the above example, the background color of the body is set to red and the color of the heading is set to green using color names.

Hexadecimal Colors

Colors can also be described in CSS using hexadecimal (hex) values. Hex values are a combination of six digits and letters, and always start with a # symbol.

body {
    background-color: #FF0000;
}

h1 {
    color: #00FF00;
}

In the above example, the background color of the body is set to red and the color of the heading is set to green using hex values.

RGB Colors

Colors can be specified using their red, green, and blue (RGB) components. Each component can have a value between 0 and 255.

body {
    background-color: rgb(255, 0, 0);
}

h1 {
    color: rgb(0, 255, 0);
}

In the above example, the background color of the body is set to red and the color of the heading is set to green using RGB values.

RGBA Colors

RGBA is an extension of RGB, with an additional alpha channel. The alpha channel specifies the opacity of the color, and can be a value between 0 (completely transparent) and 1 (completely opaque).

body {
    background-color: rgba(255, 0, 0, 0.5);
}

h1 {
    color: rgba(0, 255, 0, 0.5);
}

In the above example, the background color of the body is set to semi-transparent red and the color of the heading is set to semi-transparent green using RGBA values.

HSL Colors

HSL stands for hue, saturation, and lightness. Hue is a degree on the color wheel from 0 to 360, saturation is a percentage value, and lightness is also a percentage.

body {
    background-color: hsl(0, 100%, 50%);
}

h1 {
    color: hsl(120, 100%, 50%);
}

In the above example, the background color of the body is set to red and the color of the heading is set to green using HSL values.

HSLA Colors

HSLA is an extension of HSL, with an additional alpha channel for opacity.

body {
    background-color: hsla(0, 100%, 50%, 0.5);
}

h1 {
    color: hsla(120, 100%, 50%, 0.5);
}

In the above example, the background color of the body is set to semi-transparent red and the color of the heading is set to semi-transparent green using HSLA values.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.