Instructions
This is a very compact "color schemer" based on the Hue-Saturation-Lightness color model, and its operation is quite simple: click and/or drag on the horizontal bars in the top left portion of the color picker to select (in order from top): the hue, saturation, and lightness (also known as "brightness".)
In the right panel is a series of checkboxes that allows you to choose various schemes. An explanation of the schemes follow the instructions.
Below the scheme checkboxes, along the right side, are the values of the various colors in HTML Color format: #RRGGBB where RR represents the red component in hexadecimal notation; GG represents the green component; and BB represents the blue component. As these are Text Fields in a form, you are able to select the value for copy and pasting into your html code.
Operation features
Below the HSL picker at the top/left, are four color swatches. The largest on the left is the "primary" color picked. The "long" swatch to the right of the primary is the secondary color picked. There are two more smaller swatches: the left one will be the third color picked, and the last one (which is only used in two schemes) will be either fourth, or "not used."
Random Color — Double click on the primary color swatch
Adjust Sat/Light of minor colors — click on the second, third, or fourth swatch. A small pair of controllers will appear on the right side of the swatch. Click and/or drag inside these saturation/brightness controllers to adjust those properties of the color of the swatch. These values will be remembered when you change the primary color. To remove these controllers from view, single click on the main swatch or these controllers will disappear when the H,S,L sliders are used again.
Reset Main Color from one of the minors — Double-clicking on one of the minor swatches will set the main color to that color, recalculate the secondaries, and update the position indicators in the HSL "sliders." If the fourth color is "not used," then the action is ignored.
Reverse Colors — The checkbox to the left of the text versions of the colors allows you to reverse the order in which the colors are displayed. Colors are normally calculated counter-clockwise direction [positive angles]. The Reverse option will return colors calculated in a clockwise direction. This option is meaningless with complementary colors and monochromatic colors. **Note: when colors are reversed, the hue values are reversed, the saturation and lightness settings of the swatch are preserved (this often results in an interesting variation.)
Explanations
The HSL (hue-saturation-lightness) color model is the most "like" an artist's palette and perhaps the most easily understandable by most people. Hues are pure color and run the gamut of the rainbow (Red Orange Yellow Green Cyan Blue BlueViolet Violet RedViolet back to Red again). These pure colors can be arranged as a circle (red to red)... so, for the rest of this explanation, think of all colors arranged in a circle (or wheel.)
The Triadic scheme divides the circle into thirds and the colors at the angles 120° away from the main "pick" are chosen.
Analogous colors takes the second and third colors from the same "neighborhood" as the primary pick... about 30° clockwise and counterclockwise from the primary.
Monochromatic means "one color" — Use the saturation/lightness controllers to create different shades of the primary.
Complementary — in this model, opposites attract. The complement of a color is its opposite color on the color wheel.
Split Complementary — this model is like analogous, except, instead of the opposite color, the opposite's "neighbors" are chosen. This is close, but not quite, halfway between triadic and complementary.
Double Complementary — A color, its complement, one "neighbor" and its complement.
Notes
There are no position markers on the saturation/brightness controllers for the secondary colors since 1) they are small and it would be difficult, and 2) it is actually a shared controller — it simply appears on the color swatch that is clicked on (it does not inherit the properties of the color it's placed on.)
The "native" color model of all modern computers is the RGB (red-green-blue) color model due to the fact that monitors use pixels comprised of phosphors containing a red, green, and blue elements. These pixel elements are "excited" by irradiation. When no irradiation is applied, the pixel is black (completely off). When all three elements of the pixel are equally excited, the result is either a shade of gray, or white (maximum intensity). Otherwise, the separate intensities for each phosphor can be manipulated. The blending of the light emitted by pixels of varied intensities applied to the phosphors is capable of producing over 16 million colors variations.
Due to the nature of the mathematics required to convert between the RGB color model and the HSL color model, colors at extremes have HUE values that become "undefined" (these are pure white, pure black and pure gray — in all cases, the absence of color/hue). Computers, being what they are, do not understand "undefined" and therefore some value must be used to hold the place of a hue, defined or not. This value is usually 0 (zero) which corresponds to RED. This is why, when no HUE exists in the color picker, the secondary colors will appear to change to the same values they would have as if red were the current color. There is nothing that can be done about this.
Definitions
Hue — basically, a synonym for color. Hues are "pure" color values.
Saturation — the "vividness" of a hue. In the HSL model, zero saturation is "middle" gray. 100% saturation is the most intense value of a hue.
Lightness/Brightness — the "shades" and "tints" of a hue. Shades are increased by "adding" black. Tints are increased by adding white.
A pure color in the HSL system is any Hue + 100% saturation + 50% Lightness.
A similar but different color model is HSV, or Hue-Saturation-Value. In this system a pure color is any Hue + 100% saturation + 100% Value. White is achieved at 0% saturation and black at 0% Value.
|
|
