The basic concept

Primary color: refers to the “primary color” that cannot be obtained through the mixing of other colors, and other new colors can be produced by mixing primary colors in different proportions. Since the human eye has photoreceptors of three different colors, the color space seen can usually be expressed by three basic colors, which are called “primary colors.” Generally speaking, the superposition of the three primary colors is red, green, blue, (also known as the three primary colors, for television, projector and other display equipment).

Color space: A way of organizing colors so that fixed analog and digital representations of colors (e.g. Adobe RGB and sRGB) can be obtained through color space and testing against physical devices.

Color model: An abstract mathematical model that describes colors as a set of numbers (e.g. RGB uses triples).

Color representation and conversion in the CSS

Method 1: color words

color: red; / / redcolor: green; / / greencolor: blue; / / blueCopy the code

See all the color words here.

Mode 2: RGB

color: rgb(255.0.0.1); / / redcolor: rgb(0.255.0.1); / / greencolor: rgb(0.0.255.1); / / blueCopy the code

RGB is A set of decimal values representing colors, structured as RGB (R, G, B, A) (where A represents transparency). RGB color models are created by mapping red, green, and blue to A three-dimensional Cartesian coordinate system.

Mode 3: HEX

color: #FF0000; / / redcolor: #00FF00; / / greencolor: #0000FF; / / blueCopy the code

HEX is A set of hexadecimal values for colors, structured like #RRGGBB[AA] or #RGB[A] (where A denotes transparency). The following equation holds:

color: #FF0000; / / equivalent to thecolor: #F00; / / equivalent to thecolor: #F00F;
Copy the code

RGB to HEX algorithm:

/ / https://github.com/bgrins/TinyColor/blob/master/tinycolor.js#L497
function rgbToHex(r, g, b, allow3Char) {
  var hex = [
    pad2(mathRound(r).toString(16)),
    pad2(mathRound(g).toString(16)),
    pad2(mathRound(b).toString(16))];// Return a 3 character hex if possible
  if (allow3Char &&
    hex[0].charAt(0) == hex[0].charAt(1) &&
    hex[1].charAt(0) == hex[1].charAt(1) &&
    hex[2].charAt(0) == hex[2].charAt(1)) {return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
  }
  return hex.join("");
}
Copy the code

Method 4: HSL

color: hsl(0.1000%.50%); / / redcolor: hsl(120.100%.50%); / / greencolor: hsl(240.100%.50%); / / blueCopy the code

The structure of HSL is HSL (H,S,L,A) (where A represents transparency), which is A way to represent points in RGB color model in cylindrical coordinate system. This color model can be more intuitive than the geometric structure based on Cartesian coordinate system.

  • Hue: The value ranges from 0 to 360. 0 or 360 indicates red, 120 indicates green, and 240 indicates blue.
  • Saturation refers to the purity of colors ranging from 0 to 100%. The higher the Saturation is, the purest the colors become gray.
  • Lightness: Ranges from 0 to 100%.

RGB to HSL algorithm:

/ / https://github.com/bgrins/TinyColor/blob/master/tinycolor.js#L379
function rgbToHsl(r, g, b) {
  r = bound01(r, 255);
  g = bound01(g, 255);
  b = bound01(b, 255);
  var max = mathMax(r, g, b), min = mathMin(r, g, b);
  var h, s, l = (max + min) / 2;
  if (max == min) {
    h = s = 0; // achromatic
  }
  else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }

    h /= 6;
  }
  return { h: h, s: s, l: l };
}
Copy the code

Related information:

  • Color space
  • An HSL and HSV
  • CSS color
  • tinycolor2

Follow the wechat public account “dependency Injection” for a better reading experience.