A Complete Guide for CSS Color Model

#RRGGBB[AA] or #RGB[A]

#RRGGBB[AA] is formed by color components from RR (red), GG (green), BB (blue), and AA (alpha)

• The value from RR (red), GG (green), BB (blue), and AA (alpha) are hexadecimal characters (value falls between 00–99, AA–FF). 
• The value from AA (alpha) is optional. 

In this example, the color code #FF0000 will be displayed in red. This is because the red component is set to its highest value (FF) and the other color component are set in the lowest value, which is 00.

To add transparency, add the value AA (alpha) in the rear.

The #RGB[A] is a shorter version of the #RRGGBB[AA]. For eg, #F003 is the same color as #FF000033.

rgb() or rgba()

rgba() is formed by the color components from r (red), g (green), b (blue), and a (alpha)

• The value from r (red), g (green), b (blue) are formed by integer numbers (value falls between 0-255). 
• a (alpha) is optional (value falls between 0.00 - 1.00). 

In this example, the CSS code rgba(255,0,0) will displayed in red color, this is because the red component is set to its highest value (255) and the other color component are set to 0.

To add transparency, add in the value a (alpha) in the rear. The alpha value falls between 0.00 (fully transparent) to 1.00 (fully opaque).

More examples:

hsl() or hsla()

hsla() is formed by the color components from h (hue), s (saturation), l (lightness), and a (alpha)

• The value from h(hue) is referring to the degree on the color wheel
  • 0deg or 360deg is red, 120deg is green, 240deg is blue
  • value falls between 0-360

• The value from s(saturation) is referring to the percentage of the saturation
  • 0% is completely unsaturated (gray) and 100% is the full color
  • value falls between 0-100%

• The value from l(lightness) is referring to the percentage of the lightness
  • 0% is black, 100% is white
  • value falls between 0-100%

• The value from a(alpha) is referring to the percentage of the transparency
  • a (alpha) is optional
  • 0% is fully transparent, 100% is fully opaque
  • value falls 0.00 - 1.00

In this example, hsla(360, 100%, 50%, 1) will displayed in red

hwb()

hwb() is formed by the color components from h (hue), s (whiteness), l (blackness), and a (alpha)^*Optional

• Similar with hsl() color model, The value from h(hue) is referring to the degree on the color wheel
  • 0deg or 360deg is red, 120deg is green, 240deg is blue
  • value falls between 0-360
• The value from w(whiteness) is referring to the percentage of the whiteness while b(blackness) is referring to the percentage of the blackness. Both colors will be mixed to produce the final result:
  • for eg: 0% of whiteness + 100% of blackness to produce a black color.
  • value falls between 0-100%
• The value from a(alpha) is referring to the percentage of the transparency
  • a (alpha) is optional
  • 0% is fully transparent, 100% is fully opaque
  • value falls between 0-100%

For example,

• hwb(360 0% 0%/ 20%) = red, opacity 20%
• hwb(0 0% 100%) = black
• hwb(0 100% 0%) = white

background-color:hwb(360 0% 0% / 100%);

background-color:hwb(360 0% 0% / 20%);

background-color:hwb(120 0% 0%/ 1);

background-color:hwb(240 0% 0%/ 100%);

background-color:hwb(0 100% 0%);

background-color:hwb(0 0% 100%);