CSS Guide Part 4. Everything You Need To Know About Colors In CSS
Posted by TotalDC
In this article you will learn everything you need to know about colors in CSS. CSS lets you use 16,777,216 colors. You can simply write color name, use RGB (red/green/blue) or hex code.
For example following values gets you the same result:
red
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00
Predefined color names include black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow and many more. Even transparent is considered a color.
Three RGB values goes from 0 to 255, 0 being the lowest level and 255 being the highest level. These values can also be a percentage.
Hexadecimal (hex) is a base-16 number system. We generally use decimal number system (base-10, numbers from 0 to 9), but hexadecimal has 16 digits, from 0 to f.
The hexadecimal number is prefixed with a hashtag (#) and can be three or six digits in length. Three digit version is easier to decipher, first digit like first value in RGB is red, second is green and third is blue, but six digit version gives you more control over the color.
Color application
Colors can be applied by using color and background-color.
h1 {
color: green;
background-color: yellow;
}
This would give you green heading with yellow background. Or you can specify color like this:
h1 {
color: #ffc;
background-color: #009;
}
Colors now changed to yellow and blue.
You can apply the color
and background-color
properties to most HTML elements, including body
, which will change the colors of the page and everything in it.
Leave a Reply