The jquery.lx.colorWheel plug-in is a JQuery plug-in that draws a color wheel in a given HTML <canvas> element.
The colorWheel plug-in is largely being used as a testbed for developing future, more elaborate JQuery plug-ins.
Coming soon!
The focus is on delivering a complete, well-documented v1.0.0 before making the download available.
(If you can't wait, please feel free to view the source for this page to locate and download a copy of the associated scripts.)
Color models for electronic devices are approximations of the physical color spectrum. A color in reality is composed of a combination of physical wavelengths of light reflected by or emitted from an object. For the purposes of this documentation, we'll simply discuss the color models used on digital displays.
Most computer displays use an "RGB" additive color model where each color in the spectrum is approximated using a weighted combination of the colors red, green, and blue. While this format is useful for display representation (as it parallel's the physical device representation) and while it may become intuitive after frequent use to the user, a hue-saturation-value model may be more useful from a perspective design in arriving at a color scheme.
The HSV color model stands for Hue-Saturation-Value, where each color is specified via:
There are other color models and systems including CMYK, HSL, HSB, PANTONE™ but for the purposes of this documentation the focus will remain on the RGB and HSV color models.
Hue is the pure color without any mixture of black or white.
In the HSV model, an decrease in saturation effectively produces a tint of the hue: i.e. effectively decreasing saturation adds white to the color of the pure hue.
The definition of "saturation" varies between color models. For example, the HSL color model uses a different formula to compute saturation.
In the HSV model, the value corresponds to the relative brightness of the color as compared to a pure white spectrum. In other words, colors of full saturation and zero saturation should have roughly the same relative brightness regardless of hue (though this is not strictly true in practice due to display brightness differences in digital displays).
A tint of a color is any color with white added to it.
tint(amount) method can be used to tint a color.
A shade of a color is any color with black added to it.
A tone of a color is any color with gray added to it (i.e. a combination of both black and white).
The color wheel with all default settings.
<canvas id="my-color-wheel" width="128" height="128"></canvas>
$("#my-color-wheel").colorWheel();
The color wheel options can be set by passing in an array of name-value pairs, as with most JQuery-based plug-ins.
<canvas id="my-color-wheel" width="128" height="128"></canvas>
$("#my-color-wheel").colorWheel({ count : 8, arc : 32 });
The color wheel options can also be set on the data-colorWheel attribute of the host
canvas element. This is non-standard JQuery plug-in behavior, but can be useful for setting
options on individual elements and using the a class to define multiple canvas elements as
color wheels.
<canvas class="color-wheel"
data-colorWheel="{ count : 8, arc : 32 }"
width="128" height="128"></canvas>
$(".my-color-wheel").colorWheel();
Scroll through the documentation for example usage of the color wheel. The documentation uses the plug-in directly to generate the color wheel images.
The count parameter controls the number of color arcs drawn within the color wheel. This
value should range from 0-360 and is set to 360 by default.
The arc parameter controls the width of each arc (in degrees). The value normally
should be set to a value such that count * arc <= 360.
The hue parameter controls the hue of the first arc draw in the color wheel. If the offset
parameter is set to 0, then this corresponds to the hue of the arc pointing rightmost.
The saturation parameter controls the 'saturation' of in the standard
Hue-Saturation-Value color model of each color in the color model. The value should range from 0-100.
The value parameter controls the 'value' of in the standard
Hue-Saturation-Value color model of each color in the color model. The value should range from 0-100.
The offset parameter indicates how many degrees to offset the 'first' arc of the color wheel, where (in the absence of
other settings) the first arc is the red arc pointing toward the right of the page.
This parameter is distinct from the hue parameters, though in some circumstances the two may produce an identical effect
(such as in the fourth example above, which is equivalent to setting the hue to 30).
The table below demonstrates the difference between the parameters.
A change in offset controls the positioning of the first arc.
A change in hue controls the hue of the first arc.
|
Shifted by |
|
|
Shifted by |
The innerRadius parameter controls where the arc begins. The value usually should range from 0 to 1, where the
default value is 0.6.
The stops parameter is an array of degree values that can be used to explicitly
denote where arcs should be drawn (as opposed to a regular distance between each arc for
the full circle).
The colorWheel() function simply redraws the canvas. Therefore, via a simple usage of
window.setTimeout or window.setInterval, a canvas can be transformed into
an animated color wheel.