CSS color

CSS color

Online by JSC0d3
August 1, 2016 | | 1316 recognitions

CSS brings 16,777,216 colors to your disposal. They can take the form of a name, an RGB (red/green/blue) value or a hexcode.

The following values, to specify full-on as red-as-red-can-be, all produce the same result:

  • red
  • rgb(255,0,0)
  • rgb(100%,0%,0%)
  • #ff0000
  • #f00

Predefined colour names include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. transparent is also a valid value.

[alert type=”blue” icon=””] With the possible exception of black and white, color names have limited use in a modern, well-designed web sites because they are so specific and limiting. [/alert]

The three values in the RGB value are from 0 to 255, 0 being the lowest level (no red, for example), 255 being the highest level (full red, for example). These values can also be a percentage.

Hexadecimal (previously and more accurately known as “sexadecimal”) is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.

The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#ff0000 becomes #f00, #cc9966 becomes #c96, etc.). The three-digit version is easier to decipher (the first digit, like the first value in RGB, is red, the second green and the third blue) but the six-digit version gives you more control over the exact color.

[alert type=”blue” icon=””] CSS3, the latest version of CSS, also allows you to define HSL colors — hue, saturation and lightness. [/alert]

Colors can be applied by using color and background-color (note that this must be the American English “color” and not “colour”).

A blue background and yellow text could look like this:

header {
    color: yellow;
    background-color: blue;
}

These colors might be a little too harsh, so you could change the code of your CSS file for slightly different shades:

body {
    font-size: 14px;
    color: navy;
}

header {
    color: #ffc;
    background-color: #009;
}

Save the CSS file and refresh your browser. You will see the colors of the first heading (the h1element) have 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.

JSC0d3's Logo
About JSC0d3

JSC0d3 is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

On the same idea

Posted by | July 9, 2017

Grid systems are an incredibly powerful tool when creating any sort of website There are many grid systems out there, such as Bootstrap and Zurb...

Posted by | July 8, 2017

There are numerous advantages of WordPress SASS for WordPress developers You have most likely heard numerous contentions for utilizing a...

Posted by | July 7, 2017

Writing in SCSS lets you use features that don't exist in CSS yet like variables and nesting The biggest feature though, in my opinion, is mixins I'm...

Previous PostBackNext Post

Leave here an impression