7271a64bfdaa1dc3358a1e8c7bafdeabc1d643a391d6ad270ab75f6dfa135334c1931cd1cc58185ea4eb7ccb89b8bb2adf23429f8957c3fb2a3c105d2b160e 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. # chartjs-color
  2. [![npm](https://img.shields.io/npm/v/chartjs-color.svg?style=flat-square)](https://npmjs.com/package/chartjs-color) [![Travis](https://img.shields.io/travis/chartjs/chartjs-color.svg?style=flat-square)](https://travis-ci.org/chartjs/chartjs-color)
  3. > JavaScript library for color conversion and manipulation with support for CSS color strings.
  4. ```js
  5. var color = Color("#7743CE");
  6. color.alpha(0.5).lighten(0.5);
  7. console.log(color.hslString()); // "hsla(262, 59%, 81%, 0.5)"
  8. ```
  9. ## Install
  10. ```console
  11. $ npm install color
  12. ```
  13. ## Usage
  14. ```js
  15. var Color = require("color")
  16. ```
  17. ### Setters
  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. Pass any valid CSS color string into `Color()` or a hash of values. Also load in color values with `rgb()`, `hsl()`, `hsv()`, `hwb()`, and `cmyk()`.
  25. ```js
  26. color.red(120)
  27. ```
  28. Set the values for individual channels with `alpha`, `red`, `green`, `blue`, `hue`, `saturation` (hsl), `saturationv` (hsv), `lightness`, `whiteness`, `blackness`, `cyan`, `magenta`, `yellow`, `black`
  29. ### Getters
  30. ```js
  31. color.rgb() // {r: 255, g: 255, b: 255}
  32. ```
  33. Get a hash of the rgb values with `rgb()`, similarly for `hsl()`, `hsv()`, and `cmyk()`
  34. ```js
  35. color.rgbArray() // [255, 255, 255]
  36. ```
  37. Get an array of the values with `rgbArray()`, `hslArray()`, `hsvArray()`, and `cmykArray()`.
  38. ```js
  39. color.red() // 255
  40. ```
  41. Get the value for an individual channel.
  42. ### CSS Strings
  43. ```js
  44. color.hslString() // "hsl(320, 50%, 100%)"
  45. ```
  46. Different 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`.
  47. ### Luminosity
  48. ```js
  49. color.luminosity(); // 0.412
  50. ```
  51. The [WCAG luminosity](http://www.w3.org/TR/WCAG20/#relativeluminancedef) of the color. 0 is black, 1 is white.
  52. ```js
  53. color.contrast(Color("blue")) // 12
  54. ```
  55. 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).
  56. ```js
  57. color.light(); // true
  58. color.dark(); // false
  59. ```
  60. Get whether the color is "light" or "dark", useful for deciding text color.
  61. ### Manipulation
  62. ```js
  63. color.negate() // rgb(0, 100, 255) -> rgb(255, 155, 0)
  64. color.lighten(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
  65. color.darken(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
  66. color.saturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
  67. color.desaturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
  68. color.greyscale() // #5CBF54 -> #969696
  69. color.whiten(0.5) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
  70. color.blacken(0.5) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)
  71. color.clearer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
  72. color.opaquer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)
  73. color.rotate(180) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
  74. color.rotate(-90) // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)
  75. color.mix(Color("yellow")) // cyan -> rgb(128, 255, 128)
  76. color.mix(Color("yellow"), 0.3) // cyan -> rgb(77, 255, 179)
  77. // chaining
  78. color.green(100).greyscale().lighten(0.6)
  79. ```
  80. ### Clone
  81. You can can create a copy of an existing color object using `clone()`:
  82. ```js
  83. color.clone() // -> New color object
  84. ```
  85. And more to come...
  86. ## Propers
  87. The API was inspired by [color-js](https://github.com/brehaut/color-js). Manipulation functions by CSS tools like Sass, LESS, and Stylus.