Understanding HEX Color Coding

[Brother Tyler]

Several of the Bolter & Chainsword editing tools allow you to customize colors. These include Text Color, Background Color, Header, and Half Header. The Bolter & Chainsword uses HEX color codes for color selection. Users may be familiar with other color coding methods such as color names, RGB color values, HSL, HSLA, and CMYK. None of those methods will work for editing content at the Bolter & Chainsword - the editing tools that are custom to the site only allow users to specify colors using HEX color codes. The editing tools that are part of the standard package allow users to select from a range of colors, but also allow users to specify other colors using HEX color codes.

 

If you want to see basic primers on the other methods, click the links below.

• Color Names (https://www.w3schools.com/colors/colors_names.asp)
• RGB Color Values (https://www.w3schools.com/colors/colors_rgb.asp)
• HSL/HSLA (https://www.w3schools.com/colors/colors_hsl.asp)
• CMYK (https://www.w3schools.com/colors/colors_cmyk.asp)

 

If you prefer any of the above methods and want to convert them into HEX, there is a converter at W3 Schools (https://www.w3schools.com/colors/colors_converter.asp).

 

If you want to see a basic primer on the hexadecimal numbering system, open the spoiler.

Spoiler

The numbering system we commonly use is the decimal, or base 10. In this system, each position has a value from 0-9 (ten values, ten character options); the value on the far right represents the number of ones, the value to the left of that represents the number of tens, the value to the left of that represents the number of hundreds (tens X tens), the value to the left of that represents the number of thousands (tens X tens X tens), and so on. Basically, the value of each position is equal to 10^P-1, where ^P starts at 1 for the position on the far right and increases by 1 at each step to the left (many of you will remember how that works from algebra/mathematics). While we normally omit the indicator for the numbering system base, it would be technically correct to show five hundred eighty-three as 583₁₀. (the subscripted "10" tells us that this is 583 in the decimal/base 10 system).

 

Hexadecimal is a base 16 system, each position having one of sixteen different values. Since we only have ten number characters (0-9), we use letters for the additional characters (A=10, B=11, C=12, D=13, E=14, and F=15). The value of each position is equal to 16^P-1, where ^P starts at 1 for the position on the far right and increases by 1 at each step to the left. If you see 583₁₆, that's equivalent to 1,411₁₀. (whereas the equivalent of 583₁₀ in hexadecimal is 247₁₆).

 

The subscripted numbers tell us which number system is represented. So 15₁₀ means fifteen in the decimal system whereas 15₁₆ means 15 in the hexadecimal system (which equates to 21 in the decimal system). 15₁₆≠ 15₁₀ (15₁₆ = 21₁₀)

 

The value of using a code to represent a color is that the exact color can be specified. Where "blue" might be open to interpretation, 18ABCC gives us an exact color that is close to Thousand Sons Blue. The value of hexadecimal over decimal is that the former only takes two characters to represent a color value that would require three in the latter, with a complete HEX string needing only 6 characters versus the 9 that would be necessary if using a decimal string. The HEX coding allows us to represent any one of 16,777,216 (256³) colors using only six characters.

 

When you enter HEX color codes, you'll enter a 6-character (or 3-character, more on that later) string. This string represents each of the values for red, green, and blue (RGB), each ranging in value from 00₁₆ to FF₁₆ (which equates to 0₁₀-255₁₀). Just as the ₁₀ is not shown in "normal" numbering because it is understood that we're using a base 10 system, HEX values are understood to be hexadecimal, so the ₁₆ is omitted. The HEX codes are really three separate values, the first two characters representing the amount of red, the second two characters representing the amount of green, and the last two characters representing the amount of blue: RRGGBB. The six-character HEX string is usually entered with the pound sign/hashtag (#) at the front (i.e., #RRGGBB), but the site software automatically adds the hashtag so you only have to enter the six hexadecimal characters.

 

So a HEX value of 20552B (something close to Waaagh! Flesh) is not the same as 20552B₁₆. Where 20552B₁₆  is equivalent to 2,118,955₁₀, the HEX value would be broken down as 20552B, or red: 20₁₆, green: 55₁₆, blue: 2B₁₆. Those values correspond to red: 32₁₀, green: 85₁₀, blue: 43₁₀.

 

You will normally see color selection tools depicted as a two-dimensional rectangle, as in Microsoft Paint:

 

 

...or that which is available if you use either the Text Color or Background Color formatting tools:

 

 

The default colors in the color selector shown above are "web safe" colors, but you are free to use the HEX cell (the black box above the Clear button) to choose any color by entering its HEX value.

 

Many color selection tools offer one or more cells for entering values, either one cell for each color or a single cell for all three colors. Often, color editing tools that have cells for each individual color allow users to enter the decimal value for each color (i.e., the values you might use if using the RGB method mentioned above), with the editor then converting each of those into their hexadecimal equivalents and combining them for the HEX color entry, as in Microsoft Paint (see above) and other Microsoft products (see below):

 

 

The Header and Half Header formatting buttons, which are custom buttons, present a cell for members to specify the HEX color of the [half] header fill color:

 

 

Alternatively, you may be familiar with the traditional color wheel and many online tools using that wheel (see links below):

 

 

While online tools show two-dimensional rectangles or circles (since monitors/displays only work in two dimensions), it may be more useful to imagine HEX color selection as a [three-dimensional] cube:

 

 

• Each of the corners of the cube represents some combination of no value (00) or pure value (FF) for red, green, and blue.
• The point where all three colors are 00 is black.
• The point where all three colors are FF is white.
• White and black are opposite and are "connected" by a string of "grays" where all three colors have identical values (e.g., 555555, 6B6B6B).
• The point where red is pure (FF) and both green and blue have no value (00) is pure red (FF0000).
• The point where green is pure (FF) and both red and blue have no value (00) is pure green (00FF00).
• The point where blue is pure (FF) and both red and green have no value (00) is pure blue (0000FF).
• The point where red and green are pure (FF) and blue has no value (00) is pure yellow (FFFF00).
• The point where red and blue are pure (FF) and green has no value (00) is pure magenta (FF00FF).
• The point where green and blue are pure (FF) and red has no value (00) is pure cyan (00FFFF).
• The opposite of pure red (FF0000) is pure cyan (00FFFF).
• The opposite of pure green (00FF00) is pure magenta (FF00FF).
• The opposite of pure blue (0000FF) is pure yellow (FFFF00).
• Pure cyan, pure magenta, and pure yellow are combined with black (key) to form an alternate subtractive color system called CMYK (only mentioned here as trivia).

 

You can envision any HEX color code as telling a computer how to display a color based on its relative position within the cube, the first two characters indicating the color's relative position along the red axis, the second two characters indicating the color's relative position along the green axis, and the last two characters indicating the color's relative position along the blue axis.

 

For example, the image below shows the HEX color code EDC184 telling the software to move ED₁₆ (237₁₀≈ 93%) along the red axis, then C1₁₆ (193₁₀ ≈ 76%) along the green axis, then 84₁₆ (132₁₀ ≈ 52%) along the blue axis, displaying a color that approximates Eldar Flesh.

 

 

It is important to note that color "mixing" via the HEX codes does not follow traditional color wheel concepts (you can see excellent examples at canva.com (https://www.canva.com/colors/color-wheel/) and figma.com (https://www.figma.com/color-wheel/). For example, traditional color theory doesn't mix red and green to create yellow, as occurs in HEX.

 

I previously mentioned that HEX colors can also be entered as 3-character strings. This only works when the red value has the same two characters AND the green value has the same two characters AND the blue value has the same two characters, though the characters used for each color don't need to be the same. For example, HEX FF88AA is functionally equivalent to F8A. You can't shorten a 6-character HEX string to 3-characters if only one or two of the color values have double-characters - all three of the colors must have values with the same character in both spaces.

 

Most software doesn't care about case (upper or lower) when entering HEX codes, so you could enter EDC184 or edc184 (Eldar Flesh, shown above) and achieve the same outcome.

 

IMPORTANT!!!

 

If you enter a six-character string based on decimal results, the computer will not give you what you expect. For example, we have established that HEX 20552B will give you something approximating Waaagh! Flesh. If you were to enter the decimal values 20₁₆=32₁₀, 55₁₆=85₁₀, and 2B₁₆=43₁₀, so 328543, you would get something looking like this result. The results in that example are actually fairly close, but it's possible to get drastically different results.

 

IMPORTANT!!!

 

Whether you affect the color of the text or the background, having sufficient contrast between the text color and the background color is important for readability. It is important to remember that both the default text color and default background color are determined by the theme you are using, and that different members use different themes. While the Header and Half Header formats automatically change the text to white (FFF), the Text Color and Background Color formats only affect the text or background, leaving the other as the default color. When you apply either of those formatting options, it is important to consider how the content will look to members using both themes. For example, if I am composing this while viewing the site on the Carbon (dark) theme and I change the text in the parenthesis below to yellow (FF0), it will look fine. To members that view the site on the Mobile (light) theme, however, the words will be difficult to read.

 

(How does this look?)

 

Conversely, if I'm viewing the site on the Mobile (light) theme and I change the text in the parenthesis below to black, it will look fine. To members that view the site on the Carbon (dark) theme, however, the words will be difficult to read.

 

(How does this look?)

 

The above principles apply to other colors. When formatting either text or background color, it is often prudent to also format the other to ensure that the content can be read regardless of the theme that the viewer is using. If you're willing to put in the work, you can also change themes while you're composing or try your formatting with the opposite text/background color. The Default/Mobile theme uses purplish-gray text (56425C) on a white background (FFF); the Carbon theme uses light gray text (BFBFBF) on a dark gray background (1C1C1C). Using bold text is also a good way to improve contrast when formatting colors.

View full article