How to Use CSS Colors

CSS helps to style HTML web pages. CSS codes are easy, and they make a website more visibly attractive and interactive with colors and styles. Let’s see different CSS color syntax and tags and how to use them.

Color Keywords

One simple way to specify colors in CSS is by using color Keywords. For rendering color in the text, you’ll need to specify its keyword. For example, the grey color has the keyword=grey. This is how it works:

Name {
 color: blue;
}

So, the HTML element ‘Name’ will be assigned the color blue. You can also specify color in more detail with background color, outline color, and border color like this:

div {
  background-color: blue;
 }
 h1 {
  color: yellow
 }

CSS Hex Value

In CSS, every color is attached to a Hex Value. Hex values are combinations of 0-9 and A-F. for example, the color grey has Hex Value= #808080. So, to render grey color to an element, you’ll need to specify hex Value= #808080. This is how it works:

p {
 color: #808080
}

It can be also simplified as:

h1 {
 color: #0f0;
}
/* lime: same as #00ff00 */

To change the opacity, two more numbers can be added to the hex value like this:

h1 {
 Color: #00ff0040
}

CSS RGB Codes

RGB refers to red, green, and blue. In this, we use these three primary color code combinations to create more colors. You can assign any value from 0 to 255 to red, green, and blue for styling. For example, red is assigned to 80, green is assigned to 150, and blue is assigned to 255. Higher the value; more of that color in the combination. It is represented by the prefix ‘rgb’. This is how it works:

p {
 color: rgb(128, 80, 200);
}
/* purple */

CSS RGB color codes are mostly used for web designing. To make it opaque, you can add an alpha value (a) prefix to the RGB value; rgba. (a) value is for transparency, and it lies between 0 and 1.

body {
 color: rgba(255, 0, 0, 0.8);
}

CSS HSL Value

HSL refers to Hue Saturation Lightness. In this function, hue is measured between 0° to 360°, and saturation and lightness are measured between 0 to 100%. It is similar to RGB color code and represented with the prefix ‘hsl’.

h2 {
 color: hsl(0, 70%, 35%);
}

To alter the opacity, you can use the hsla() function.

h2 {
 color: hsla(0, 70%, 35%, 0.5);
}

CSS Gradients

You can also use gradients in CSS. Gradients are transitions between two or more colors. This makes web pages more stylish. There are three gradients:

Linear-Gradient()

div {
 background-text: linear-gradient(direction, stop1, stop2);
}

Direction specifies the direction of gradient; like ‘to left’. Stop1 and stop2 are color stops in the gradient.

Radial-Gradient()

div {
 background-text: radial-gradient(position, stop1, stop2);
}

Position specifies the center of the gradient.

Conic-Gradient()

div {
 background-text: conic-gradient(position, stop1, stop2);
}

It is similar to a circle of color transition rotating around a center. That’s all for the CSS color codes.

Other useful articles: