Stanford University Wiki color picker

229pages on
this wiki
Add New Page
Talk0 Share

Who Edit

Eric Choi & Tejaswi Tenneti

Summary Edit

The color picker is a javascript tool for selecting colors for web design. It allows users to pick a color from a control and obtain the hex RGB value (in the form #RRGGBB). It also allows users to input a hex RGB value and preview the color.

Background Edit

The color picker uses two color representations: HSV (hue-saturation-value) and RGB (red-green-blue). In the HSV system, the hue corresponds to the color (i.e., chromaticity), saturation corresponds to the intensity of the color (i.e., strong or washed out), and value corresponds to the value of the color along the lightness-darkness axis. The HSV representation of a color can be converted to RGB, which is a very commonly used color format, and back.

Structure of the interaction Edit

There are two major functions in the script: trackDrag and colorChanged. trackDrag is the first layer behind human interaction. It handles the events generated by the mouse. colorChanged manipulates the properties of the controls on the page, which includes calculating color values and changing colors of HTML elements. The color picker allows for two ways to change color: the first is by manipulating the HSV slider/box, and the other is by manually entering an RGB value in the text input box.

For HSV slider/box:

  1. User clicks and drags on the hue slider or the value/saturation square.
  2. trackDrag invokes event handlers and emulates a mouseDrag event. It then calls hsvChanged.
  3. hsvChanged converts the state of the controls to an RGB value. It then calls colorChanged.
  4. colorChanged computes the color values for the various controls and then sets them via their style properties. It also repositions the saturation/value crosshair and hue slider to the location of the mouse cursor.

For the text input box:

  1. User enters text into the text input.
  2. The inputDataChanged event handler is invoked. It calls rgbChanged.
  3. rgbChanged converts the RGB color into HSV and then calls colorChanged. If the RGB could not be converted, the controls are reset.
  4. colorChanged computes the color values for the various controls and then sets them via their style properties. It also repositions the saturation/value crosshair and hue slider to the locations corresponding to the selected color.

Why it's interesting Edit

There is a continuous 2D interaction in the form of a gradient square and a 1D interaction in the form of a slider. These controls allow the user to choose values for three orthogonal color components: hue, saturation and value. HTML does not provide for continuous (in the sense of a slider) controls.

The role of JavaScript in this interaction Edit

JavaScript is used to reposition the crosshair and slider, dynamically calculates RGB and HSV values, and changes the color of several HTML elements. It also provides event handlers for user interactions, such as mouse dragging or editing text input.

Server interactions Edit

There are no server interactions.

Modifying the Web for this interaction Edit

One modification to the Web to ease implementation of this interaction the addition of a Color class to the browsers' JavaScript implementations. It would represent a certain color and have methods to convert between different color schemes (such as RGB, HSV, and CMYK). This would be useful for other applications as well, because most rich content on the web uses color to convey information.

A broader class of interactions Edit

This control falls within the domain of slider controls and 2D controls. These are very commonly used today in other applications, such as photo tagging, image editing, anything involving drag-and-drop, zoom controls

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.