This article refers to our legacy product, Page Manager. For the best Finalsite experience, we recommend using our newest product, Composer. To find out how to upgrade your site, talk to your Client Success Manager or learn more on our website.
When configuring some sections of your web site, such as Calendars, you will have the option of choosing colors from the Color Picker. If you are trying to maintain color consistency across multiple sections of the site, you may find it difficult to select the exact same color each time you go to the color picker. To assist with this you can use the hexadecimal color value for any particular color, and enter that value instead of trying to select a color by eye on the color picker.
What is a hexidecimal color value?
Hexadecimal Code Defined:
Imagine, with hundreds of thousands of colors to choose from, how hard it would be to select the exact color you need if you had to do it by eye, or to describe it using only words. Hexadecimal code is a system by which any specific color can be described accurately to a computer, ensuring consistency and accuracy in an electronic display.
A hexadecimal color value is a six-digit code preceded by a # sign; it defines a color that is used in a website or a computer program.
When looking at your computer monitor, you are viewing colors in what is called “RGB mode.” The letters stand for: Red, Green and Blue, the three primary colors of light (note that we are dealing with the primary colors of light, not the primary colors which are used when, for instance, mixing paint).To produce an image, a computer monitor combines those colors in varying relative proportions in order to produce a broad array of hues. RGB notation breaks each of the three colors down into one of 256 values, represented by the numbers 0 through 255*. There are many, many possible combinations of these numbers. This is why RGB is so useful: over 16 million colors can be described with just a few numbers. (NOTE: if you know the RGB values for a given color, you can input them in the color picker instead of the hexadecimal code. Hex codes are very useful when trying to coordinate colors with another web site, however, as unlike RGB they are built into HTML, the language in which web pages are written.)
Hexadecimal code is simply a slightly different way of rendering RGB values. Instead of using the numerals 0 through 255, hex code uses the standard numerals 0 through 9, plus the letters A through F to indicate the numbers 10 through 15. Two hexadecimal digits are used to represent each color, instead of three digits in standard notation.
Hexadecimal values range:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (A=10, B=11, C=12, D=13, E=14, F=15)
Using both numbers and letters, the RGB code for any color value can then be written as a single two-character value. Combining the two-character values for red, green and blue results in a single six-character number which accurately and concisely defines the color in question. Knowing this can give you some idea of what a given hexadecimal code means in terms of actual colors. Let's take a look.
What do all these numbers and letters mean?
The six-character hex code is actually three pairs of numbers in hexadecimal notation. The first pair of numbers describes Red, the second pair describes Green, and the third describes Blue. The higher the numbers in each pair, the higher the relative proportion of red, green or blue is in the defined color. It's not strictly necessary to know how to convert from decimal notation (numbers only) to hexadecimal notation (numbers and letters), however, to understand how to read hex code. It's enough to know that the scale starts with 0, works up through the numerals and continues with the alphabet until it reaches F.**
Using 0 as the lowest possible value and F as the highest, here are some examples to help you understand the code. For instance, we can say that the color #FFFF00 can also be understood as:
Red = FF
Green = FF
Blue = 00.
This means that the color represented by this hex code is comprised of the maximum amount of red light (since both numbers which make up the color-pair representing red are set to the highest possible value), the maximum amount of green light, and no blue light; the result of this combination is yellow.
The highest value of red with no green and no blue, hence this is the brightest red you can get.
No red, a lot of green, and no blue. This is a bright green.
A lot of red, no green, and a lot of blue. With equal parts red and blue, you get purple.
Here are some of the more common standard colors, in hexadecimal notation:
#000000 – Black
#CCCCCC – Gray
#FFFFFF – White
#FF0000 – Red
#0000FF – Blue
#008000 – Green
#FFFF00 – Yellow
#FFA500 – Orange
#800080 - Violet
A hexadecimal code could be any combination of the sixteen characters 0-9 and A-F. Not all hexadecimal colors have pairs of numbers - some have pairs made of numbers and letters, for example: #1A3F80. Unless you're able to convert to decimal notation and multiply two-digit numbers quickly in your head, it isn't as easy to figure out what color this is just by looking at the hex code (it's a royal blue). You could, however, type the six digit value into the color picker and see what comes up. Although it's not a requirement to know what a hexadecimal color value equates to in decimal notation, it sure is nice to know when you can look at something like #1100EE and know that this is definitely a blue and that if you wanted a purple, you could increase the values used to represent red.
*Why are there 256 discrete values for each color? Because computers operate in binary code, which consists of just two elements: 1s and 0s. It's relatively simple for computers and computer programmers to work in powers of two, and 256 is equal to 2 to the 8th power. The actual number of colors which this system can describe is 256 x 256 x 256 = 16,777,216 colors.
**It's slightly more complicated than that: when converting from hex to decimal, you must first add 1 to each digit to shift from the range 0-15 to 1-16; then you can multiply each value in the color-pair to get a number between 1 and 256. Check out Wikipedia for more details on converting between decimal and hexadecimal.