CSS colors and its types

This lesson will help you understand what are CSS colors and its different types and how to use them.

Quick Hands-on

Points to Remember

• There are following common type of colour model:
  • Named colour model
  • RGB Model
  • RGBA Model
  • Hexadecimal Model
  • HSL Model

• Example of Named colour: brown, white, grey, black, olive, aqua, aliceblue etc

• Full list of Named Colour: https://developer.mozilla.org/en-US/docs/Web/CSS/named-color. 

• RGB colour model define the colour in Red, Green and Blue colour components with each colour value ranging from 0 to 255.

• Use the RGB Calculator by w3school: https://www.w3schools.com/colors/colors_rgb.asp

• The last value “A” in the RGBA colour model is Alpha which defines the transparency level. The value 0 means full transparency and 1 means full opaque. 

• The Hexadecimal Model describes the colour using its primary colour components (red, green, blue) written as hexadecimal numbers.

• The Hex model syntax is “#RRGGBB” which means:
  • RR as red component of colour with number between 0 to FF (255),
  • GG as green component of colour with number between 0 to FF (255), and
  • BB as a blue component of colour with numbers between 0 to FF (255).

• Read more about Hex Colour Model in Mozilla Hex Color doc.

• The HSL Model describes the colour according to Hue, Saturation and Lightness  components.

• Use the following HSL Calculator by w3school: https://www.w3schools.com/colors/colors_hsl.asp