1,

Color has three characteristics, namely hue, lightness and saturation. These three properties of color and their relationship can be illustrated by the three-dimensional color solid.

Color.js is a third-party library that enhances Color handling in front-end development.

Assuming you have a basic understanding of the concepts of color channels, color Spaces, hue, saturation, brightness, opacity, etc. Of course, it’s not hard for you to believe in these concepts.

2. Easily manage colors — the color.js library

Color.js provides a simple Color management API for front-end developers. With color.js, you can create a Color object that allows you to easily perform a variety of Color operations, such as format conversions, obtaining single channel values, etc., regardless of the specific Color model and the corresponding conversion relationships.

The color.js library supports RGB, HSV, and HSL color models, as well as their respective alpha channels. It supports strings that represent colors in CSS, so it’s very convenient. Colorspace.js may be a better choice if your primary focus is on colorspace management related to human eye perception (e.g. you are involved in Lab mode) rather than color processing and conversion. Of course, in fact, the usual development of Color. Js is enough, at least I have not heard of any site using a Color mode such as Lab.

Color objects are immutable objects (objects whose state cannot be changed after they are created). All operations provided in the API return them, so you can use chained calls.

3. The use of color. Js

The document address: www.npmjs.com/package/col…

When you use the library in your projects, you can get the Color from the public namespace net.brehaut. Maybe you want to import it into your own namespace, such as:

Color creates a new object based on the parameters (object, string, or array) you imported. Note that this is a factory function and not a constructor, of course if you use the new keyword it will return the new object. Here are a few ways to do this:

When you use the API library for one of the above colors, it returns either a color (or a set of colors), or a value. You can chain a number of manipulation methods together. Such as:

A common scenario is to perform a series of calculations for the elements on the page. Then, you can use the toCSS method to convert the values into a reasonable CSS color format, as shown in the following code:

The methods provided by the API fall into three broad categories:

  1. Accessor Methods Read and set values (e.g. GetHue /setHue);
  2. Color Methods handle colors and return a new Color object (such as shiftHue), or return an array (such as Splitimitation aryScheme)
  3. Methods that convert or construct (such as toCSS)

All values are 0-1 floating point numbers, except Hue, which is a 0-360 value (you should already know the basic Hue wheel).

4,Accessor Methods
  • These methods are automatically generated by the API to read or set the value of an object.
  • GetRed () returns the value of the red channel, a float of 0 to 1.
  • GetBlue () returns the value of the blue channel, a float of 0 to 1.
  • GetGreen () returns the value of the green channel, a float of 0 to 1.
  • SetRed (newRed) sets the value of the red channel and returns a new color.
  • SetGreen (newGreen) sets the value of the blue channel, returning a new color.
  • SetBlue (newBlue) sets the value of the green channel, returning a new green color.
  • GetHue () returns the hue value.
  • SetHue (newHue) Sets the hue value.
  • GetSaturation () Returns the saturation value.
  • SetSaturation (newSaturation) Sets the saturation value.
  • GetValue () returns the value of lightness.
  • SetValue (newValue) sets the value of lightness.
  • GetLightness () returns the brightness value.
  • SetLightness (newLightness) Sets the brightness value.
  • GetAlpha () returns Alpha.
  • SetAlpha (newAlpha) Sets the Alpha.
  • GetLuminance () returns a value of 0 to 1, indicating how bright the color would appear to the human eye when displayed on a traditional monitor.
5.Color Methods
  • The shiftHue(degrees) parameter is a number that indicates the Angle at which the color rotates on the color wheel. It can be a negative number. Such as

  • DarkenByAmount (Amount) Reduces the brightness value of the color, that is, reduces the lightness value of the color of the HSL color mode.

  • DarkenByRadio (RADIO) reduces the lightness value of the HSL color mode by a certain proportion.

  • LightenByAmount (amount) is the opposite of darkenByAmount().
  • LightenByRatio (amount) is the opposite of darkenByRatio()
  • DevalueByAmount (Amount) Reduces the brightness value of the HSV color mode.
  • DevalueByRatio (Ratio) Reduces the brightness value of HSV color mode by a certain proportion.
  • ValueByAmount (amount) is the opposite of devalueByAmount().
  • ValueByRatio (ratio) is the opposite of devalueByRatio().
  • desaturateByAmount(amount)
  • desaturateByRatio(ratio)
  • saturateByAmount(amount)
  • saturateByRatio(ratio)
  • Blend (Color,alpha) returns a blend of colors. For example, black.blend(white,0) returns black, black.blend(white,0.5) returns gray, and black.blend(white,1) returns white.
6. Transformation and construction
  • ToHSV () converts toHSV color mode
  • ToRGB () converts toRGB color mode
  • ToHSL () converts toHSL color mode
  • ToCSS () A hexadecimal value in CSS that represents a color. You can have an argument that represents the number of bits per channel for the returned color. The default value is 2. Such as:

  • ToString () returns this.tocss (). The main idea is to deploy a toString method on the color object, which is called by default for operations such as string addition.

GitHub: github.com/brehaut/col…

Copyright ©2017 The Cause of Death