Graphics: Colors
In this section, you will learn about:
The available colors on the LCD screen
How to set background and foreground colors
How colors are represented in hexadecimal
Under the grlib.h file, you'll find a large list of colors that the LCD screen can use. As a reminder, you can access this file by holding Ctrl and clicking on the <ti/grlib/grlib.h> part of your include statement. Below is a snippet of some of the colors you can find:
Each of these colors are defined as macros, following the format: GRAPHICS_COLOR_[NAME]. Colors range from basic red, green, and blue to specific shades such as coral, magenta, or lime green. Colors can be set using the following two functions:
Where context is a pointer to your graphics context and value is a 32-bit number that corresponds to your desired color (see below, or alternatively, use one of the macro names defined in the graphics library such as GRAPHICS_COLOR_RED or GRAPHICS_COLOR_DARK_OLIVE_GREEN). To set the background color to magenta, for example, you would do something like this:
Graphics_Context g_sContext;
Graphics_setBackgroundColor(&g_sContext, GRAPHICS_COLOR_MAGENTA);
When the screen is cleared, the LCD screen is colored in with the background color. If you set a new background color, the screen must be cleared in order for the new background color to take effect. Below is some example code demonstrating this. The code sets up the graphics with an initial background color of black. Then, it waits two seconds to change the background color to blue. Finally, it waits two more seconds before clearing the display. Try running this code in Code Composer Studio's debugger and see for yourself:
The foreground color is the color used when drawing new graphics (such as circles, lines, and text). Graphics that were previously on the screen are not affected by changing the foreground color, but new graphics will be drawn with the current foreground color. To demonstrate, the code below will do something similar to the previous code. It will draw a circle using the initial foreground color, wait two seconds, change the foreground color, wait two more seconds, then draw another circle using the new color.
The following information is not necessary to understand how to use colors, but it is interesting information if you want to experiment. Each color macro defined in the graphics library has a 32-bit value with the following format: 0x00RRGGBB, where RR represents red, GG represents green, and BB represents blue. The different colors of light are made of these three primary colors. Other colors are produced by mixing combinations of these colors, as shown in the graphic to the right.
Further shades can be created by adjusting the concentration of each primary color. The colors shown in the graphic to the right assumes that each primary color is at maximum intensity. By reducing that intensity or concentration of any primary color, the resulting color also changes. In the figure below, a darker shade of yellow can be achieved by decreasing the red and green intensities. Since yellow is made up of only red and green, reducing both colors equally results in a similar reduction in brightness for the yellow. Also in the figure below, magenta can be turned into violet by reducing the concentration of red while keeping blue the same.
We can represent the concentrations of each color by using hexadecimal. Each color can has a minimum value of 0 (0x00) and a maximum of 255 (0xFF). Following the format shown before (0x00RRGGBB), we can thus represent a color using a 32-bit number. For a basic red, the value would be 0x00FF0000. The intensity of red light is at its maximum, and the intensities of the green and blue lights are at their minimum. If we wanted to make a basic cyan, we would use the value of 0x0000FFFF, which minimizes red light and maximizes green and blue light.
Figuring out what a color is supposed to look like just by looking at its hex code is not intuitive, hence why the graphics library abstracts them behind macros. Another thing worth noting is that the LCD screen supports only 262K color, which means that each primary color is represented by less than eight bits. When flash your program to your board, the a LCD screen driver actually takes your 24-bit hex color value and converts it into an 18-bit color value. So the colors you see on a hex color picking tool may appear differently when using that same hex code on the LCD screen.