Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Hexadecimal Colors
Using hexadecimal color values, or hex colors for short, there are 16,777,216 unique colors you can use in your web pages. Go ahead and count them, I’ll wait.
Hex colors offer the most accurate color consistency from browser to browser. This is my preferred method of coding colors. Of course, the human eye can’t distinguish that many different colors, but it sure gives us all the choices we need.
NOTE | There are two other methods of identifying colors. RGB colors include an alpha channel, which means you can set the level of transparency, and named colors lets you use certain colors names. The number of named colors are very limited by comparison. |
Hexadecimal color values are alphanumeric representations of red, green, and blue. A hex number is a six-digit code, with each digit having an alphabetical value from A-F and/or a numerical value from 0-9. The format is #rrggbb (red-red-green-green-blue-blue).
In the graphic on the right you can see a visual representation of how these alphanumeric values form a hex number.
In HTML coding, the hex code is always preceded by a hash mark, also known as a pound sign. The first two digits represent the red value, the next two the green value, and the last two the blue value.
You can use any combination of letters and numbers in any order in the code. The values represent a percentage. The base percentages are as follows:
- FF = full intensity of the color.
- B0 = 75% intensity of the color.
- 80 = 50% intensity of the color.
- 40 = 25% intensity of the color.
- 00 = 0% intensity of the color.
A hex code of #FFFFFF is full intensity for all three color values. The result is the color white. A hex code of #000000 is no intensity for all three color values. The result is the color black.
Everything in between is confusing!
If you don’t get it, don’t sweat it. You don’t really have to remember all that. You can make up numbers and see what color it turns out like, or you can use software programs that let you pick a color and it will tell you the hex code.
How to Code a Hex Color
Let’s say we want to change the text color for one paragraph using an inline style and that we want to use a hexadecimal color. That would be coded like this:<p style="color: #6c4e2b;"> content </p>
Using that would change the color of the text in the paragraph from the default color to a color approximating chocolate milk , like this paragraph. Does that make you want chocolate milk?
Chocolate Milk . . . mmm num-yummy!
Hex Short Code
When the first and second digits are the same, the third and fourth digits are the same, and the fifth and sixth digits are the same, you can use “short code” to express the hex color.In other words, the following two hex colors are exactly the same:
#bb7700
#b70
If only three digits are present, the browser doubles each one to make a six digit hex code. By the way, that color is about the color of candied yams on my computer.
Do you think I have a food problem?
Shades of Gray
If all six digits of a hex code (or all three using the hex short code) are the same, the result is black (#000), white (#fff), or a shade of gray. Here are a few examples:Exclusive!
The background color of the block to the left is named estruvienne galooshish. No browsers will recognize that color though, and you won’t find it named anywhere else. Hey, it’s not easy to come up with exclusive stories these days without making them up yourself!
