Current Version: 1.2.3
Minified: 6.7KB (2.76KB gzipped)
Colors aims to be an easy to use color manipulation library that is lightweight and very functional.
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.
Colors is on cdnjs.com
//cdnjs.cloudflare.com/ajax/libs/Colors.js/1.2.3/colors.min.js
Example of complementary hexadecimal color.
| Input Color | Complementary Color |
Try it!
How to use!
Function: rgb2hex( [multiple Ints: R,G,B] or [single Int: COLOR] )
| Description: Change 3 RGB Ints or single Int to a Hexadecimal color. |
| Parameters: 1. (required) Either R, G, B as Ints or a single Integer representing all of R, G, and B. |
| Return Values: Returns a six-digit hexadecimal color representation of the RGB value with the hash mark '#'. |
Examples:
$c.rgb2hex(153 ,153, 153) // multiple Ints, returns: #999999 $c.rgb2hex(153) // single Int, returns: #999999 |
| Changes: 0.1: Added 1.1: Changed the `for` loop to a better method. Added 3 separate variable for R G & B, using R only for single color. |
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 Array of the integer values for R, G & B. |
Examples:
$c.hex2rgb('#ffffff').R // returns: 255
$c.hex2rgb('#ffffff').RGB // returns: 255 255 255
$c.hex2rgb('#ffffff').a // returns: [255, 255, 255] as Array.
|
| 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 Array of the integer values for H, S & V. |
Examples:
$c.hex2hsv('#ffffff').H // returns: 0
$c.hex2hsv('#ffffff').HSV // returns: 0 0 100
$c.hex2hsv('#ffffff').a // returns: [0, 0, 100] as Array.
|
| 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 Array of the integer values for H, S & V. |
Examples:
$c.hsv2rgb(130, 123, 132).R // returns: X as R in RGB $c.hsv2rgb(130, 123, 132).RGB // returns: X X X as RGB in RGB $c.hsv2rgb(130, 123, 132).a // returns: [X, X, X] as R, G, B as an Array 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:
$c.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 Array of the complimentary integer values for R, G & B. |
Examples:
$c.complement([0, 0, 0]).R // returns: 255 $c.complement( 0, 0, 0 ).RGB // returns: 255 255 255 $c.complement([0, 0, 0]).a // returns: [255, 255, 255] as Array. |
| 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:
$c.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:
$c.name2rgb('red').R // returns: 255
$c.name2rgb('red').RGB // returns: 255 0 0
$c.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:
$c.name2hsv('red').H // returns: 0
$c.name2hsv('red').HSV // returns: 0 100 100
$c.name2hsv('red').a // returns: [0, 100, 100]
|
| 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:
$c.rand() // returns: '#xxxxxx'
$c.rand('hex') // returns: '#xxxxxx'
$c.rand('rgb').R // returns: XXX
$c.rand('rgb').RGB // returns: XXX XXX XXX
$c.rand('rgb').a // returns: [XXX, XXX, XXX]
|
| Changes: 0.2: Added |