Color Code

You can use custom colors in line formatting using the HTML color code syntax. This requires a hexadecimal value preceded by a pound sign. This is an example of using a custom color:

>#00C6B3:This line will be highlighted in teal

HTML color codes divide a color into three parts: red, green and blue. Every two characters of the color code represents the amount of color to be applied. Colors are 24 bit which results in more than 16.7 million color combinations which far exceeds the eye's ability to perceive a difference in those colors. Each component is 8 bits which results in a value from 0 through 255.

Hexadecimal encoding uses numbers and the alphabetic letters A through F to represent numbers. A through F represent decimal values 10 through 15. Using this method, 0-255 can be represented in two characters. The first character in the two-character sequence represent 0-15 multiplied by 16. The second character is added to that in the range of 0-15.

In the example above, 00 is simply a red value of 0. That was easy, right? The value C6 is C or the decimal value 12 multiplied by 16 which results in 192 and then 6 is added to that for a final value of 198. Likewise, B3 is the value of B or 11 multiplied by 16 which results in 176 and then the 3 is added to that for 179. Thus, the RGB (red, green, blue) values are 0, 198 and 179.

You can also express opacity using this syntax by adding an additional two hexadecimal. For instance, you could add 80 to the end of the hexadecimal value to make the color 50% transparent. Keep in mind that if you don't express an opacity with highlight colors, OnSong will automatically use an opacity of 50%. For instance, if you want the font color to be solid blue with 50% transparency, you would type:

&#0000FF08:This line will have text in 50% opaque blue.

You can also use shorter hexadecimal codes to express colors with less typing, albeit less color options. For instance, you could type the following to show text as red:

&#F00:This text will appear in a red font.

Likewise, you can use four characters to add the additional opacity like this:

&#0F09:This text will appear in 50% green font.

Now that you know how to do this, you may be happy to know that there are utilities available to help you pick colors and give you that HTML color code without all the mental gymnastics. We recommend colorpicker.com to help you blend colors and use the resulting HTML color code.