A color model is a mathematical model used to represent colors. RGB模型For example , the most common way is to use 红绿蓝 three colors to represent colors.
General color models can be classified as follows:
Color models for hardware devices: RGB, CMYK, YCrCb.
Color models for visual perception: HSL, HSV(B), HSI, Lab.
Different color models have different application scenarios, and the RGB model is suitable for devices such as monitors.
Among them, the front-end supports RGB,HSL , that is, only the color values of these two models can be effectively displayed on the front-end page.
And for HSVis a model we need to understand when creating a color picker plugin.
Currently, the color palette chrome implemented by browsers H5 is based on HSV the model:
Note: fixfore The browser still supports the computer system color palette (for example, under the win system, it is the same as the color palette for editing colors in the drawing software).
This article will mainly introduce RGB, HSL, HSV these three models.
RGB model
RGB, also known as 红(R)、绿(G)、蓝(B) the three primary color models, is the most widely used color model.
Especially in front-end development, almost all use this model to deal with color. Such as: rgb(0, 0, 255), #d3d3d3.
This model expresses different colors by changing the three color channels of red, green and blue and mixing and superimposing each other, using different intensities.
It is an additive color mixing model. In the process of superposition and mixing, the brightness is equal to the synthesis of color brightness. The more you mix, the higher the brightness.
According to the different values of the three colors, there are generally the following types:
- R5G5B5(A1): 16 bits, each color is represented by 5 bits, the value range
0-31(2^5 - 1), and the remaining 1 bit is used as the Alpha channel or not used. - R5G6B5: 16 bits, R and B occupy 5 bits, the value range
0-31(2^5); G occupies 6 bits, the value range0-63(2^6 - 1). - R8G8B8: 24 bits, each color is represented by 8 bits, and the value range is
0-255(2^8 - 1).
There can be at most2^24one color, and the color starting from 24 bits is true color, which basically reaches the limit of human eyes. - R8G8B8(A8): 32 bits, each color is represented by 8 bits, the value range is
0-255(2^8 - 1), and the remaining 8 bits are used as Alpha channel or not used.
Among them, the most common are of course the 24-bit and 32-bit types.
Each color in the three-color channel has 256 levels of brightness, the darkest when it is 0, and the brightest when it is 255.
If the values of the three colors are all the same, grayscale tones with different grayscale values will be produced, the darkest black when both are 0, and the brightest white when both are 255.
RGB color value
First look at RGB the display of the color value at the front end, such as red:
'rgb(255, 0, 0)'
'rgba(255, 0, 0, 1)' // 带透明度
'#ff0000'
'#f00' // 缩写
'red' // 颜色名称
Describe the RGB model, the color value used, rgb and there hex16 are two ways.
rgb(0,0,0)Representation, under normal circumstances, the value ranges of red, green and blue are respectively0-255, ifalphathe transparent channel is added, it isrgba(0,0,0,1).hexHexadecimal notation, using a way of displaying 24 bits in hexadecimal, for example#000000, a total of 6 bits, each of which corresponds to red, green, and blue, and can be abbreviated as#000.hexCan also be used#00000000, followed by the hexadecimal value of the transparency.
In addition, in front-end development, you can also use color names such as red, green, gray and so on to identify colors.
In fact, the color name here is still a corresponding RGB color value, and there is a specified relationship table between color names and values. Most of the color words can basically be used.
The simple conversion relationship between the above two representations is as follows.
rgb to 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 '#' + red + green + blue + alpha
}
hex to rgb
function hexaToRgba (color) {
const value = color.slice(color.indexOf('#') + 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]
}
HSL model
In terms of color processing, in addition to supporting RGB the model, the front-end supports only HSL the model, so we need to understand the model.
HSL Color value representation, red:
hsl(0, 100%, 50%)
hsla(0, 100%, 50%, 1) // 带透明度
HSL is a model for obtaining color by processing 色相H(hue), , 饱和度S(saturation)and .亮度L(lightness)
-
Hue (H):
Hue, hue, represents the different colors that the human eye can see, and is essentially a color. Same concept asHSV(B)in modelH.
In the definition of hue, many colors are distributed on a circle, and the value range is 0-360 degrees , and each angle represents a color.
In the HSL and HSV models, the hue is based on the six main colors, which are arranged on a circle at intervals of 60 degrees. The six main colors are: 360°/0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta.
When processing at the front end, the ring is often treated as a rectangular color block, and the segmental processing is performed through the linear gradient of the color, and the angle is converted into a certain ratio, as shown below:
linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); -
Saturation (S):
Saturation refers to the intensity or purity of a color,0 ~ 100%measured using a percentage.
Indicates the proportion of the color component in the hue, the larger the value, the less gray in the color and the brighter the color, showing a change from gray to hue color. -
Lightness (L):
Expresses the lightness and darkness of the color, measured0 ~ 100%in percentages.
Reflects the black and white mixed in the color. There is only pure color at 50%. When it is less than 50%, the smaller the value, the more black is mixed in, and the closer to black; when it is greater than 50%, the larger the value, the more white is mixed in, and the closer to black in white.
When L is the largest, it must be white, and when L is the smallest, it must be black.
Reflects the transition from black to hue (H) selection color to white.
HSV(B) model
HSV Color value representation, red:
// 前端不支持
hsv(0, 100%, 100%)
hsva(0, 100%, 100%, 1) // 带透明度
HSV uses 色相H(hue), 饱和度S(saturation), 明度V(Value)3 parameters to represent a way of color. HSV And HSL both models are more biased towards visually intuitive feeling. The content of and
is basically the same, which can be understood as two different ways of writing, among which B (brightness).HSVHSB
-
Hue (H):
Same as the hueHSLin the modelH. -
Saturation (S):
Saturation refers to the intensity or purity of a color,0 ~ 100%measured using a percentage.
More inHSVis the value of white mixed into the color that reflects the hue. The larger the value, the less white the hue and the purer the color, and the smaller the value, the more white the hue is and the lighter the hue. -
Visibility (V):
Expresses the lightness and darkness of the color, measured0 ~ 100%in percentages.
Reflects the value of black mixed into the color of the hue, the smaller the value, the more black the color is and the darker (black), the larger the value the less black the color is more pure (bright).
Reflects the transition from black to the hue (H) selected color.
Conversion from RGB to HSL
The following is the code for converting between commonly used rgb color values . Note: In these two processes, due to the removal of decimal places by rounding, they are not completely reversible, and there may be differences of individual digits. Although there are slight differences, there is basically no difference in the color display of the page, because the human eye cannot distinguish it.hsl
rgb to 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]
}
hsl to 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]
}