Color module

Metro 4 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 4 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 4 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 4 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
toHexString(val) Return hexdecimal string for color: #RRGGBB
toRgbString(val) Return rgb string for color: rgb(r, g, b)
toRgbaString(val) Return rgba string for color: rgba(r, g, b, a)
toHsvString(val) Return hsv string for color: hsv(h, s, v)
toHslString(val) Return hsl string for color: hsl(h, s, l)
toHslaString(val) Return hsl string for color: hsl(h, s, l)
toCmykString(val) Return cmyk string for color: cmyk(c, m, y, k)
toString(val) Return string for color value

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

                    cm.toHexString(c); // #cc0000
                    cm.toRgbString(c); // rgb(204,0,0)
                    cm.toRgbaString(c); // rgba(204,0,0,1)
                    cm.toHsvString(c); // hsv(0,1,0.8)
                    cm.toHslString(c); // hsl(0,1,0.4)
                    cm.toCmykString(c); // cmyk(0,100,100,20)
                

Tone functions

Metro 4 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 4 color module contains function getScheme(). 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 4 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