MODULES Uize.Color.xSvgColors
1. Introduction
The Uize.Color.xSvgColors extension module extends the Uize.Color object by adding SVG 1.0 / CSS 3 color definitions to the Uize.Color.colors object.
DEVELOPERS: Chris van Rensburg
1.1. Examples
The following example pages are good showcases for the Uize.Color.xSvgColors module...
| Color Format Converter - Easily convert color values from one format to another. Convert between RGB hex, RGB tuple string, HSL, HSV, CMYK, and SVG color names. | |
| Color Sort by RGB Proximity - When you have a limited palette of colors, how can you sort the colors to find the closest matches to a desired color? This example shows you how. | |
| Sortable Color Table - See all the standardized colors of the CSS 3 specification in a sortable table, where you can sort by name, hue, saturation, lightness, and more. |
SEARCH FOR EXAMPLES
Use the link below to search for example pages on the UIZE Web site that reference the Uize.Color.xSvgColors module...
SEARCH
1.2. Implementation Info
The Uize.Color.xSvgColors module defines the Uize.Color.xSvgColors extension module under the Uize.Color namespace.
1.2.1. Features Introduced in This Module
The features listed in this section have been introduced in this module.
STATIC PROPERTIES
Uize.Color.xSvgColors.moduleName | Uize.Color.xSvgColors.pathToResources
1.2.2. Features Overridden in This Module
No features have been overridden in this module.
1.2.3. Features Inherited From Other Modules
This module has no inherited features.
1.2.4. Modules Directly Under This Namespace
There are no modules directly under this namespace.
1.2.5. Unit Tests
There is no dedicated unit tests module for the Uize.Color.xSvgColors module.
2. Using the Colors
When you extend the Uize.Color object using the Uize.Color.xSvgColors extension module, it will then be possible to use the names of the colors defined in this extension when creating instances of the Uize.Color object, or when setting the color of Uize.Color instances using the from instance method.
EXAMPLE
Uize.Color ('#ffebcd');
Uize.Color ('BlanchedAlmond');
Uize.Color (Uize.Color.colors.blanchedalmond);
Each of the above three statements would create a new instance of the Uize.Color object initialized to the SVG color "BlanchedAlmond". And because the Uize.Color module is used by other modules, such as the Uize.Fx module, it is possible to use color names when specifying the values of color CSS style properties for fade effects, as in...
Uize.Fx.fadeStyle ('myNodeId',{color:'DarkMagenta'},{color:'LavenderBlush'});
3. The SVG 1.0 Colors
The Uize.Color.xSvgColors module defines over a hundred additional colors, as listed in the table below.
This is in addition to the seventeen standard CSS 2.1 colors defined in the Uize.Color module, which are white, silver, gray, black, navy, blue, aqua, teal, green, olive, lime, maroon, red, orange, yellow, purple, and fuchsia.
| SVG 1.0 COLORS | |
| COLOR NAME | HEX VALUE |
| aliceBlue | #f0f8ff |
| antiqueWhite | #faebd7 |
| aquamarine | #7fffd4 |
| azure | #f0ffff |
| beige | #f5f5dc |
| bisque | #ffe4c4 |
| blanchedAlmond | #ffebcd |
| blueViolet | #8a2be2 |
| brown | #a52a2a |
| burlyWood | #deb887 |
| cadetBlue | #5f9ea0 |
| chartreuse | #7fff00 |
| chocolate | #d2691e |
| coral | #ff7f50 |
| cornflowerBlue | #6495ed |
| cornSilk | #fff8dc |
| crimson | #dc143c |
| cyan | #00ffff |
| darkBlue | #00008b |
| darkCyan | #008b8b |
| darkGoldenrod | #b8860b |
| darkGray | #a9a9a9 |
| darkGreen | #006400 |
| darkGrey | #a9a9a9 |
| darkKhaki | #bdb76b |
| darkMagenta | #8b008b |
| darkOliveGreen | #556b2f |
| darkOrange | #ff8c00 |
| darkOrchid | #9932cc |
| darkRed | #8b0000 |
| darkSalmon | #e9967a |
| darkSeaGreen | #8fbc8f |
| darkSlateBlue | #483d8b |
| darkSlateGray | #2f4f4f |
| darkSlateGrey | #2f4f4f |
| darkTurquoise | #00ced1 |
| darkViolet | #9400d3 |
| deepPink | #ff1493 |
| deepSkyBlue | #00bfff |
| dimGray | #696969 |
| dimGrey | #696969 |
| dodgerBlue | #1e90ff |
| fireBrick | #b22222 |
| floralWhite | #fffaf0 |
| forestGreen | #228b22 |
| gainsboro | #dcdcdc |
| ghostWhite | #f8f8ff |
| gold | #ffd700 |
| goldenrod | #daa520 |
| greenYellow | #adff2f |
| grey | #808080 |
| honeydew | #f0fff0 |
| hotPink | #ff69b4 |
| indianRed | #cd5c5c |
| indigo | #4b0082 |
| ivory | #fffff0 |
| khaki | #f0e68c |
| lavender | #e6e6fa |
| lavenderBlush | #fff0f5 |
| lawnGreen | #7cfc00 |
| lemonChiffon | #fffacd |
| lightBlue | #add8e6 |
| lightCoral | #f08080 |
| lightCyan | #e0ffff |
| lightGoldenrodYellow | #fafad2 |
| lightGray | #d3d3d3 |
| lightGreen | #90ee90 |
| lightGrey | #d3d3d3 |
| lightPink | #ffb6c1 |
| lightSalmon | #ffa07a |
| lightSeaGreen | #20b2aa |
| lightSkyBlue | #87cefa |
| lightSlateGray | #778899 |
| lightSlateGrey | #778899 |
| lightSteelBlue | #b0c4de |
| lightYellow | #ffffe0 |
| limeGreen | #32cd32 |
| linen | #faf0e6 |
| magenta | #ff00ff |
| mediumAquamarine | #66cdaa |
| mediumBlue | #0000cd |
| mediumOrchid | #ba55d3 |
| mediumPurple | #9370db |
| mediumSeaGreen | #3cb371 |
| mediumSlateBlue | #7b68ee |
| mediumSpringGreen | #00fa9a |
| mediumTurquoise | #48d1cc |
| mediumVioletRed | #c71585 |
| midnightBlue | #191970 |
| mintCream | #f5fffa |
| mistyRose | #ffe4e1 |
| moccasin | #ffe4b5 |
| navajoWhite | #ffdead |
| oldLace | #fdf5e6 |
| oliveDrab | #6b8e23 |
| orangeRed | #ff4500 |
| orchid | #da70d6 |
| paleGoldenrod | #eee8aa |
| paleGreen | #98fb98 |
| paleTurquoise | #afeeee |
| paleVioletRed | #db7093 |
| papayaWhip | #ffefd5 |
| peachPuff | #ffdab9 |
| peru | #cd853f |
| pink | #ffc0cb |
| plum | #dda0dd |
| powderBlue | #b0e0e6 |
| rosyBrown | #bc8f8f |
| royalBlue | #4169e1 |
| saddleBrown | #8b4513 |
| salmon | #fa8072 |
| sandyBrown | #f4a460 |
| seaGreen | #2e8b57 |
| seashell | #fff5ee |
| sienna | #a0522d |
| skyBlue | #87ceeb |
| slateBlue | #6a5acd |
| slateGray | #708090 |
| slateGrey | #708090 |
| snow | #fffafa |
| springGreen | #00ff7f |
| steelBlue | #4682b4 |
| tan | #d2b48c |
| thistle | #d8bfd8 |
| tomato | #ff6347 |
| turquoise | #40e0d0 |
| violet | #ee82ee |
| wheat | #f5deb3 |
| whiteSmoke | #f5f5f5 |
| yellowGreen | #9acd32 |