colorify
Version:
a collection of color tools
572 lines (517 loc) • 12.2 kB
Markdown
# colorify
Colorify is a collection of color tools that comes in three forms:
a [website](http://projects.skratchdot.com/colorify),
a [command line tool](#2-command-line-tool), and
a [node.js library](#3-node-js-library):
### 1. Website
The website is built on [react](http://facebook.github.io/react/), and contains
a few **toy apps** that can manipulate and display colors.
- [Colorify: Page: Home](http://projects.skratchdot.com/colorify/)
- [Colorify: Page: About](http://projects.skratchdot.com/colorify/about)
- [Colorify: App: Stats](http://projects.skratchdot.com/colorify/stats)
- [Colorify: App: Mixer](http://projects.skratchdot.com/colorify/mixer)
- [Colorify: App: Math](http://projects.skratchdot.com/colorify/math)
### 2. Command Line Tool
The cli can be installed by running `npm install -g colorify`. This will
add `colorify` to your PATH. For the command line options, you can run
`colorify --help`:
```bash
> colorify --help
Usage: colorify [options] [command]
Commands:
help print help information (alias for using -h or --help)
random [options] get a random color
stats [options] [color] get color stats about an input string
Options:
-h, --help output usage information
-v, --version output the version number
```
```bash
> colorify random --help
Usage: random [options]
get a random color
Options:
-h, --help output usage information
-f, --format <format> css format types: hex, rgb, percent, hsl, hwb
```
```bash
> colorify stats --help
Usage: stats [options] [color]
get color stats about an input string
Options:
-h, --help output usage information
-p, --path <path> only show the specified path (i.e. schemes.tetradic.2)
```
#### Examples
```bash
$ colorify random
```
```bash
#E13954
$ colorify random
#A8A3E5
```
```bash
$ colorify random -f rgb
rgba(137, 102, 186, 0.64)
```
```bash
$ colorify stats --path "hex" "orange"
#ffa500
```
```bash
$ colorify stats --path "websafe" "orange"
#ff9900
```
```bash
$ colorify stats red
"lib": {
"onecolor": {
"red": 1,
"green": 0,
"blue": 0,
"alpha": 1,
"hue": 0,
"saturation": 1,
"value": 1,
"lightness": 0.5,
"cyan": 0,
"magenta": 1,
"yellow": 1,
"black": 0,
"x": 0.4124564,
"y": 0.2126729,
"z": 0.0193339,
"l": 1,
"a": 1,
"b": 0,
"hex": "#ff0000",
"hexa": "#ffff0000",
"css": "rgb(255,0,0)",
"cssa": "rgba(255,0,0,1)",
"cmyk": [
"CMYK",
0,
1,
1,
0,
1
],
"hsl": [
"HSL",
0,
1,
0.5,
1
],
"hsv": [
"HSV",
0,
1,
1,
1
],
"lab": [
"LAB",
1,
1,
1,
1
],
"rgb": [
"RGB",
1,
0,
0,
1
],
"xyz": [
"XYZ",
0.4124564,
0.2126729,
0.0193339,
1
]
},
"color": {
"rgb": {
"r": 255,
"g": 0,
"b": 0
},
"hsl": {
"h": 0,
"s": 100,
"l": 50
},
"hsv": {
"h": 0,
"s": 100,
"v": 100
},
"cmyk": {
"c": 0,
"m": 100,
"y": 100,
"k": 0
},
"rgbArray": [
255,
0,
0
],
"hslArray": [
0,
100,
50
],
"hsvArray": [
0,
100,
100
],
"cmykArray": [
0,
100,
100,
0
],
"rgbaArray": [
255,
0,
0,
1
],
"hslaArray": [
0,
100,
50,
1
],
"alpha": 1,
"red": 255,
"green": 0,
"blue": 0,
"hue": 0,
"saturation": 100,
"lightness": 50,
"saturationv": 100,
"value": 100,
"cyan": 0,
"magenta": 100,
"yellow": 100,
"black": 0,
"hexString": "#FF0000",
"rgbString": "rgb(255, 0, 0)",
"rgbaString": "rgba(255, 0, 0, 1)",
"percentString": "rgb(100%, 0%, 0%)",
"hslString": "hsl(0, 100%, 50%)",
"hslaString": "hsla(0, 100%, 50%, 1)",
"keyword": "red",
"luminosity": 0.2126,
"dark": true,
"light": false
}
},
"alpha": 1,
"cmyk": {
"c": 0,
"m": 100,
"y": 100,
"k": 0
},
"hsl": {
"h": 0,
"s": 100,
"l": 50
},
"hsv": {
"h": 0,
"s": 100,
"v": 100
},
"rgb": {
"r": 255,
"g": 0,
"b": 0
},
"rgbPercent": {
"r": 100,
"g": 0,
"b": 0
},
"hex": "#ff0000",
"hexTriplet": "ff0000",
"isRandom": false,
"parseSuccessful": true,
"closest": {
"name": "Red",
"rgb": [
255,
0,
0
]
},
"websafe": "#ff0000",
"websmart": "#ff0000",
"isWebsafe": true,
"isWebsmart": true,
"schemes": {
"complementary": [
"#ff0000",
"#00ffff"
],
"splitComplementary": [
"#ff0000",
"#00ff80",
"#ff00aa"
],
"splitComplementaryCW": [
"#ff0000",
"#00ff80",
"#ff00ff"
],
"splitComplementaryCCW": [
"#ff0000",
"#ffff00",
"#0080ff"
],
"triadic": [
"#ff0000",
"#00ff00",
"#0000ff"
],
"clash": [
"#ff0000",
"#80ff00",
"#8000ff"
],
"tetradic": [
"#ff0000",
"#80ff00",
"#00ffff",
"#8000ff"
],
"fourToneCW": [
"#ff0000",
"#ffff00",
"#00ffff",
"#0000ff"
],
"fourToneCCW": [
"#ff0000",
"#00ff00",
"#00ffff",
"#ff00ff"
],
"fiveToneA": [
"#ff0000",
"#15ff00",
"#00ff95",
"#0095ff",
"#1500ff"
],
"fiveToneB": [
"#ff0000",
"#ffaa00",
"#80ff00",
"#00ff2a",
"#1500ff"
],
"fiveToneC": [
"#ff0000",
"#ffd500",
"#80ff00",
"#0095ff",
"#ff00aa"
],
"fiveToneD": [
"#ff0000",
"#ffaa00",
"#00ff95",
"#8000ff",
"#ff00d4"
],
"fiveToneE": [
"#ff0000",
"#15ff00",
"#002aff",
"#8000ff",
"#ff00aa"
],
"sixToneCW": [
"#ff0000",
"#ff8000",
"#00ff00",
"#00ff80",
"#0000ff",
"#8000ff"
],
"sixToneCCW": [
"#ff0000",
"#80ff00",
"#00ff00",
"#0080ff",
"#0000ff",
"#ff0080"
],
"neutral": [
"#ff0000",
"#ff4000",
"#ff8000",
"#ffbf00",
"#ffff00",
"#bfff00"
],
"analogous": [
"#ff0000",
"#ff8000",
"#ffff00",
"#80ff00",
"#00ff00",
"#00ff80"
]
},
"shades": [
"#ff0000",
"#e60000",
"#cc0000",
"#b30000",
"#990000",
"#800000",
"#660000",
"#4d0000",
"#330000",
"#1a0000"
],
"tints": [
"#ff0000",
"#ff1a1a",
"#ff3333",
"#ff4d4d",
"#ff6666",
"#ff8080",
"#ff9999",
"#ffb3b3",
"#ffcccc",
"#ffe5e5"
],
"tones": [
"#ff0000",
"#f20d0d",
"#e51a1a",
"#d92626",
"#cc3333",
"#bf4040",
"#b24d4d",
"#a65959",
"#996666",
"#8c7373"
],
"blind": {
"protanomaly": "#b75013",
"protanopia": "#8f7e1e",
"deuteranomaly": "#c34c00",
"deuteranopia": "#a17800",
"tritanomaly": "#fe0f00",
"tritanopia": "#fd1700",
"achromatomaly": "#7f2323",
"achromatopsia": "#363636"
}
}
```
### 3. Node.js Library
In it's current state, this is a pretty lame node.js library. All it does is
expose access to some other helpful color libraries and includes a few helper
functions that were needed for the colorify website. The libraries that are
included are:
- [color](https://github.com/harthur/color)
- [color-blind](https://github.com/skratchdot/color-blind)
- [color-harmony](https://github.com/skratchdot/color-harmony)
- [color-quantize](https://github.com/skratchdot/color-quantize)
- [color-scheme](https://github.com/c0bra/color-scheme-js)
- [color-stats](https://github.com/skratchdot/color-stats)
- [colorconverter](https://github.com/SimonWaldherr/ColorConverter.js)
- [colorname](https://www.npmjs.org/package/colorname)
- [onecolor](https://github.com/One-com/one-color)
You can install the library by running `npm install colorify` and use it:
```javascript
var colorify = require('colorify');
console.log(Object.keys(colorify.lib)); // outputs:
// [
// 'color',
// 'colorBlind',
// 'colorHarmony',
// 'colorQuantize',
// 'colorScheme',
// 'colorStats',
// 'colorConverter',
// 'colorName',
// 'onecolor'
// ]
```
#### Other js libs to check out
- [chromatist](https://github.com/jrus/chromatist)
- [chroma.js](https://github.com/gka/chroma.js)
- ...more to add? submit a [pull request](https://github.com/skratchdot/colorify/pulls)
#### Source Code
- [Source Code on Github](https://github.com/skratchdot/colorify)
## For Developers
### Clone the Project
```bash
git clone https://github.com/skratchdot/colorify.git
cd colorify
```
### Install the Dependencies
```bash
npm install
```
### Run the Application (and watch for changes)
```bash
gulp
```
Now browse to the app at [http://localhost:8080/colorify](http://localhost:8080/colorify)
## Other Links / Tools
- [Color Theory on Wikipedia](http://en.wikipedia.org/wiki/Color_theory)
- [Color Theory on HandPrint.com](http://www.handprint.com/HP/WCL/wcolor.html)
- [Adobe Kuler](https://kuler.adobe.com/)
- [Color Sphere](http://mudcu.be/sphere/)
- [Color Hexa](http://www.colorhexa.com/)
- [Colrd.com](http://colrd.com/)
- [Paletton.com](http://paletton.com/)
- [RYB Color Wheel](http://bahamas10.github.io/ryb/)
- [ColorBlendy](http://colorblendy.com)
- [ColourCo.de](http://colourco.de/)
- [Color @ hailpixel.com](http://color.hailpixel.com/)
- [hslpicker](http://hslpicker.com)
- [ColorBlender](http://colorblender.com)
- [ColorSchemer](http://www.colorschemer.com/online.html)
- [Coolors](http://coolors.co)
- [Please.js](http://www.checkman.io/please/)
- [Lovely Palettes](http://lovelypalettes.com/)
- [Color-Hex](http://www.color-hex.com/)
- [Color Share](http://www.colorshare.co/)
- [UI Gradients](http://uigradients.com)
- [Random CSS Gradient Generator](http://paintbycode.github.io/gradient-generator/)
- [draGGradients](http://elrumordelaluz.github.io/draGGradients/)
- [http://bada55.io](bada55.io)
- [4096 Color Wheel](http://www.ficml.org/jemimap/style/color/wheel.html)
- [AllProfitAllFree - Color Wheel](http://allprofitallfree.com/color-wheel2.html)
- [Color Wheel & Color Scheme Generator](http://design.geckotribe.com/colorwheel/)
- [ColoRotate](http://colorotate.org/)
- [Colors On The Web](http://colorsontheweb.com/)
- [Colour Lovers](http://www.colourlovers.com/)
- [Colr](http://colr.org/)
- [Instant Color Schemes](http://www.gpeters.com/color/color-schemes.php)
- [Color Code Hex](http://colorcodehex.com)
- [Colordrop](http://penguingeorge.com/products/colordrop/)
- [Color Contrast Links](http://thesiteslinger.com/blog/making-color-contrast-checks-a-part-of-your-web-workflow/)
- [Colorable](http://jxnblk.com/colorable/)
- [Computer Color Is Broken](https://www.youtube.com/watch?v=LKnqECcg6Gw)
- [CSS Colours](http://colours.neilorangepeel.com/)
- [HTML Color Codes](http://htmlcolorcodes.com/)
- [Color Matters](http://www.colormatters.com/)
***Have a link to share? Submit a [pull request](https://github.com/skratchdot/colorify/pulls) to add to this list.***
## License
Copyright (c) 2014 [skratchdot](http://skratchdot.com/)
Licensed under the MIT license.