UNPKG

motion

Version:

motion - moving development forward

78 lines (77 loc) 5.51 kB
{ "_args": [ [ "color@https://registry.npmjs.org/color/-/color-0.11.1.tgz", "/Users/nw/flint/packages/flint" ] ], "_from": "color@>=0.11.0 <0.12.0", "_id": "color@0.11.1", "_inCache": true, "_location": "/color", "_phantomChildren": {}, "_requested": { "name": "color", "raw": "color@https://registry.npmjs.org/color/-/color-0.11.1.tgz", "rawSpec": "https://registry.npmjs.org/color/-/color-0.11.1.tgz", "scope": null, "spec": "https://registry.npmjs.org/color/-/color-0.11.1.tgz", "type": "remote" }, "_requiredBy": [ "/colormin" ], "_resolved": "https://registry.npmjs.org/color/-/color-0.11.1.tgz", "_shasum": "19e357ce1872e191e8a91702b4ee1b0ed844187a", "_shrinkwrap": null, "_spec": "color@https://registry.npmjs.org/color/-/color-0.11.1.tgz", "_where": "/Users/nw/flint/packages/flint", "authors": [ "Heather Arthur <fayearthur@gmail.com>", "Josh Junon", "Maxime Thirouin" ], "bugs": { "url": "https://github.com/MoOx/color/issues" }, "dependencies": { "color-convert": "^0.5.3", "color-string": "^0.3.0" }, "description": "Color conversion and manipulation with CSS string support", "devDependencies": { "mocha": "^2.2.5", "xo": "^0.12.1" }, "files": [ "CHANGELOG.md", "LICENSE", "index.js" ], "homepage": "https://github.com/MoOx/color#readme", "keywords": [ "color", "colour", "css" ], "license": "MIT", "name": "color", "optionalDependencies": {}, "readme": "# color [![Build Status](https://travis-ci.org/MoOx/color.svg?branch=master)](https://travis-ci.org/MoOx/color)\n\n> JavaScript library for color conversion and manipulation with support for CSS color strings.\n\n```js\nvar color = Color(\"#7743CE\");\n\ncolor.alpha(0.5).lighten(0.5);\n\nconsole.log(color.hslString()); // \"hsla(262, 59%, 81%, 0.5)\"\n```\n\n## Install\n\n```console\n$ npm install color\n```\n\n## Usage\n\n```js\nvar Color = require(\"color\")\n```\n\n### Setters\n\n```js\nvar color = Color(\"rgb(255, 255, 255)\")\nvar color = Color({r: 255, g: 255, b: 255})\nvar color = Color().rgb(255, 255, 255)\nvar color = Color().rgb([255, 255, 255])\n```\nPass any valid CSS color string into `Color()` or a hash of values. Also load in color values with `rgb()`, `hsl()`, `hsv()`, `hwb()`, and `cmyk()`.\n\n```js\ncolor.red(120)\n```\nSet the values for individual channels with `alpha`, `red`, `green`, `blue`, `hue`, `saturation` (hsl), `saturationv` (hsv), `lightness`, `whiteness`, `blackness`, `cyan`, `magenta`, `yellow`, `black`\n\n### Getters\n\n\n```js\ncolor.rgb() // {r: 255, g: 255, b: 255}\n```\nGet a hash of the rgb values with `rgb()`, similarly for `hsl()`, `hsv()`, and `cmyk()`\n\n```js\ncolor.rgbArray() // [255, 255, 255]\n```\nGet an array of the values with `rgbArray()`, `hslArray()`, `hsvArray()`, and `cmykArray()`.\n\n```js\ncolor.red() // 255\n```\nGet the value for an individual channel.\n\n### CSS Strings\n\n```js\ncolor.hslString() // \"hsl(320, 50%, 100%)\"\n```\n\nDifferent CSS String formats for the color are on `hexString`, `rgbString`, `percentString`, `hslString`, `hwbString`, and `keyword` (undefined if it's not a keyword color). `\"rgba\"` and `\"hsla\"` are used if the current alpha value of the color isn't `1`.\n\n### Luminosity\n\n```js\ncolor.luminosity(); // 0.412\n```\nThe [WCAG luminosity](http://www.w3.org/TR/WCAG20/#relativeluminancedef) of the color. 0 is black, 1 is white.\n\n```js\ncolor.contrast(Color(\"blue\")) // 12\n```\nThe [WCAG contrast ratio](http://www.w3.org/TR/WCAG20/#contrast-ratiodef) to another color, from 1 (same color) to 21 (contrast b/w white and black).\n\n```js\ncolor.light(); // true\ncolor.dark(); // false\n```\nGet whether the color is \"light\" or \"dark\", useful for deciding text color.\n\n### Manipulation\n\n```js\ncolor.negate() // rgb(0, 100, 255) -> rgb(255, 155, 0)\n\ncolor.lighten(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)\ncolor.darken(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)\n\ncolor.saturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)\ncolor.desaturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)\ncolor.greyscale() // #5CBF54 -> #969696\n\ncolor.whiten(0.5) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)\ncolor.blacken(0.5) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)\n\ncolor.clearer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)\ncolor.opaquer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)\n\ncolor.rotate(180) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)\ncolor.rotate(-90) // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)\n\ncolor.mix(Color(\"yellow\")) // cyan -> rgb(128, 255, 128)\ncolor.mix(Color(\"yellow\"), 0.3) // cyan -> rgb(77, 255, 179)\n\n// chaining\ncolor.green(100).greyscale().lighten(0.6)\n```\n\n### Clone\n\nYou can can create a copy of an existing color object using `clone()`:\n\n```js\ncolor.clone() // -> New color object\n```\n\nAnd more to come...\n\n## Propers\n\nThe API was inspired by [color-js](https://github.com/brehaut/color-js). Manipulation functions by CSS tools like Sass, LESS, and Stylus.\n", "readmeFilename": "README.md", "repository": { "type": "git", "url": "git+ssh://git@github.com/MoOx/color.git" }, "scripts": { "pretest": "xo", "test": "mocha" }, "version": "0.11.1", "xo": { "rules": { "new-cap": 0, "no-cond-assign": 0 } } }