Click on the Image

About this Page

Screen colors may be expressed as three hue values. The hue values are Red, Green, and Blue since the tube which is the screen has three electron guns which excite red, green, and blue phosphors on the screen. Your browser accepts these values to set the background color of windows and/or table cells The form of this number is #RRGGBB where RR is the red value, GG is the green value and BB is the blue value expressed as hexadecimal numbers. (For example: the value #ffffff is white and #ff0000 is red).

This script uses the DHTML ability of Internet Explorer v4+ to continuously capture the X/Y positions of the cursor within an element such as a DIV. The DIV containing the image has a onMouseMove event handler which captures the mouse position. It also has an onMouseDown event handler which uses the X/Y positions when the mouse is clicked to calculate the color values for that color.

The color wheel is for a brightness of 100%, and was obtained from a screen capture of the color picker on a Macintosh computer. By changing the brightness value (and then pressing the 'Tab' key), the entire range of colors may be displayed.

The code is extensively documented. Help yourself, but if you use the code on your own site, please give WebSorcerer credit somehow.

Color Calculation

The diagram below is used to calculate the Red color value. Inside a 120^o area the red color value is FF. Outside this area the color value linearly decreases from the boundary of that zone to the edge of the circle along a line parallel to the x-axis. The relationships were derived by harking back (for me anyway) to high school geometry.

To calculate the green and blue values, the co-ordinates were rotated 120 or 240 degrees, respectively, and new x and y values for the chosen point calculated from the formula shown. JavaScript uses angles in radians for its calculations. Fortunately the value of pi is a built-in Math function.