Part 4 - Hexadecimal

by Florence W Deems

Hexadecimal color values are supported in all major browsers.

The word, hexadecimal (HEX) means 16 (6 + 10).

A hexadecimal color is specified with a code: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers regulate the saturations of each of the 3 primary colors of light.

The order of the primaries is always written the same: red, then green, finally blue.

Each primary always has 2 values.

All values must be between 0 and F, in steps: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. These represent the amount of saturation of each of these three primary hues.

For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value/saturation (ff) and the others are set to 0. Those zeros (0) mean that the other two primaries, in this case red and green, are absent.


HEX colors:

#p1 {background-color:#ff0000;} / * red */

#p2 {background-color:#00ff00;} / * green */

#p3 {background-color:#0000ff;} / * blue */

#p4 {background-color:#ffff00;} / * yellow */

#p5 {background-color:#ff00ff;} / * cerise */

The following codes are placed in the head tag:

And the following goes in the page body wherever you want the paragraph to be colored:

Hexadecimal colors do not need to specify an additional alpha channel, because the lightness or darkness is built into the 16 levels of each primary hue. So everything can be specified via only 6 numbers and letters for each hue. #333300 would result in such a dark yellow that it would appear extremely dark brown, while #cccc00 would result in a bright yellow. If you wanted a light bright yellow, you would write #cccc99.

However, if you want to add an alpha channel to the hex color code of 6 numerals, here is an excellent tutorial by Sally on how to do this. Scroll down to "Hex Transparency."

CSS Legal Color Values:

Colors Sorted by Hex Values, with names, shades (towards black) and mix (towards white):

Predefined color names (cross browser):

Here's an absolutely fantastic color chart. Arranged alphabetically by color names, it shows the hex, rgb according to each channel, and saturation and lightness of each. In this way, if you are using the HSL or any other color management system, you can easily find what you need to put into each CSS style color line in the head.

Please read these tutorials in the order given below
Introduction to Colors on Web Pages
Part 1 - HSL Colors ~ Part 2 - HSLA Colors
Part 3 - RGB Colors with Alpha Channel
Part 4 - Hexidecimal Colors
Part 5 - RGBA for Table Cells
Part 6 - Border-Collapse: Separate

Parts 1-4 are about coloring the backgrounds of individual paragraphs. If you don't like the spaces that show between the different colored paragraphs, then try putting each paragraph within a table cell and coloring each cell with a different RGBA color. Simply substitute #td for the #p numbers. See Part 5 above.

Monday 26th of May 2014 10:04:01 AM

See Flo's Other Tutes

~ Arbor Hosting ~