Color module

Metro UI has a built-in module for working with colors. You can manipulate and transform colors and can create any color schemes.

About

All routines for works with colors are in the object Metro.colors. Module works with formats: rgb, rgba, hex, hsv, hsl and cmyk. You can use color conversion functions, as well as functions for generating common color schemes monochromatic, complementary, split-complementary, double-complementary, analogous, triadic, tetradic and square. Also you can use special functions grayscale, darken, lighten.

Formats

Module works with any formats: rgb, rgba, hex, hsv, hsl and cmyk. Each format is used as an object, exclude hex format. It stored as a string.

Color	Desc
`hex`	A `hex` color is specified with: `#RRGGBB`. RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color. For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.
`rgb`	A `rgb` color is specified with: `{r, g, b}` object. An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255. For example, rgb(0, 0, 255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.
`rgba`	A `rgba` color is specified with: `{r, g, b, a}` object. An RGBA color value is specified with: rgb(red, green, blue, alpha). Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255 and alpha specified opacity from 0 to 1.
`hsv`	HSV stands for hue, saturation, and value. A `hsv` color is specified with: `{h, s, v}` object.
`hsl`	HSL stands for hue, saturation, and lightness. A `hsl` color is specified with: `{h, s, l}` object.
`cmyk`	CMYK colors is a combination of `CYAN`, `MAGENTA`, `YELLOW`, and `BLACK`. A `cmyk` color is specified with: `{c, m, y, k}` object.

Palettes

Module contains three color palettes: metro - 21 colors, standard - 140 colors and mix metro and standard with metro in priority. You can get color names with function palette(name)


                    var metro = Metro.colors.palette(Metro.colors.PALETTES.METRO);
                    var standard = Metro.colors.palette(Metro.colors.PALETTES.STANDARD);
                    var all = Metro.colors.palette(Metro.colors.PALETTES.ALL);

                    ...result for metro
                    [
                        "lime", "green", "emerald", "blue", "teal", "cyan", "cobalt",
                        "indigo", "violet", "pink", "magenta", "crimson", "red", "orange",
                        "amber", "yellow", "brown", "olive", "steel", "mauve", "taupe"
                    ]

You can get color hex value with function color(name, palette).


                    var col = Metro.colors.color("cyan", Metro.colors.PALETTES.METRO);

                    ...value for col is #1ba1e2

Check & convert

Metro UI contains functions for check color values and convert colors from onw to others.

Check functions

The following functions are used to check the color value:

Function	Desc
`isColor(val)`	Check if value is a Metro UI color value
`isHEX(val)`	Check if value is a hex color value
`isRGB(val)`	Check if value is a rgb color value
`isRGBA(val)`	Check if value is a rgba color value
`isHSV(val)`	Check if value is a hsv color value
`isHSL(val)`	Check if value is a hsl color value
`isHSLA(val)`	Check if value is a hsla color value
`isCMYK(val)`	Check if value is a hsl color value
`is(val)`	Return type of color value
`isLight(color)`	Return true if color is light
`isDark(color)`	Return true if color is dark

Convert functions

The following functions are used to convert a color value from one to others in Metro UI color formats:

Function	Desc
`toHEX(val)`	Any type color value to hex: `#RRGGBB`
`toRGB(val)`	Any type color value to rgb: `{r, g, b}`
`toRGBA(val, alpha)`	Any type color value to rgba: `{r, g, b, a}`
`toHSV(val)`	Any type color value to hsv: `{h, s, v}`
`toHSL(val)`	Any type color value to hsl: `{h, s, l}`
`toHSLA(val)`	Any type color value to hsla: `{h, s, l, a}`
`toCMYK(val)`	Any type color value to hsl: `{c, m, y, k}`


                    var cm = Metro.colors;
                    var c = "#cc0000";

                    cm.toHEX(c); // #cc0000
                    cm.toRGB(c); // {r: 204, g: 0, b: 0}
                    cm.toRGBA(c, .5); // {r: 204, g: 0, b: 0, a: 0.5}
                    cm.toHSV(c); // {h: 0, s: 1, v: 0.8}
                    cm.toHSL(c); // {h: 0, s: 1, l: 0.4}
                    cm.toCMYK(c); // {c: 0, m: 100, y: 100, k: 20}

The following functions are used to convert a color value to string value:

Function	Desc
`toString(val)`	Return stringify value for color: `#RRGGBB`, `rgb(r, g, b)`, `rgba(r, g, b, a)`, `hsv(h, s, v)`, ...


                    var cm = Metro.colors;
                    var c = "#cc0000";

                    cm.toHEX().toString(c); // #cc0000
                    cm.toRGB().toString(c); // rgb(204,0,0)
                    cm.toRGBA().toString(c); // rgba(204,0,0,1)

Tone functions

Metro UI color module contains functions to change color tone: grayscale, lighten and darken.

grayscale

lighten

normal

darken

Function	Desc
`grayscale(color)`	Calculate grayscale color for color value
`lighten(color, percent)`	Lighten color. Percent value must be from 0 to 100.
`darken(color, percent)`	Darken color. Percent value must be from 0 to 100.


                    var cm = Metro.colors;
                    var c = "#cc0000";

                    cm.grayscale(c); // #2b2b2b
                    cm.lighten(c, 10); // #d60a0a
                    cm.darken(c, 10); // #c20000

Schemes

Metro UI color module contains function getScheme() or createScheme(). This function generate any color schemes from base color: monochromatic, complementary, split-complementary, double-complementary, analogous, triadic, tetradic and square.

Function	Desc
`getScheme(color, name, format, options)`	Generate color scheme from base color. `color` - color in Metro UI color module format, `name` - scheme name, `format` - format for return values (hex, rgb, rgba, hsv, hsl, cmyk), `options` - additional options.


                    var cm = Metro.colors;
                    var colors = cm.getScheme("#cc0000", "mono", "hex", {algorithm: 1});

Options

Options	Desc
`angle`	Angle for analogous and split-complementary schemes
`algorithm`	Algorithm for monochromatic schemes (1, 2, 3, 4)
`tint1, tint2`	This option use for monochromatic schemes 1 for create two left colors
`shade1, shade2`	This option use for monochromatic schemes 1 for create two right colors
`distance`	This option use for monochromatic schemes 2, 3 and determines how many colors will be generated
`step`	This option use for monochromatic schemes 2, 3, 4 and determines with what step the color will be generated. Default is `0.1`. Value must be in range from 0 to 1.
`alpha`	This option use for default alpha channel value for rgba colors.

Also you can set options with function setup({...}).


                    var cm = Metro.colors, colors;

                    cm.setup({
                       alpha: .5,
                       algorithm: 1
                    })

                    colors = cm.getScheme("#cc0000", "mono", "rgba");

Monochromatic

Monochromatic colors are all the colors (tones, tints and shades ) of a single hue. Monochromatic color schemes are derived from a single base hue and extended using its shades, tones and tints. Tints are achieved by adding white and shades and tones are achieved by adding a darker color, grey or black. Monochromatic color schemes provide opportunities in art and visual communications design as they allow for a greater range of contrasting tones that can be used to attract attention, create focus and support legibility.


                    var cm = Metro.colors,
                        colors, color = "#ffff00";

                    colors = cm.getScheme(color, "mono", "hex");

Analogous

Analogous (or adjacent colors) is a color scheme using one base color and two secondary colors placed symetrically around it on the color wheel. The base color is main, while the secondary colors should be used only for highlights and accents. It always looks very elegant and clear. There is no tension in the palette, and typically it’s uniformly all warm, or all cold. If a base color on the warm-cold border is chosen, the color with opposite “temperature” may be used for accenting the other two colors.


                    var cm = Metro.colors,
                        colors, color = "#ffff00";

                    colors = cm.getScheme(color, "analog", "hex");

Complementary

Complementary is a color scheme using one base color and its complement, the color on the exact opposite side of the color wheel. The base color is main and dominant, while the complementary color is used only as an accent.


                    var cm = Metro.colors,
                        colors, color = "#ffff00";

                    colors = cm.getScheme(color, "complement", "hex");

Split-complementary

Split-complementary is a color scheme using one base color and two secondary colors. Instead of using a complementary color, two colors placed symetrically around it on the color wheel are used. The base color is main, while the secondary colors should be used only for highlights and accents.


                    var cm = Metro.colors,
                        colors, color = "#ffff00";

                    colors = cm.getScheme(color, "split", "hex");

Double-complementary

Double-complementary is a color scheme using two sets of base color and their complements with next rules on wheel: 180 °, -30 °, 180 °. Both base colors are equivalent, cannot be decided which one should be the main color (though a designer could choose one). Less distance between two base colors causes less tension in the result. However, this scheme is always more "nervous” and “action” than other schemes. While working with it, we have to take care especially of relations between one color and the complement of its adjacent color.


                    var cm = Metro.colors,
                        colors, color = "#ffff00";

                    colors = cm.getScheme(color, "double", "hex");

Tetradic

Tetraqic is a color scheme using two sets of base color and their complements with next rules on wheel: 180 °, 30 °, 180 °. Both base colors are equivalent, cannot be decided which one should be the main color (though a designer could choose one). Less distance between two base colors causes less tension in the result. However, this scheme is always more "nervous” and “action” than other schemes. While working with it, we have to take care especially of relations between one color and the complement of its adjacent color.


                    var cm = Metro.colors,
                        colors, color = "#ffff00";

                    colors = cm.getScheme(color, "tetra", "hex");

Square

A square is a color scheme, a special variant of the dual color scheme, with the equal distance between all colors. All four colors are distributed evenly around the color wheel, causing there is no clear dominance of one color. The scheme is always vibrant, nervous and colorful, there is equal tension between all colors. Square is very aggressive color scheme, requiring very good planning and very sensitive approach to relations of these colors.


                    var cm = Metro.colors,
                        colors, color = "#ffff00";

                    colors = cm.getScheme(color, "square", "hex");

Triadic

A triad is a color scheme, a special variant of the split-complementary color scheme, with the equal distance between all colors. All three colors are distributed evenly around the color wheel, causing there is no clear dominance of one color. The scheme is always vibrant and colorful, designers should use it and balance very carefully to maintan the desired effects and color meaning.


                    var cm = Metro.colors,
                        colors, color = "#ffff00";

                    colors = cm.getScheme(color, "triadic", "hex");

Additional examples: schemes 1, schemes 2, grayscale.

Websafe colors

You can get websafe color from any. To get it, use function websafe(color) or specific for color format hex2websafe, rgb2websafe, rgba2websafe, hsv2websafe, hsl2websafe and cmyk2websafe.

#9d4232 - not safe

#993333 - websafe


                    var cm = Metro.colors,
                        color = "#9d4232";

                    cm.websafe(color); // #993333

Table of contents