Colors

Animations and effects in a page may often depend on computing specific color values. Base provides an elementary Color class for encapsulating much of the mundane logic in computing colors, converting them to and from hexadecimal values, and so on. Several auxiliary functions for common operations on colors are also included.

Creating and Blending Colors

The Color class has a flexible constructor that can accept a named string value for a color, a hex string representing a color, or an array of RGB^[18] values. Example 8-9 illustrates the creation of two Color objects and a function Base provides for blending colors.

Example 8-9. Blending Color objects

<html>
    <head>
        <title></title>
        <script
            type="text/javascript"
            src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
        </script>
        <script type="text/javascript">
            dojo.addOnLoad(function(  ) {
                var blue = new dojo.Color("#0000ff"); //could also have used "blue"

                var red = new dojo.Color([255, 0, 0]);

                var purple = dojo.blendColors(blue, red, 0.5);
                dojo.style("foo", "background", purple.toCss(  ));
            });
        </script>
    </head>
    <body>
        <div id="foo" style="width:200px; height:200px; padding:5px;"></div>
    </body>
</html>

The blendColors function accepted the red and blue Color objects and blended them according to a 50/50 mixture to produce the RGB value (128, 0, 128), a neutral shade of purple. The alternative to blending colors is to crunch the numbers yourself—not rocket science, but not very much fun either!

Table 8-10 summarizes the Color class provided by Base.

Table 8-10. Color functionality supported by Base

Method	Comment
`Color(/* Array \| String */color)`	The constructor function, which accepts an array of RGB or RGBA values, or a `String`, which may be a named color like "blue" or a hex string like "#000ff". If no arguments are passed, the `Color` object is constructed with the RGBA tuple (255,255,255,1).
`setColor(/* Array \| String \| Object */ color)`	Works on an existing `Color` object to configure its value in a manner analogous to its constructor function; the preferred way of reusing an existing `Color` object.
`toRgb( )`	Returns a `String` value expressing a `Color` as an RGB value such as (128, 0, 128).
`toRgba( )`	Returns a `String` value expressing a `Color` as an RGBA value such as (128, 0, 128, 0.5).
`toHex( )`	Returns a `String` value expressing a `Color` as a hex value such as "#80080".
`toCss(/* Boolean */ includeAlpha)`	Returns a CSS-compliant `String` value expressing a `Color` as an RGB value such as (128, 0, 128). By default, `includeAlpha` is `false`. This method is the preferred means of transforming a `Color` object for use in styling a node.
`toString`	Returns a standardized `String` value for a `Color` as an RGBA value.

Warning

Most browsers currently implement a deviation of the CSS2 specification, which does not support RGBA tuples for expressing colors, so Color 's toCss( ) function (with no parameter passed in) is probably your choice method of deriving a value acceptable for passing into a method like dojo.style. If you need to express transparency for nodes that have color, use the style value for opacity to do so.

RGBA Support in CSS3

The RGBA syntax for representing color values as included in the CSS3 specification is quite expressive and convenient. The following code snippet provides an illustration of two overlapping blue and red squares, and Figure 8-7 shows how the overlap blends the two to show a purple square in their intersection:

<div style="width:200px; height:200px; padding:5px; background:rgba(0,0,255,0.5)"
></div>

<div style="position:absolute; left:100px; top:100px; width:200px; height:200px;
padding:5px; background:rgba(255,0,0,0.5)"></div>

Firefox 3 supports RGBA style values natively. You can read more about the CSS3 support in Firefox at http://developer.mozilla.org/en/docs/CSS_improvements_in_Firefox_3.

Figure 8-7. An example of how transparency works through the rgba( ) description for a color using Firefox 3

Tip

Transparency and opacity are the inverses of one another. If the opacity of something is 1.0, it is fully opaque, and its transparency is therefore 0.0. If its opacity were 0.1, it would be 90% transparent, and you would barely be able to see it.

Named Color Values Available Via Base

One other utility in Base is the configuration of preloaded named colors that is stored in dojo.Color.named, which maps named colors to RGB values. For example, to quickly access the RGB values for maroon, simply use the reference to dojo.Color.named.maroon to get back the RGB array [128,0,0]. Table 8-11 summarizes the named colors that are built into Base. Although you will probably want to use and manipulate Color objects directly, dojo.Color.named may still prove useful during development.

Warning

dojo.Color.named is not available from an actual Color object. It is a static collection of color values and no object creation is required to use it. Trying to access a color object instance's .named value will cause an error.

Table 8-11. Named color values available through Base

Name	Red	Green	Blue
black	0	0	0
silver	192	192	192
gray	128	128	128
white	255	255	255
maroon	128	0	0
red	255	0	0
purple	128	0	128
fuchsia	255	0	255
green	0	128	0
lime	0	255	0
olive	128	128	0
yellow	255	255	0
navy	0	0	128
blue	0	0	255
teal	0	128	128
aqua	0	255	255

Additional Color Values Available Via Core

