System learning Web graphics system in the basic method of color.

A,RGB 和 RGBAColor notation

Definition 1.

  1. RGB color

    The hexadecimal notation of RGB colors is as follows: #RRGGBB, where RR, GG, and BB are two hexadecimal digits that represent the color levels of the red, green, and blue channels.

    Levels indicate the strength of a channel. The value is 0, 255.

    RGB color is a mixture of red, green and blue primary colors visible to human eyes. It doesn’t represent all the colors that the human eye can see. But general monitors, color printers, scanners all support it.

    CSS typically has two ways to represent RGB color values in a browser:

    • #RRGGBBHexadecimal notation
    • rgb(red, green, blue)Decimal notation

  2. RGBA

    RGBA essentially adds an Alpha channel to RGB, transparency (value [0, 1]).

    In some newer browsers, RGBA color values can be represented as #RRGGBBAA. But older browsers only supported RGBA (Red, Green, Blue, Alpha).

WebGL’s shader supports RGBA by default. However, WebGL uses normalized floating point values, that is, WebGL’s color components R, G, B, and A are all floating point values between 0 and 1.

Characteristics of 2.

RGB and RGBA color representations are very simple, but when it comes to choosing a set of colors to use on a chart, we don’t know what rules to use to configure the colors so that the contrast between different figures is as sharp as possible. For an RGB color, it is only roughly intuitive to determine whether it favors red, green or blue.

RGB color values are rarely used directly when visual color effects need to be dynamically constructed. But the more common HSL and HSV color notation.

Second,HSL 和 HSVColor notation

Definition 1.

HSL and HSV use Hue, Saturation, and Lightness or Value to denote colors. Hue is the Angle. The value ranges from 0 to 360 degrees. The saturation, brightness, or lightness ranges from 0 to 100%.

According to HSL rules, the higher the brightness, the closer the color is to white, and only by increasing the saturation can the color not be too light.

Both CSS and Canvas2D support HSL colors directly, only WebGL requires the conversion.

Characteristics of 2.

Because human eyes have different sensitivity to different frequencies of light, even if we can evenly modify the brightness and saturation of colors, there are still some colors that look significantly different from other colors, and some colors are not so obvious.

3. The conversion

Use RGB and HSV conversion code in shaders to generate the vertex shaders and chip shaders required for drawing.

vec3 rgb2hsv(vec3 c){
  vec4 K = vec4(0.0.1.0 / 3.0.2.0 / 3.0.1.0);
  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
  float d = q.x - min(q.w, q.y);
  float e = 1.0 e-10;
  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}

vec3 hsv2rgb(vec3 c){
  vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0.4.0.2.0), 6.0)3.0)1.0.0.0.1.0);
  rgb = rgb * rgb * (3.0 - 2.0 * rgb);
  return c.z * mix(vec3(1.0), rgb, c.y);
}
Copy the code

Three,CIE Lab 和 CIE LchColor notation

Definition 1.

CIE Lab, a color description method for human perception. It uses L for brightness and A and B for color contrast.

// csS-color Level4 specifies Lab color values
lab() = lab(<percentage> <number> <nubmer> [ / <alpha-value> ]?)
Copy the code

RGB value can be converted to Lab value.

Characteristics of 2.

There is currently no graphics system that supports CIE Lab. Use tools such as the D3-color JavaScript library.

Four,CubehelixColor wheel

Definition 1.

The Cubehelix color plate builds a spiral line in the RGB cube, allowing the hue to spiral as the brightness increases.

Application 2.

Construct cubeHelix color disk color mapping function with NPM package CubeHelix.

5. Business scenarios

In visual applications, there are generally two ways to use color:

  1. Project-wideUIAll color matching byUIDevelopers can use any color format as long as the designer designs it.
  2. The designer sets the visual tone and some primary colors, and the developer dynamically generates color values based on the primary colors and data.

In general chart presentation projects, method 1 is used more often. However, in some projects with complex data, method 2 is more commonly used. For example, when continuously changing data is expected to present continuous color transformation, HLS, CIELab and Cubehelix color disks are combined with data variables to dynamically generate color values.

Six, the summary

The methods of color representation in Web graphics system can be divided into two categories:

  1. RGB,HLS 和 HLV,CIELab 和 CIELchEqual color space representation;
  2. CubehelixColor dial notation.
WebA graphical system for representing colors define advantages disadvantages
RGB Use the levels of three primary colors to represent colors The most basic color notation Not user friendly enough
HLS 和 HLV To indicate a color by hue, saturation, brightness, or lightness Developer friendly The numerical transformation is not completely consistent with human perception
CIELab 和 CIELch Color space notation A color space representation consistent with human perception Not yet supported by browsers, but there are someJavaScriptLibraries (such as:d3-color) can be handled directlyLabColor space
Cubehelix Color dial notation Ideal for rendering colors that change dynamically with data –

In visualization, data is reflected using common information about the size, height, width, color, and shape of the graph. At the same time, the technique of two-dimensional reinforcement will be used to overlay the information of two dimensions, so as to enhance the visual presentation effect.