Shiny Labels 4 U

Look, y'all wanna make your lyrics all rainbow-y & fancy? Cool. Cool cool cool. Here's the tea on custom colors (aka the rabbit hole we're about to go down):

You can totes use custom colors in line formatting using the HTML color code syntax. This requires a hexadecimal value preceded by a pound sign. Buckle up, it's about to get nerdy:

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

HTML color codes are basically RGB on steroids—they divide a color into three parts: red, green & 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 honestly? Way more than your eyeballs can even tell apart. Each component is 8 bits which results in a value from 0 through 255. (Your monitor is basically flexin' for no reason.)

Hexadecimal encoding uses numbers & 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? (We know it wasn't.) The value C6 is C or the decimal value 12 multiplied by 16 which results in 192 & 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 & then the 3 is added to that for 179. Thus, the RGB (red, green, blue) values are 0, 198 & 179. (You're welcome for the math lesson, btw.)

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 & give you that HTML color code without all the mental gymnastics. We recommend colorpicker.com to help you blend colors & use the resulting HTML color code. (Thank us later when your brain stops hurtin'.)