You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

119 lines
3.4 KiB

4 years ago
  1. # color [![Build Status](https://travis-ci.org/Qix-/color.svg?branch=master)](https://travis-ci.org/Qix-/color)
  2. > JavaScript library for immutable color conversion and manipulation with support for CSS color strings.
  3. ```js
  4. var color = Color('#7743CE').alpha(0.5).lighten(0.5);
  5. console.log(color.hsl().string()); // 'hsla(262, 59%, 81%, 0.5)'
  6. console.log(color.cmyk().round().array()); // [ 16, 25, 0, 8, 0.5 ]
  7. console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 }
  8. ```
  9. ## Install
  10. ```console
  11. $ npm install color
  12. ```
  13. ## Usage
  14. ```js
  15. var Color = require('color');
  16. ```
  17. ### Constructors
  18. ```js
  19. var color = Color('rgb(255, 255, 255)')
  20. var color = Color({r: 255, g: 255, b: 255})
  21. var color = Color.rgb(255, 255, 255)
  22. var color = Color.rgb([255, 255, 255])
  23. ```
  24. Set the values for individual channels with `alpha`, `red`, `green`, `blue`, `hue`, `saturationl` (hsl), `saturationv` (hsv), `lightness`, `whiteness`, `blackness`, `cyan`, `magenta`, `yellow`, `black`
  25. String constructors are handled by [color-string](https://www.npmjs.com/package/color-string)
  26. ### Getters
  27. ```js
  28. color.hsl();
  29. ```
  30. Convert a color to a different space (`hsl()`, `cmyk()`, etc.).
  31. ```js
  32. color.object(); // {r: 255, g: 255, b: 255}
  33. ```
  34. Get a hash of the color value. Reflects the color's current model (see above).
  35. ```js
  36. color.rgb().array() // [255, 255, 255]
  37. ```
  38. Get an array of the values with `array()`. Reflects the color's current model (see above).
  39. ```js
  40. color.rgbNumber() // 16777215 (0xffffff)
  41. ```
  42. Get the rgb number value.
  43. ```js
  44. color.hex() // 0xffffff
  45. ```
  46. Get the hex value.
  47. ```js
  48. color.red() // 255
  49. ```
  50. Get the value for an individual channel.
  51. ### CSS Strings
  52. ```js
  53. color.hsl().string() // 'hsl(320, 50%, 100%)'
  54. ```
  55. Calling `.string()` with a number rounds the numbers to that decimal place. It defaults to 1.
  56. ### Luminosity
  57. ```js
  58. color.luminosity(); // 0.412
  59. ```
  60. The [WCAG luminosity](http://www.w3.org/TR/WCAG20/#relativeluminancedef) of the color. 0 is black, 1 is white.
  61. ```js
  62. color.contrast(Color("blue")) // 12
  63. ```
  64. The [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).
  65. ```js
  66. color.isLight(); // true
  67. color.isDark(); // false
  68. ```
  69. Get whether the color is "light" or "dark", useful for deciding text color.
  70. ### Manipulation
  71. ```js
  72. color.negate() // rgb(0, 100, 255) -> rgb(255, 155, 0)
  73. color.lighten(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
  74. color.darken(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
  75. color.saturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
  76. color.desaturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
  77. color.grayscale() // #5CBF54 -> #969696
  78. color.whiten(0.5) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
  79. color.blacken(0.5) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)
  80. color.fade(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
  81. color.opaquer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)
  82. color.rotate(180) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
  83. color.rotate(-90) // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)
  84. color.mix(Color("yellow")) // cyan -> rgb(128, 255, 128)
  85. color.mix(Color("yellow"), 0.3) // cyan -> rgb(77, 255, 179)
  86. // chaining
  87. color.green(100).grayscale().lighten(0.6)
  88. ```
  89. ## Propers
  90. The API was inspired by [color-js](https://github.com/brehaut/color-js). Manipulation functions by CSS tools like Sass, LESS, and Stylus.