Colors: JavaScript Color Library
JavaScript Library
The goal of Colors is to have an easy to use color manipulation library that is lightweight and very functional. I have plans for adding more functions in the future. Check out the to do list and let me know what you think.
Colors can do the following:
- Change RGB to a Hexadecimal color.
- Change Hexadecimal to an RGB color.
- Change Hexadecimal to an HSV color.
- Get the complementary value of a Hexadecimal color.
- Get the complementary value of an RGB color.
- Named color to an RGB object, HSV object or Hexadecimal string.
- Get a random color in RGB or Hexadecimal.
Example of complementary hexadecimal color.
| Input Color | Complementary Color |
Try it!
How to use!
Function: rgb2hex( [object R,G,B] or [int R, G or B] )
| Description: Change an RGB object to a Hexadecimal color. |
| Parameters: 1. (required) Either an Object of [R, G, B] or a single Integer of R, G, or B. |
| Return Values: Returns a six-digit hexadecimal color representation of the RGB value with the hash mark '#'. |
Examples:
Colors.rgb2hex([153 ,153, 153]) // returns: #999999 Colors.rgb2hex(153) // returns: 99 (No hash mark) |
| Changes: 0.1: Added |
Function: hex2rgb( 'hex color string' ).[obj R, G, B, RGB or a]
| Description: Change a hexadecimal color string to an RGB color object. |
| Parameters: 1. (required) Hexadecimal string, with or without the hash mark '#'. |
| Return Values: Returns an object with 5 properties. R, G & B - A single integer value for any given primary. RGB - A string with all primaries with spaces, ex. 255 255 255. a - an object of the integer values for R, G & B. |
Examples:
Colors.hex2rgb('#ffffff').R // returns: 255
Colors.hex2rgb('#ffffff').RGB // returns: 255 255 255
Colors.hex2rgb('#ffffff').a // returns: [255, 255, 255] as object.
|
| Changes: 0.1: Added |
Function: hex2hsv ( 'hex color string' ).[obj H, S, V, HSV or a]
| Description: Change a hexadecimal color string to an HSV color object. |
| Parameters: 1. (required) Hexadecimal string, with or without the hash mark '#'. |
| Return Values: Returns an object with 5 properties. H, S & V - A single integer value for any given property. HSV - A string with all properties with spaces, ex. 210 51 85. a - an object of the integer values for H, S & V. |
Examples:
Colors.hex2hsv('#ffffff').H // returns: 0
Colors.hex2hsv('#ffffff').HSV // returns: 0 0 100
Colors.hex2hsv('#ffffff').a // returns: [0, 0, 100] as object.
|
| Changes: 0.1: Added |
Function: hsv2rgb ([obj H, S, V] or [int H, S, V]).[obj R, G, B, RGB or a]
| Description: Change an HSV color object or int string to an RGB color object. |
Parameters: |
| Return Values: Returns an object with 5 properties. R, G or B - A single integer value for any given property. RBG - A string with all properties with spaces, ex. 210 51 85. a - an object of the integer values for H, S & V. |
Examples:
Colors.hsv2rgb(130, 123, 132).R // returns: X as R in RGB Colors.hsv2rg(130, 123, 132).RGB // returns: X X X as RGB in RGB Colors.hsv2rg(130, 123, 132).a // returns: [X, X, X] as R, G, B as an object in RGB. |
| Changes: 0.1: Added |
Function: complement ( '#ffffff' )
| Description: Get the complementary value of a hexadecimal color. |
| Parameters: 1. (required) A valid, 3 or 6 digit hexadecimal color with hash mark. |
| Return Values: Returns the complimentary value (string) of the provided color. E.g. #000000 |
Examples:
Colors.complement('#ffffff') // returns: #000000) |
| Changes: 0.1: Added 0.2: Updated with a regex match to better tell the diff between hex and rgb. 1.0: Now supports 3 digit hex colors (#000). |
Function: complement ( [obj R, G, B] or R, G, B )
| Description: Get the complementary value of an RGB color. |
| Parameters: 1. (required) A valid RGB color either as an [object] or as properties. |
| Return Values: Returns an object with 5 properties. R, G & B - A single integer complimentary value for any given primary. RGB - A string with all primaries with spaces, ex. 255 255 255. a - an object of the complimentary integer values for R, G & B. |
Examples:
Colors.complement([0, 0, 0]).R // returns: 255 Colors.complement( 0, 0, 0 ).RGB // returns: 255 255 255 Colors.complement([0, 0, 0]).a // returns: [255, 255, 255] as object. |
| Changes: 0.1: Added 0.2: Updated with a regex match to better tell the diff between hex and rgb. |
Function: name2hex ( 'color name' )
| Description: Get the hexadecimal value of an HTML color name. Must be one of the 176 HTML color names as defined by the HTML & CSS standards. |
| Parameters: 1. (required) A valid HTML color name as defined by the HTML & CSS standards. |
| Return Values: Returns a hexadecimal color value for the given name. |
Examples:
Colors.name2hex('red') // returns: '#ff0000' |
| Changes: 0.1: Added |
Function: name2rgb ( 'color name' )
| Description: Get an RGB object value of an HTML named color. |
| Parameters: 1. (required) A valid HTML color name as defined by the HTML & CSS standards. |
| Return Values: Returns a given HTML name in an RGB object. |
Examples:
Colors.name2rgb('red').R // returns: 255
Colors.name2rgb('red').RGB // returns: 255 0 0
Colors.name2rgb('red').a // returns: [255, 0, 0]
|
| Changes: 0.1: Added |
Function: name2hsv ( 'color name' )
| Description: Get an HSV object value of an HTML named color. |
| Parameters: 1. (required) A valid HTML color name as defined by the HTML & CSS standards. |
| Return Values: Returns a given HTML name as an HSV object. |
Examples:
Colors.name2hsv('red').R // returns: 255
Colors.name2hsv('red').RGB // returns: 255 0 0
Colors.name2hsv('red').a // returns: [255, 0, 0]
|
| Changes: 0.1: Added |
Function: rand ( color mode )
| Description: Get a random color in either hexadecimal or RGB color modes. |
| Parameters: 1. (optional, string) Can be either 'hex' or 'rgb'. Hex is default. |
| Return Values: Returns a random color either in a hexadecimal string or an RGB object. |
Examples:
Colors.rand() // returns: '#xxxxxx'
Colors.rand('hex') // returns: '#xxxxxx'
Colors.rand('rgb').R // returns: XXX
Colors.rand('rgb').RGB // returns: XXX XXX XXX
Colors.rand('rgb').a // returns: [XXX, XXX, XXX]
|
| Changes: 0.2: Added |
To Do:
Add support for three digit short hex colors on complement function. Done - 2/14/12