This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021
introduce
Color model is a mathematical model used to represent colors. The most common RGB model, for example, uses red, green and blue to represent colors. General color models can be classified as follows:
Hardware oriented color models: RGB, CMYK, YCrCb. Color Models for visual perception: HSL, HSV(B), HSI, Lab.
Different color models have different application scenarios, and RGB models are suitable for devices such as monitors.
Among them,The front end supportsRGB,HSLIn other words, only the color values of these two models can be effectively displayed in the front page.
And forHSV, is a model we need to understand when creating a color picker plug-in.
At present,chromeBrowser, implementationH5The color palette is based onHSVModel:
Note:fixforeThe browser still supports the desktop color palette (like Windows, which is used to edit colors in drawing software).
This paper will mainly introduce three models: RGB, HSL and HSV.
RGB model
RGB is often said red (R), green (G), blue (B) three primary color model, is the most widely used color model. Especially in front-end development, this model is almost always used for color processing. For example: RGB (0, 0, 255), #d3d3d3. The model presents different colors with different intensities by changing and mixing three color channels, red, green and blue. It is an additive color mixing model. In the process of superposition mixing, the brightness is equal to the synthesis of color brightness. The more mixed, the higher the brightness.
According to the different values of the tricolor, there are generally the following types:
- R5G5B5(A1) : 16 bits. All colors are represented by five bits
31 (2 ^ 0-5-1)And the remaining 1 bit can be used as the Alpha channel or not. - R5G6B5:16 bits. R and B occupy five bits
0-31 (2 ^ 5); G occupies six digits(2 ^ 6 0-63-1). - R8G8B8:24 bits. Eight bits are used for colors. The value ranges from
(2 ^ 8 0-255-1).
Most to have2 ^ 24Color, from the beginning of 24 color is true color, basic human eye limit. - R8G8B8(A8) : 32-bit. Eight bits are used for each color
(2 ^ 8 0-255-1)The remaining 8 bits may be used as the Alpha channel or not.
The most common of these, of course, are the 24-bit and 32-bit types. Each color in the three-color channel has 256 levels of brightness, with 0 being the darkest and 255 being the brightest. If the values of the three colors are the same, gray tones of different gray values will be produced, with 0 being the darkest color and 255 being the brightest white color.
An RGB color value
First take a look at the display of RGB color values in the front, such as red:
'rgb(255, 0, 0)'
'rgba(255, 0, 0, 1)' // With transparency
'#ff0000'
'#f00' / / abbreviation
'red' // Color name
Copy the codeDescribe RGB models, using color values, RGB and hexadecimal.
RGB (0, 0)Notation, in general, red, green and blue ranges0-255., if plusalphaTransparent channel, isRgba (0,0,0,1)。hexA representation of 24 bits in hexadecimal notation, as in# 000000, a total of 6 digits, each corresponding to red, green and blue respectively, can be abbreviated as# 000.
hexYou can also use# 00000000, followed by the hex value of transparency.
In addition, in front end development, you can use color names such as Red, green, gray, and other identifying colors. In fact, the color name here is still a corresponding RGB color value, with a specified table of color names and values. Most of the color words can be used basically.
A simple conversion relationship of the two representations above is shown below.
Turn RGB hex
function getHex (num) {
let val = num.toString(16)
val = (val.length === 1)? ('0' + val) : val
return val
}
function rgbaToHexa (red, green, blue, alpha) {
red = getHex(red)
green = getHex(green)
blue = getHex(blue)
alpha = Math.round(alpha * 255)
alpha = getHex(alpha)
return The '#' + red + green + blue + alpha
}
Copy the codeTurn the hex RGB
function hexaToRgba (color) {
const value = color.slice(color.indexOf(The '#') + 1)
const isShort = value.length === 3 || value.length === 4
const hasAlpha = value.length === 4 || value.length === 8
const r = isShort ? (value.charAt(0) + value.charAt(0)) : value.substring(0.2)
const g = isShort ? (value.charAt(1) + value.charAt(1)) : value.substring(2.4)
const b = isShort ? (value.charAt(2) + value.charAt(2)) : value.substring(4.6)
let a = hasAlpha ? (isShort ? (value.charAt(3) + value.charAt(3)) : value.substring(6.8)) : 'FF'
a = parseFloat((parseInt(a, 16) / 255).toFixed(2))
return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), a]
}
Copy the codeAn HSL model
In terms of color processing, the front end supports only HSL model besides RGB model, so we need to solve this model.
HSL color value, red:
hsl(0.100%, 50%)
hsla(0.100%, 50%, 1) // With transparency
Copy the codeHSL is a color model derived from processing H(Hue), S(saturation) and L(lightness).
-
Hue (H) : Hue, tone, represents the different colors that the human eye can see, is essentially a color. It is the same as the concept of H in HSV(B) model. In the definition of hue, a number of colors are distributed in a circle with values ranging from 0 to 360 degrees, and each Angle represents a color. In HSL and HSV models, the hue is based on six primary colors arranged in a circle at intervals of 60 degrees. These six main colors are: 360°/0° red, 60° yellow, 120° green, 180° green, 240° blue, 300° magenta. While in the front-end processing, the ring is often processed as a square color block, which is segmented by a linear gradient of color, and the Angle is converted into a certain proportion, as shown below:
linear-gradient(90deg.#f00.#ff0 17%.#0f0 33%.#0ff 50%.#00f 67%.#f0f 83%.#f00); Copy the code -
Saturation (S) : Saturation is the intensity or purity of a color, measured as a percentage from 0 to 100%. Represents the proportion of color components in the hue. The larger the value, the less gray in the color and the brighter the color, presenting a change from gray to hue color.
-
Brightness (L) : Indicates the degree of brightness of a color, measured as a percentage from 0 to 100%. Reflect the black and white mixed in the color, 50% only pure color, less than 50%, the smaller the value is mixed with more black, more close to black; When the value is greater than 50%, the greater the number, the more white is mixed in, and the closer it is to white. Maximum L must be white, minimum L must be black. Represents the transition from black to hue (H) selection color to white.
HSV model (B)
HSV color value, red:
// The front-end is not supported
hsv(0.100%, 100%)
hsva(0.100%, 100%, 1) // With transparency
Copy the codeHSV uses three parameters H(Hue), SATURATION S(saturation) and brightness V(Value) to represent colors. Both HSV and HSL models are more visually intuitive. The content of HSV is basically the same as that of HSB. It can be interpreted as two different versions.
-
Hue (H) : same as H hue in HSL model.
-
Saturation (S) : Saturation is the intensity or purity of a color, measured as a percentage from 0 to 100%. In HSV, the value of white is mixed into the color reflecting the hue. The larger the value, the less white the hue, the purer the color; the smaller the value, the more white the hue, the lighter the color.
-
Brightness (V) : indicates the degree of brightness and shade of a color, measured as a percentage from 0 to 100%. Reflects the value of black mixed into the color of hue, the smaller the value, the more black the color will be darker (black), the larger the value, the less black the color will be pure (bright). Represents the transition from black to hue (H) selection of color.
RGB and HSL conversion
Below is the code for converting commonly used RGB color values to and from HSL. Note: these two processes are not completely reversible because the rounding removes the decimal place, and there may be differences in individual units place. Although there is a slight difference, the page color display is basically the same, because the human eye can’t tell.
RGB turn an HSL
function rgbToHsl (red, green, blue) {
red = red / 255
green = green / 255
blue = blue / 255
let hue = saturation = lightness = 0
const max = Math.max(red, green, blue)
const min = Math.min(red, green, blue)
const diff = max - min
const sum = max + min
lightness = sum / 2
if (diff) {
saturation = lightness > 0.5 ? diff / (2 - sum) : diff / sum
switch (max) {
case red:
hue = (green - blue) / diff + (green < blue ? 6 : 0)
break
case green:
hue = (blue - red) / diff + 2
break
case blue:
hue = (red - green) / diff + 4
break
}
hue = hue / 6
}
hue = Math.round(hue * 360)
saturation = Math.round(saturation * 100)
lightness = Math.round(lightness * 100)
return [hue, saturation, lightness]
}
Copy the codeTurn an HSL RGB
function hslToRgb(hue, saturation, lightness) {
hue = hue / 360
saturation = saturation / 100
lightness = lightness / 100
let red, green, blue
const hue2rgb = (val1, val2, vH) = > {
vH = vH < 0 ? (vH + 1) : vH > 1 ? (vH - 1) : vH
if (vH < 1 / 6) {
return val1 + (val2 - val1) * 6 * vH
}
if (vH < 1 / 2) {
return val2
}
if (vH < 2 / 3) {
return val1 + (val2 - val1) * (2 / 3 - vH) * 6
}
return val1
}
if (saturation === 0) {
red = green = blue = lightness;
} else {
const val2 = lightness <= 0.5 ? lightness * (saturation + 1) : (lightness + saturation) - (lightness * saturation)
const val1 = lightness * 2 - val2
red = hue2rgb(val1, val2, hue + 1 / 3)
green = hue2rgb(val1, val2, hue)
blue = hue2rgb(val1, val2, hue - 1 / 3)
}
red = Math.round(red * 255)
green = Math.round(green * 255)
blue = Math.round(blue * 255)
return [red, green, blue]
}
Copy the code