LUNY.CO.UK

GUI Development:A Portable GUI

Colour by any Name

There are at least three levels of colour usage on a GUI. The lowest level is from the GUI engine. As mentioned different hardware maps RGBA values differently depending on its configuration and resolution. For instance you could have a 16 bit mapping where 4 bits are used for each R,G,B and A value, or a 24 bit mapping where 6 bits are used for each R,G,B and A value, or an indexed palette, where each byte represents an index to an RGBA value held in memory. But either way this is the raw colour value and will require an API to convert a common RGBA value into something the hardware could use. I tend to have a standard 32 bit RGBA (8 bits per value) which can be cut down into the hardware requirements.

This leads us to the second level. All objects could store the common RGBA value for its colours which gets passed through the API when drawing the objects. This gives great flexibility on colouring.

The third level is what the developer of the GUI screens sees. If you're using themes to stylise your designs then I have found it best to actually stick to simple colour index values or enumerations (I.E Blue, Green, LightRed etc). This means the developer does not have to worry about the exact RGBA values when putting a screen together instead they just set an object to 'Red', and let the GUI theme decide what kinds of reds to use.

For example you may have a button which has a graduated background going from light to dark. If it is set to 'Blue', then the GUI will create the gradient using the correct light blue to the correct dark blue. On a different theme the blues maybe much darker, and be adjusted so.

This also keeps consistency across the different screens. If there is more than one developer working on the screens you are bound to end up with some blues being different on the menu compared to the settings screen. By limiting the choice and using names, all of the screens can be of the same shades regardless of the amount of developers you have.