Here you can find out how HTML color codes are structured and which methods can be used to create color tables.
Table of contents
Unterstanding HTML color codes
Most people who stumble across this article are probably designing their own website. However, there are certainly other areas in which colors may be defined with the help of a HEX code. Let's first take a closer look at the structure of this code: It always starts with a hash and is usually followed by six numbers from 0 to 9 or letters from A to F. It does not matter whether the letters are written in upper or lower case. You can find more detailed information in the article about number systems.
RGB components
To understand the whole thing better, let's take the HEX code “#F7C931” as an arbitrary example. We must now divide this code into three blocks, each with two hexadecimal digits: The first block stands for the Red color (R), the second for the Green color (G) and the third block corresponds to the Blue color (B). Therefore, the following applies in our example:
G = C9HEX = 201
B = 31HEX = 49
The hexadecimal values have also been converted directly into the "normal" decimal system. This conversion can be done for the individual components using the Number Systems converter, for example. Or you can simply use the Color Formats Converter specially created for this purpose. The value of each individual component corresponds to the respective color component with a possible hexadecimal value range from 00 to FF or converted from 0 to 255. The HEX code "#000000" stands for the color black, as none of the three channels contributes a color component. With the maximum intensity of all three colors, i.e. "#FFFFFF", we get the "color" white. A pure red is therefore obtained with "#FF0000", a pure green with “#00FF00” and the HEX code "#0000FF" stands for a pure blue.
| #000000 | #FF0000 | #00FF00 | #0000FF | #FFFFFF |
Our example color is therefore a mixture of the colors red, green and blue with the respective intensities: 247/255 Red, 201/255 Green and 49/255 Blue.
| #F70000 | #00C900 | #000031 |
| #F7C931 | ||
HEX codes with only three digits
In some places, you can see HEX codes with just three digits. This is a simplified way of writing, but it can only be used to describe a very small proportion of all possible colors. You simply have to write each of the individual digits twice, then you get the 6-digit color code again. For example, "#123" simply corresponds to "#112233".
Generate color tables
Once you have become familiar with the RGB format, you will soon realize that it is not easy to create good, color-sorted color tables. This is because all three components correlate with each other and changing an RGB channel affects the hue, saturation and brightness of the resulting color. For this reason, it makes sense to take a closer look at the HSV color model instead of the RGB model. A detailed description can be found here.
HSV color model
In the linked article, we learned that in the HSV color model, the hue (H), the saturation (S) and the value/brigthness (V) are used to define a color instead of the three color channels. With exactly these three parameters, you can easily create a color selector or color tables. For example, you define a hue and then iterate over the saturation and brightness.
Conversion from HSV to HEX with JavaScript
In JavaScript, the procedure described above can be implemented with the following function, which converts the three HSV components into a HEX code:
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert HSV to HEX \param[in] $o_H Hue [0,360] \param[in] $o_S Saturation [0,100] \param[in] $o_V Value [0,100] \return HEX string (e.g. #123456) */ //---------------------------------------------------------------------------------------------------------------- function hsv_to_hex(o_H, o_S, o_V) { H = o_H; s = o_S / 100; v = o_V / 100; hi = Math.floor(H / 60); f = (H / 60) - hi; p = v * (1 - s); q = v * (1 - (s * f)); t = v * (1 - (s * (1 - f))); switch (hi) { case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break; default: r = v; g = t; b = p; break; } R = 255 * r; G = 255 * g; B = 255 * b; string_R = dec_to_hex_string(R); string_G = dec_to_hex_string(G); string_B = dec_to_hex_string(B); return "#" + string_R + string_G + string_B; }
Conclusion
In this article, we have learned some details about HTML color codes, i.e. their structure and how exactly this code is to be interpreted. We also came to the conclusion that it is better to use the HSV color model instead of the RGB model to generate color tables. At the end, we presented a function in JavaScript for converting HSV parameters into HEX code.
