huey"> rgb.txt"> ] >
&huey;: A color and font selection tool John W. Shipman
tcc-doc@nmt.edu
$Revision: 1.39 $ $Date: 2008/01/09 04:45:39 $ Describes a program to display and modify colors and fonts, using the Python programming language and the Tkinter widget set. This publication is available in Web form and also as a PDF document. Please forward any comments to tcc-doc@nmt.edu.
Introduction The selection of colors and fonts of type is an important part of the design process for graphical user interfaces (GUIs). &huey; is a program you can use to see how colors and fonts look on your screen. &huey; allows you to work with two colors at once: Type is shown in the text color. The initial text color is black. You might also think of this as the foreground color. The area behind the type is the background color. The initial background color is bright red. For those interested in the implementation of this program, see &huey;: Internal maintenance specification. As an example of Python and Tkinter programming, the entire Python source for the program is presented there using a lightweight literate programming (LLP) style.
Files discussed in this publication Here are online links to all the files required by this program (other than Python and Tkinter installs). huey: The main script. scrolledlist.py: Source for the ScrolledList compound widget. fontselect.py: Source for the FontSelect compound widget. huey.xml: DocBook source for this document.
Color models Before we discuss the operation of &huey;, a brief review of color space theory is in order. The author has relied heavily on one book as a comprehensive reference on color theory as it relates to computer graphics.
Foley, James D., Andries van Dam, Steven K. Feiner, and John F. Hughes. Computer graphics: principles and practice. Second edition. Addison-Wesley, 1992. ISBN 0-201-12110-7.
There are several different ways to represent a color as a set of three numbers called parameters. This program supports three of them. In each model, each parameter varies from 0 to 255.
The HSV model: hue, saturation, and value In the HSV model, the three parameters used to describe a color are called hue, saturation, and value. The hue parameter describes the general kind of color. As the hue parameter ranges from 0 to 255, the color starts around the color wheel, displaying first red, then yellow, green, cyan, blue, magenta, and finally back to red. The saturation parameter describes how strong the color is. A color with full saturation (a value of 255 in this program) has full color. As the saturation decreases to zero, there is less and less color tint. The value parameter describes how light or dark the color is. A value parameter of zero will always be black, regardless of the other parameters. Increasing the value to 255 lightens the shade. A color with full saturation and value is called a primary color. For example, if the hue is 0 and the saturation and value are at 255, the color is bright, primary red.
The RGB model: red, green, and blue The three parameters of a color in the RGB model describe the relative amounts of red, green and blue. The RGB model is sometimes called the additive color model. If all three parameters are zero, the color is black. Increasing a parameter adds more and more pure color. For example, if the R and B parameters are zero, and the G parameter is 255 (the maximum), you will see pure green. White has all three parameters at 255. Computer display panels use the RGB model. Additive color mixing is also used in stage lighting. For example, to light a scene in yellow, mix red and green.
The CMY model: cyan, magenta, and yellow The CMY color model is also called the subtractive model. In this model, white has all three parameters at zero. Increasing the amount of cyan is the same as subtracting red; increasing magenta is the same as decreasing green; and increasing yellow is the same as decreasing blue. Black has all three parameters at their maximum. Color darkroom work uses the CMY model. To correct the color of a film original, the enlarger's color head can produce light with a wide range of colors. The color head starts with pure white light. Knobs on the color head use cyan, magenta, and yellow filters to subtract red, green, and blue respectively.
Operation of &huey; This program is written in the Python programming language, and it uses the Tkinter widget set. You will need both these packages installed on your local system. For Python, see the Python web site. For Tkinter, see How to install Tkinter. To run &huey;, copy the script to a convenient location and run it from there. Get the &huey; source file online. Under a Unix-type system, you can run &huey; from the command line; there are no command line arguments. On a Windows box, rename the script as huey.py and double-click on it. The Color swatch in the top right corner shows a sample of the current font, in the current text color, against the current background color. The names of the current background color and current text color are displayed in “#RRGGBB” form. You can cut and paste these color names into any application anywhere. If you want to change either color, use the Background/text selector to select which color to change. To change the selected color using a color name, click on a name in the color name selector, or type the color name into the color name field and press Enter. You can make fine adjustments to the selected color by dragging the three color sliders. Each slider controls one parameter of the color. The meaning of each slider depends on the current color model; see . Use the color model selector radiobuttons to select a color model. To change the general kind of text font displayed in the color swatch, click on a family name in the font family selector. To change the size of the text, type the font size in points (1/72") into the font size field, and either press Enter or click the Set size button. You can also specify the font size in pixels by entering a negative number; for example, entering -15 in the font size field gives you a font 15 pixels high. To change the text from regular to boldface or back to regular, click the boldface button. Click the italics button to change from regular to italic and back. Because not all fonts are available in all styles and sizes, the actual font name displayed may not be exactly what you requested.