Section 14.7. Working with Color

14.7. Working with Color

Color seems straightforward enough. You look up, and the sky is blue. You see a red car drive by. But, representing color with precision can be a tricky thing. MochiKit.Color is designed to help out with the different representations of color and also help with some common manipulations of color.

Colors can be represented by name (white), hue/saturation/lightness (0.0, 0.0, 1.0), red/green/blue (1.0, 1.0, 1.0), and as is common on the web, a hexadecimal representation of RGB (#ffffff). With all these different possible representations, MochiKit.Color provides a Color object that represents these in an abstract form, allowing you to create a color based on what you know and get back a representation that you need.

14.7.1. The Demo

Typically, we think of color as a visual thing. When you work with color on the computer, there is also a computational component, which is where MochiKit's color conversions come in handy. We'll start by looking at the visual part of it.

This demo, pictured in Figure 14.3, features a big white-on-black block of text in the middle of the page. You can change the colors there in a variety of ways to explore how MochiKit.Color processes string representations of color.

Figure 14.3. Color Example

The first control is a select box allowing you to tell the demo whether you're changing the foreground or background color.

After you've made a selection, you'll see the current color value in the text box. That will be in the form rgb(r,g,b), and it's what you get when you use a Color object's toString method. When you click the Set Color button, the Color.fromString function reads the value from that text box, which means that you're not limited to just rgb(r,g,b) as the format. Here are a few different things you can try:

• red

• orange

• rgb(128,128,128)

• hsl(75%, 85%, 95%)

• #aabbcc

Color.fromString provides a very natural interface for specifying a color using whatever format you may have available.

The Clone From Heading function uses a different technique to decide which color to use. MochiKit provides the functions Color.fromBackground(elem), Color.fromText(elem), and Color.fromComputedStyle(elem, style) to create a Color object based on some element in your document. fromBackground and fromText are both shorthand for calls to fromComputedStyle. A good example of how to use fromComputedStyle is MochiKit's own definition of fromBackground:

  c = Color.fromComputedStyle(       elem, "backgroundColor", "background-color") || Color.whiteColor();

The code for the color demo is easy to follow. As in the style demo, this is a Kid template that could be made to work as a standalone web page:

Here is the source to color.js:

14.7.2. More Ways to Get a Color

In addition to the general Color.fromString, you can directly call functions for each form of color specification. These functions are as follows:

• Color.fromHexString(hexString)

• Color.fromHSL(hue, saturation, lightness, alpha=1.0)

• Color.fromHSLString(hslString)

• Color.fromHSV(hue, saturation, value, alpha=1.0)

• Color.fromName(name) (W3C CSS3 color module name for the color. transparent is also accepted)

• Color.fromRGB(red, green, blue, alpha=1.0)

• Color.fromRGBString(rgbString)

MochiKit also has factories for a number of common colors:

• Color.blackColor()

• Color.blueColor()

• Color.brownColor()

• Color.cyanColor()

• Color.darkGrayColor()

• Color.grayColor()

• Color.greenColor()

• Color.lightGrayColor()

• Color.magentaColor()

• Color.orangeColor()

• Color.purpleColor()

• Color.redColor()

• Color.whiteColor()

• Color.yellowColor()

• Color.transparentColor()

Finally, you can get at MochiKit's master mapping of colors by calling Color.namedColors(). The object you get has properties with the color name in lowercase, and the value of each property is a string you can pass to Color.fromString.

14.7.3. Converting Colors

After you have a color specified in one format, you might need it in another, and MochiKit is ready and able to do the math for you. On a Color object, you have the following methods:

• toRGBString -> rgb(r,g,b)

• toHSLString -> hsl(hue, saturation, lightness)

• toHexString -> #RRGGBB

You can also retrieve the individual color components, if you wish. Each of these functions returns an object with properties that vary between 0 and 1 for each component of the color:

• asRGB -> r, g, b, a

• asHSL -> h, s, l, a

• asHSV -> h, s, v, a

You can also do color conversions directly without creating a Color object. These functions just return mappings with the appropriate set of color components:

• hslToRGB(hue, saturation, lightness, alpha)

• hsvToRGB(hue, saturation, value, alpha)

• rgbToHSL(red, green, blue, alpha)

• rgbToHSV(red, green, blue, alpha)

14.7.4. Modifying Colors

The last piece of functionality that you get from MochiKit.Color is the ability to change a color conveniently. You can use these methods on a Color object to create new Color objects that are variations on the original:

• colorWithAlpha(alpha)

• colorWithHue(hue)

• colorWithSaturation(saturation)

• colorWithLightness(lightness)

You can manipulate the color in other ways, too:

• darkerColorWithLevel(level) Darker by the given level, between 0 and 1.

• lighterColorWithLevel(level) Lighter by the given level, between 0 and 1.

• blendedColor(other, fraction=0.5) The result is other * fraction plus (1-fraction) * this color.

Not sure if your color is bright enough? You can call the isLight() and isDark() methods of a color to see whether you've crossed the 0.5 mark.