Although not included directly in Base, you can expand dojo.Color.named with more than 100 additional colors including all of the CSS3 named colors complete with SVG 1.0 variant spellings by performing a dojo.require("dojo.colors") statement (see Table 8-12). Note that you can also use the animateProperty function you learned about earlier to to animate the backgroundColor property. For example, you could provide start and end values of "black" and "white", "white" and "#43fab4", etc.

Tip

In addition to expanding dojo.Color.named, dojo.colors provides the additional enhancement of augmenting the Color constructor to accept HSL and HSLA color module formats. The HSL color space attempts to describe perceptual color relationships more accurately then RGB by representing colors in terms of hue, saturation, and lightness. You can read more about the CSS Color module at http://www.w3.org/TR/css3-iccprof.

Table 8-12. Additional named color values available through Core

Name	Red	Green	Blue
aliceblue	240	248	255
antiquewhite	250	235	215
aquamarine	127	255	212
azure	240	255	255
beige	245	245	220
bisque	255	228	196
blanchedalmond	255	235	205
blueviolet	138	43	226
brown	165	42	42
burlywood	222	184	135
cadetblue	95	158	160
chartreuse	127	255	0
chocolate	210	105	30
coral	255	127	80
cornflowerblue	100	149	237
cornsilk	255	248	220
crimson	220	20	60
cyan	0	255	255
darkblue	0	0	139
darkcyan	0	139	139
darkgoldenrod	184	134	11
darkgray	169	169	169
darkgreen	0	100	0
darkgrey	169	169	169
darkkhaki	189	183	107
darkmagenta	139	0	139
darkolivegreen	85	107	47
darkorange	255	140	0
darkorchid	153	50	204
darkred	139	0	0
darksalmon	233	150	122
darkseagreen	143	188	143
darkslateblue	72	61	139
darkslategray	47	79	79
darkslategrey	47	79	79
darkturquoise	0	206	209
darkviolet	148	0	211
deeppink	255	20	147
deepskyblue	0	191	255
dimgray	105	105	105
dimgrey	105	105	105
dodgerblue	30	144	255
firebrick	178	34	34
floralwhite	255	250	240
forestgreen	34	139	34
gainsboro	220	220	220
ghostwhite	248	248	255
gold	255	215	0
goldenrod	218	165	32
greenyellow	173	255	47
grey	128	128	128
honeydew	240	255	240
hotpink	255	105	180
indianred	205	92	92
indigo	75	0	130
ivory	255	255	240
khaki	240	230	140
lavender	230	230	250
lavenderblush	255	240	245
lawngreen	124	252	0
lemonchiffon	255	250	205
lightblue	173	216	230
lightcoral	240	128	128
lightcyan	224	255	255
lightgoldenrodyellow	250	250	210
lightgray	211	211	211
lightgreen	144	238	144
lightgrey	211	211	211
lightpink	255	182	193
lightsalmon	255	160	122
lightseagreen	32	178	170
lightskyblue	135	206	250
lightslategray	119	136	153
lightslategrey	119	136	153
lightsteelblue	176	196	222
lightyellow	255	255	224
limegreen	50	205	50
linen	250	240	230
magenta	255	0	255
mediumaquamarine	102	205	170
mediumblue	0	0	205
mediumorchid	186	85	211
mediumpurple	147	112	219
mediumseagreen	60	179	113
mediumslateblue	123	104	238
mediumspringgreen	0	250	154
mediumturquoise	72	209	204
mediumvioletred	199	21	133
midnightblue	25	25	112
mintcream	245	255	250
mistyrose	255	228	225
moccasin	255	228	181
navajowhite	255	222	173
oldlace	253	245	230
olivedrab	107	142	35
orange	255	165	0
orangered	255	69	0
orchid	218	112	214
palegoldenrod	238	232	170
palegreen	152	251	152
paleturquoise	175	238	238
palevioletred	219	112	147
papayawhip	255	239	213
peachpuff	255	218	185
peru	205	133	63
pink	255	192	203
plum	221	160	221
powderblue	176	224	230
rosybrown	188	143	143
royalblue	65	105	225
saddlebrown	139	69	19
salmon	250	128	114
sandybrown	244	164	96
seagreen	46	139	87
seashell	255	245	238
sienna	160	82	45
skyblue	135	206	235
slateblue	106	90	205
slategray	112	128	144
slategrey	112	128	144
snow	255	250	250
springgreen	0	255	127
steelblue	70	130	180
tan	210	180	140
thistle	216	191	216
tomato	255	99	71
transparent	0	0	0
turquoise	64	224	208
violet	238	130	238
wheat	245	222	179
whitesmoke	245	245	245
yellowgreen	154	205	50

^[18]RGB is shorthand for "red green blue," one of the standard ways of representing colors in CSS. RGBA is shorthand for "red green blue alpha" and expresses a fourth color component, which represents the transparency of a color.

Get Dojo: The Definitive Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Dojo: The Definitive Guide by Matthew A. Russell

Colors

Creating and Blending Colors

Warning

Tip

Named Color Values Available Via Base

Warning

Additional Color Values Available Via Core

Tip

Don’t leave empty-handed

It’s yours, free.

Check it out now on O’Reilly