ColorPicker, commonly used in desktop applications such as Photoshop, is used to select and set rich color values for a specific color feature.

Recently, with the diversification of development requirements, b-side applications also began to introduce color selector controls into the project, how to develop color selector in B-side? Let’s look at the design principles of color pickers.

Color pattern

ColorPicker development requires a certain understanding of color modes, including: RGB, HSL, HSV/HSB, CMYK, etc. Let’s focus on the first three:

RGB

RGB represents the color space composed of Red, Red, Green, Blue and Blue. R, G, and B have 256 levels of brightness each, which can be combined to form 256^3 colors, as shown below:

HSL

HSL is a color space composed of Hue, Saturation and Lightness.

Hue consists of a primary color, an intermediate color, and a complex color. The primary color is red, yellow, and blue. The intermediate color is the color of two of the primary colors mixed in a certain proportion, and the complex color is the color of three of the primary colors mixed in a certain proportion.

In HSL color space, hue can be expressed as: red, yellow, green, cyan, blue and magenta form a closed loop by gradual transition, as shown in the figure below:

Colorpicker can use a hue notation like the one below for hue selection

Saturation refers to the purity of colors. The higher Saturation is, the stronger the colors are, and the lower Saturation is, the lighter the colors are. Generally, the Saturation value ranges from 0% to 100%

Lightness refers to the degree of brightness and darkness of colors. The higher the brightness, the whiter the color; the lower the brightness, the darker the color. Usually, the value ranges from 0% to 100%

By integrating Hue, Saturation and Lightness into a column, the HSL color space model is formed

HSL is applied to Colorpicker to show the effect as shown in the figure below:

HSV / HSB

HSV/HSB is a color space composed of Hue, Saturation Saturation, and Brightness Value/Brightness. HSV and HSB represent the same concept and are the name differences that appear in different fields.

HSB Hue is the same as the HSL Hue introduced earlier

Saturation refers to the amount of white mixed into colors. The higher the Saturation is, the darker and brighter the colors are. The white light component Saturation of spectral colors is 0 and reaches the highest Saturation, usually ranging from 0% to 100%

Value/Brightness is the Brightness of the color. It can be interpreted as the amount of color mixed with the black color. When the lightness is 0, it is black. The state in which the color is most vivid when the maximum brightness is reached. The value ranges from 0 to 100%

The HSV/HSB color space model is formed by integrating Hue, Saturation and Value/Brightness into a cylinder

The HSV color space of a single hue can be expressed as follows:

Applied in Colorpicker

Alpha transparency

Alpha transparency, ranging from 0% to 100%, is another channel for describing colors, and color modes can be composed of RGBA, HSLA, and HSVA

The complete Colorpicker Colorpicker can be applied to the above concepts for actual development, which may also use the color conversion related library for development, the specific implementation effect is shown as follows: