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.
Background Color
If it's the background color you want to change, use the background-color property.
Text Color
If it's the text color you want to change, use the color property.
Border Color
You can change the borders color using the border property.
Color Values
To have more choices of colors, we can use RGB values, HEX values, HSL values, RGBA values, and HSLA values.
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.
Shades of gray are often defined using equal values for all the 3 light sources.
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).
Shades of gray are often defined using equal values for all the 3 light sources.
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
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.
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).
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.
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).
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).
HTML 5 Tutorials:
HTML 5 Tutorial #1 - Introduction
HTML 5 Tutorial #2 - HTML Editors
HTML 5 Tutorial #3 - HTML Basic
HTML 5 Tutorial #4 - HTML Elements
HTML 5 Tutorial #5 - HTML Attributes
HTML 5 Tutorial #6 - HTML Headings
HTML 5 Tutorial #7 - HTML Paragraphs
HTML 5 Tutorial #8 - HTML Styles
HTML 5 Tutorial #9 - HTML Text Formatting
HTML 5 Tutorial #10 - HTML Quotation and Citation Elements
HTML 5 Tutorial #11 - HTML Comments
Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://www.w3schools.com/html/html_colors.asp
wow.It's great news.hope everyone like it.keep sharing.it is a knowledheable post.go ahead
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by cj23 from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.
You got a 0.79% upvote from @postpromoter courtesy of @cj23!
Want to promote your posts too? Check out the Steem Bot Tracker website for more info. If you would like to support the development of @postpromoter and the bot tracker please vote for @yabapmatt for witness!
This post has received a 0.63 % upvote from @booster thanks to: @cj23.
This post has received gratitude of 0.97 % from @appreciator thanks to: @cj23.