CSS Colors - What are Color Types and How to Use Them?

1. Intro To CSS Colors

CSS colors are the main component of CSS styling. Whenever we visit some website, we see colorful headers, menus, sidebars, colored buttons, attractive forms, stylish tables and lists and many more components. All these stylish components have CSS colors. There are many types of colors. See the list below:

• Color Names
• RGB Colors Values
• HEX Colors Values
• HSL Colors Values
• RGBA Colors Values
• HSLA Colors Values

2. CSS Colors By Name

We can specify colors by their names in CSS. The color name will be simple in word form, like Yellow, Orange etc. See the below colors for instance:

3. CSS Colors By RGB Value

RGB stands for Red : Green : Blue. CSS allows us to use RGB value for colors. We can specify an RGB color as follows:

Following are some characteristics of RGB Colors:

• In above representation of RGB colors, each parameter has a value within a range of 0-255
• Each parameter defines its intensity from 0 to 255
• Red has rgb value of rgb(255,0,0). Since red has its maximum value and green and blue parameters are at 0, therefore the color is red
• Similarly, rgb(0, 255, 0) will denote green color and rgb(0, 0, 255) represent blue color
• Likewise rgb(0,0,0) will represent black color and rgb(255,255,255) stands for white color
• We can also define shades of grey by keeping all the three value equal, like rgb(120,120,120) etc

4. CSS Colors By HEX Value

Likewise RGB color values, HEX colors can be specified by the following formula:

• Where rr stands for Red : gg stands for Green : and bb denotes Blue
• The range of rr, gg and bb is 00-99 and aa upto ff
• Also you can define colors by using capital letters, like AA, BB, CC, DD, etc
• Which is similar to RGB color values i.e 0-255
• For instance: #ff0000 will represent red color as rr is at highest value
• Also equal values like #000000, #787878, #686868, #3a3a3a, #3f3f3f, can define shades of grey

Consider the below panel and try live in codelab to understand the HEX colors more precisely.

5. CSS Colors By HSL Value

Furthermore to RGB and Hex colors, there is another way to select colors, which is called HSL color values.

• Hue is the degree on the color wheel and it has range between 0 to 360
• 0 degree hue value will denote Red color, 120 degree will display Green color and 240 will display Blue color
• Saturation is the second parameter that has range in percentage from 0 to 100%
• 0% means the color contains shades of grey whereas 100% means the color has its full intensity
• Lightness being third parameter and has range similar to saturation i.e 0% - 100%
• 0% means full black 50% will display neither black nor white and 100 will define white color
• Most importantly, always write % character with saturation and lightness values, even if it is 0%

Look at the following examples to clear the prospective: Since 0 degree and 360 degree are side by side on color wheel, therefore they have almost similar or matching color display.

Below are some color combinations for red, green and blue with saturation range from 0% to 100%.

Below are some color shades for red, blue and green with lightness values from 10% to 100%. As you can see 10% lightness is almost black and 100% lightness is complete white.

6. CSS Colors By RGBA Value

We can extend RGB colors to RGBA by another parameter called alpha channel, which defines the opacity of the color. We can denote an RGBA color as follows:

• Where the alpha parameter has its values within the range from 0.0 to 1.0
• 0.0 making the color fully transparent and 1.0 means not transparent at all

See the example below to understand:

7. CSS Colors By HSLA Value

We can extend HSL colors to HSLA by another parameter called alpha channel, which defines the opacity of the color. We can denote an RGBA color as follows:

• Where the alpha parameter has its values within the range from 0.0 to 1.0
• 0.0 making the color fully transparent and 1.0 means not transparent at all

See the example below to understand: