The Colorizer, version 1.0
|
| ||||
| ||||
|
|
What is the Colorizer?
The Colorizer is a Java applet that helps Web designers select colors for Web pages. You can enter values in RGB or HSB notation, in hexadecimal, decimal or percentage, or graphically select them from a component similar to those used in popular graphics programs. You can also preview colors for background and several types of text to decide which colors look best on a Web page.
What's a Java applet?
Java is a programming language that creates programs that can be run on any computer. A special kind of Java program called an applet is one that can be embedded in Web pages. Because Java programs can be run on any computer, on any operating system, they are perfect for the Web since anyone can run the same version of the program downloaded off the network. Java applets also have provisions for security, so that a Java applet downloaded from the Net cannot access information on your computer.
Most popular modern browsers can run Java applets internally. Older versions of these browsers may support earlier versions of Java, and hence may not be able to run the Colorizer. If you have such a browser and you want to use the Colorizer, you can either upgrade your browser or download the Java Activator plug-in, available for free from JavaSoft, that will enable your browser to run Java applets written in the latest version.
How do I use the Colorizer?
When the Colorizer starts up, you get to see something resembling the following:
The Colorizer is split into several sections:
- The color selectors, which are used to select a color using the mouse.
- The color values, which display the current values of red, green, blue, hue, saturation and brightness, and can also be used to set these values to a number. The value with the selected checkbox next to it is the one that is currently edited.
- The preview box, where a sample document using your colors is displayed. You can select which color to alter by clicking on the background or on one of the lines of text.
- The output boxes, where your color is given in hexadecimal, decimal and percentage notation, as used in HTML and CSS. You can also enter values in these notations into these text boxes and the currently selected color will be updated accordingly.
- The "Help" and "About" buttons, that respectively take you to this page or show information about the Colorizer.
The Colorizer starts out with the hue value selected, and editing the background color. You can select a hue by clicking on any place on the vertical bar in the color selectors. You can then set the saturation and brightness by clicking on any place on the rectangular color selector. Each point in the rectangular selector represents the color specified by the hue selected, and the saturation and brightness determined by its position in the rectangle. The best way to understand this is to click a few times in the color selectors and see how the hue, saturation and brightness values are updated.
Every time you click on the color selectors, the background on the preview box is altered to reflect your selection. If you select a dark background, the black text will be difficult to read on it. To change the color of the text, click on the line that says "Some normal text." The rest of the Colorizer will be updated to show the color you've selected. You can now change this color as you did with the background color.
There are four lines of text in the preview box, each representing a different category of text you often see colored specially in Web pages. This does not mean that you have to use these colors for links in your Web pages. You can use the Colorizer to preview how text of a certain color will look on a background of a different color, no matter where you choose to use these colors.
By clicking on one of the color values, the vertical color selector changes to let you set that value, and the rectangular color selector changes to let you set the other two values in that color model. So, for instance, if you select red, the vertical selector will set the red value, and the rectangular selector will set the green and blue values. If you select saturation, the vertical selector will set the saturation value and the rectangular selector will set the hue and brightness values, and so on.
The currently selected color is shown in the output boxes in three common formats used in CSS. Hexadecimal notation is also the format used to specify colors in HTML. Once you have selected the colors you want, select them each in turn in the preview box and then copy and paste the values, in any notation you want, to your document. For more information on using colors in CSS, have a look at Tutorial 8.
If you already have colors set for a document and would like to edit them with the Colorizer, just enter the color values in the correct output box (depending on the notation you use) and press <Return> and the Colorizer will set the selected color to the value you entered. Alternatively, you can set red, green, blue, hue, saturation or brightness values directly by entering them in the color value boxes and pressing <Return>.
