Coding colors is probably one of the most common tasks that you will do when styling a web page using CSS. There are different ways to code a color in CSS. Normally there are four ways and they are best suited to different scenarios.

  • Coding colors in CSS using color names:

This is the most intuitive way to represent a color in CSS - just use the color names. In this way, “red” is red, “blue” is blue, and so on and so forth. However, there are limitations to this method. In CSS, we only have 140 color names up to the standard of CSS3. The advantage of this method is also very obvious: more intuitive and easier to remember.

 #name {
   color: red;
 }
  • Coding colors in CSS using hexadecimal values:

This is probably the most browser compatible way to code a color in CSS. There are 255*255*255 different colors by this method, enough for us to use. Limitations are: not so easy to remember and to code a known color. Usually we need some software tools to help us to design a color using hexademical codes. Color picker softwares will be a help.

 #name {
    color: #f00;
 }
  • Coding colors in CSS using RGB values:

This is just a different representation form to the hexadecimal values. Each of the RGB color is represented by an integer number between 0 and 255 or an float number between 0% and 100%. It is a good method to use if you know very well how to design a color by mixing different amount of red, green and blue. You can also have a fourth value Alpha for the transparency control of the colors as a plus compared to the hexadecimal color codes.

 #name {
    color: rgb(255, 0, 0);
 }
  • Coding colors in CSS using HSL values:

I would say this is the both intuitive and comprehensive way to code a color in CSS. H is for hue and the value is between 0 and 360, other values are allowed but will be recomputed by module 360. S stands for saturation and the value is between 0% and 100%. L stands for lightness and the value is also between 0% and 100%. Like rgba, hsla also adds the value for alpha channel to the color. Although hsl is an intuitive way to code color in CSS, it is not widely used as the other color coding methods. My guess is that most of the front-end developers are not very professional at using image processing softwares such as photoshop before diving into CSS coding. And in image processing softwares hsl is being widely used.

 #name {
    color: hsl(0, 100%, 50%);
 }

You can use either of the four different ways to code a color in CSS and the decision is mostly based on which color method is already used in the project.:smirk:

The best reference is :link: W3C CSS Color Standards.