html

Colors in CSS

Colors play a very significant role in designing a webpage. In CSS colors are most frequently used to color the background, text, and border. Here the point is how to set/define the color in CSS?

Well! In CSS colors can be defined through various methods such as using predefined color names, hexadecimal values, etc. This write-up will discuss the following methods to set the background color, text color, and border colors:

  • Predefined color names such as Red, Green, Orange, etc.
  • Hexadecimal color values such as #RRGGBB, #00ff00, etc.
  • RGB color values such as rgb(255, 0, 0); rgb(0, 255, 255), etc.
  • RGBA color values such as rgb(255, 255, 0, 0.7), rgb(255, 0, 0, 0.1), etc.
  • HSL color values such as HSL(0, 100%, 50%), HSL(240, 100%, 50%), etc
  • HSLA color values such as HSL(0, 100%, 50%, 0.5), HSL(240, 100%, 50%, 0.2), etc

All the above mentioned color conventions will be discussed with examples. So, let’s start this journey with the predefined color names.

CSS Predefined Color Names

CSS provides numerous predefined color names for example red, yellow, green, etc. These color names can be used for styling the background, text, etc.

Let’s understand the concept of the predefined color names using the below-given example

Example

Let’s say we have an <p> element and we want to style its text color using predefined color values:

HTML

<p>Welcome to linuxhint.com</p>

CSS

p{
  color: blue;
}

Simply assign the color name to the color property and as a result you will get the following output:

CSS Hexadecimal Color

The Hexadecimal colors are defined by a “#” symbol with six digits code. It takes values from 0 to 15 however the 10 will be represented with A, 11 with B, and so on up to 15 which will be specified with F.

Since hexadecimal is a six-digit code i.e #e3e3e3, the first two slots for the red color, the next two for green, and the last two for blue color. The combination of these six digits specifies a new color e.g. #FFFF00 represents the yellow color.

Example

The below-given lines will set the green background color to

element using hexadecimal values:

HTML

<p>Welcome to linuxhint.com</p>

CSS

p{
  background-color: #00FF00;
}

Above code provides following output:

CSS RGB Color

The RGB color is combination of red, green, and blue. The rgb() function takes values from 0 to 255. Specifying different values in the rgb() function results in various combinations of colors. For example rgb(255, 0, 0) will generate the red color.

Example

The following piece of code specifies the RGB value to set the gray text color of the paragraph:

HTML

<p>Welcome to linuxhint.com</p>

CSS

p{
  background-color: rgb(128, 128, 128);
}

The output sets the gray background color:

CSS RGBA Color

The transparency factor can be added to the RGB colors by adding the alpha value in it. The alpha parameter takes the values between 0 and 1. The lower value makes the color transparent while the higher value makes the color opaque. For example, adding 0.0 will make the color transparent, while 1.0 will make the color fully opaque.

Example

Let’s add the alpha parameter in the above example.

HTML

<p>Welcome to linuxhint.com</p>

CSS

p{
  background-color: rgba(128, 128, 128, 0.2);
}

In the above code 0.2 is added as the value of alpha parameter which makes the background color transparent:

CSS HSL Color

HSL is an acronym of Hue, Saturation, and lightness.

  • The term hue defines the angel inside the color wheel.
  • Saturation defines the color’s intensity.
  • Lightness specifies the lightness levels.

Lightness and saturation will be represented by the % sign.

Example

Let’s color the background of <p> element using HSL color values.

HTML

<p>Welcome to linuxhint.com</p>

CSS

p{
  background-color: HSL(334, 80%, 56%);
}

The above code will set the pink background of the

element.

CSS HSLA Color

The HSL color convention can be extended to the HSLA. The A represents the alpha parameter which is used to add the transparency effects on the color.

Example

Let’s extend the previous example a little bit and add the alpha parameter as well:

HTML

<p>Welcome to linuxhint.com</p>

CSS

p{
  background-color: HSL(334, 80%, 56%, 0.3);
}

The above code will show the following output:

Conclusion

CSS provide multiple colors and methods to set the color of an element like predefined color names, the combination of values between 0 to 255 within the rgb(), or the values for hue, saturation, and light can be used. Furthermore, an alpha parameter can be used with RGB and HSL to add the transparency effect on the color. This write-up presented a comprehensive and elaborated overview of the CSS colors and different methods to set the colors in CSS.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.