# HTML Colors 
We can change the color of an element using predefined color names or RGB, HEX, HSL, RGBA, HSLA values.

## Color Names 
A color of an element can be changed using the color name. 

![Example.png](https://steemitimages.com/DQmSeqka7ChoKqsaBRHghteSSoPv25TuFm51bmkGBPWE7b2/Example.png)

## Background Color 
If it's the background color you want to change, use the background-color property. 

![Example.png](https://steemitimages.com/DQmY6NGsvmCdLJyCiU247CndjJs2cAG9GqwaZvWUP79qaui/Example.png)

## Text Color
If it's the text color you want to change, use the color property. 

![Example.png](https://steemitimages.com/DQmeJ2rueNzEDWNwaqzanGHiwCJbKxxXFcSdaTAvB8W9L35/Example.png)

## Border Color 
You can change the borders color using the border property. 

![Example.png](https://steemitimages.com/DQmWKRefUH9LSZCsZj3gFJWZ6YG1MordfDHUReHNezDAyu9/Example.png)

## Color Values
To have more choices of colors, we can use RGB values, HEX values, HSL values, RGBA values, and HSLA values.

![Example.png](https://steemitimages.com/DQmNSXASUMMuWMKbuNVJjeh4n7kKvNpyxDEwsxGwANnuQ4Y/Example.png)

## RGB Value
RGB value can be specified using this formula: rgb(red, green, blue). 
The parameter (red, green, and blue) defines the intensity of the color. Use between 0 and 255 as the value of the parameter. 

Here are some examples so you can understand more the RGB value: 
* rgb(255, 0, 0) will result to red, because red is set to its highest value (255) and the others are set to 0. Red is the only one who has a value. Therefore, it will display red. 
* rgb(0, 0, 0) will result to black because all parameters are set to 0. 
* rgb(255, 255, 255) will result to white because all parameters are set to 255. 

Try to experiment by setting different values. 

![Example.png](https://steemitimages.com/DQmZnTLotqD8pRuFLCBV3pFhuEjdiJPmEyDH1TfveBc44TC/Example.png)

Shades of gray are often defined using equal values for all the 3 light sources. 

![Example.png](https://steemitimages.com/DQmYWtDeghGLf3cKRr6tuDLH34wAPmgqMZxdG1z8f3zfiBb/Example.png)

## HEX Value 
We can also use hexadecimal as value of the color. The hexadecimal value looks like this: #rrggbb. rr (red), gg (green) and bb (blue) are the parameters. Use between 00 and ff as the value of the parameter. It's just the same as decimal 0-255 but since this is a hexadecimal 255 is equal to f.

Here's an example: 
* #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

![Example.png](https://steemitimages.com/DQmdVkEnWuG5UJbAK4s5QBFEwMqzUa4bcPef8bKgdUKHdEL/Example.png)

Shades of gray are often defined using equal values for all the 3 light sources.

![Example.png](https://steemitimages.com/DQmVsWKfYj5dnnFwmRcU1nthzZ4aPZY7Sig8wwM2yjCo45w/Example.png)

## HSL Value
We can also use HSL (hue, saturation, and lightness) value for changing the colors. HSL value should be written in this form: hsl(hue, saturation, lightness). 

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

![Example.png](https://steemitimages.com/DQmTC8GTy9wbDCd9HQB8RJcV3n185gKxS7kNGxxWckcgQ1j/Example.png)

### Saturation
Saturation is the intensity of the color. 
* 100% is pure color, no shades of gray
* 50% is 50% gray, but you can still see the color.
* 0% is completely gray, you can no longer see the color.

![Example.png](https://steemitimages.com/DQmPiRYrRKaH28MYqJj1ruRdiYgQcpD1iA8mVLAEM4W7zpc/Example.png)

### Lightness
Lightness is the amount of light you want to give to the color. 
* 0% means no light (black) 
* 50% means 50% light (neither dark nor light) 
* 100% means full lightness (white).

![Example.png](https://steemitimages.com/DQmaELRve23yHSwf9Ti9VzyjsA1c93rVf8Ue3svzoaDzEBY/Example.png)

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades. 

![Example.png](https://steemitimages.com/DQmfUypWZdERte8weDEnZ1uWZkfUsyCZ6QLQoDcGmc4Mr38/Example.png)

## RGBA Value 
Another way of changing the color is using the RGBA  value. It is almost the same with the RGB value but this one has an alpha channel  which specifies the opacity for a color. RGBA is written like this: rgba(red, green, blue, alpha). 

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). 

![Example.png](https://steemitimages.com/DQmRgeNLQttzTvyUp2Sv9zhWNFeJQBRszCiLxJUqbiYSqGP/Example.png)

## HSLA Value
The last form we can use for the colors is the HSLA value. It is almost the same as HSL value but it has an alpha channel which specifies the opacity for a color. This is the form for HSLA value: hsla(hue, saturation, lightness, alpha). 

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). 

![Example.png](https://steemitimages.com/DQmUZ7hTuHGa3TDpVDYDHFAmTMjSTJfbLMY5dtCVvMAm33h/Example.png)

<hr> 

### HTML 5 Tutorials:
[HTML 5 Tutorial #1 - Introduction](https://steemit.com/steemit/@cj23/html-tutorial-1-introduction)
[HTML 5 Tutorial #2 - HTML Editors](https://steemit.com/steemit/@cj23/html-tutorial-2-html-editors)
[HTML 5 Tutorial #3 - HTML Basic](https://steemit.com/steemit/@cj23/html-5-tutorial-3-html-basic)
[HTML 5 Tutorial #4 - HTML Elements](https://steemit.com/steemit/@cj23/html-5-tutorial-4-html-elements)
[HTML 5 Tutorial #5 - HTML Attributes](https://steemit.com/steemit/@cj23/html-5-tutorial-5-html-attributes)
[HTML 5 Tutorial #6 - HTML Headings](https://steemit.com/steemit/@cj23/html-5-tutorial-6-html-headings)
[HTML 5 Tutorial #7 - HTML Paragraphs](https://steemit.com/steemit/@cj23/html-5-tutorial-7-html-paragraphs)
[HTML 5 Tutorial #8 - HTML Styles](https://steemit.com/steemit/@cj23/html-5-tutorial-8-html-styles)
[HTML 5 Tutorial #9 - HTML Text Formatting](https://steemit.com/steemit/@cj23/html-5-tutorial-9-html-text-formatting)
[HTML 5 Tutorial #10 - HTML Quotation and Citation Elements](https://steemit.com/steemit/@cj23/html-5-tutorial-10-html-quotation-and-citation-elements)
[HTML 5 Tutorial #11 - HTML Comments](https://steemit.com/steemit/@cj23/html-5-tutorial-11-html-comments)