Many times, the color of the webpage always looks weird, why? There are several ways to set colors in CSS. Web front-end developers often use the three primary colors of rgb to match, or directly use color values such as red/blue/yellow/gray. This has led to the development of the front-end page completely out of the UI design draft, the color difference is obvious, and it is not the color that users like.
In order to develop the colors that users like, it is strongly recommended that web front-ends also improve their own aesthetics, especially color aesthetics. Aesthetic education must start with dolls!
1. The basic color value can be expressed in words.
It is estimated that everyone’s English is not very good, so the three primary color values in RGB are often used, or add a yellow, gray, black, white, etc. It is conceivable how hot the eyes are combined together.
Therefore, it is not recommended to use words to represent color values, because the amount is small. Although there are more word color values that have not been posted, they are simply too small compared to the color range of massive hexadecimal values. And you have to be good at English.
2. Hex value
This is the most commonly used color representation, #RRGGBB, such as #FFF for white, #000 for black, #333 for dark gray, #eee for bright gray, etc. As long as the three values of RGB are the same, it is black, white and gray with different brightness levels. #F00 means red, #0F0 means green, #00F means blue. Then the combination of numbers and letters of 0-9 and AF can combine 16.58 million colors. Massive! !
3. rgb() value and rgba() value
Of course, it can also be expressed in a way like rgb(255,255,255), but I think what's the point of writing this way? Is hex bad? If it doesn't involve transparency, it's better to use the hexadecimal value honestly.
If the color has transparency, rgba() is the most commonly used value. rgb represents the three primary colors, and a represents alpha transparency.
rgba(255,0,0,.5) / represents red with 50% transparency /
The value of alpha is between 0-1, for example, 0.5 can be written as .5.
4. hsl() value and hsla() value
This color value is represented by three attributes: Hue, Saturation, and Lightness. Combined with the principle of the color wheel, the unit of hue is angle, and the unit of saturation and lightness is %. If you have used the color panel of ps, you will know that there is a HSB mode, which is the same as the HSL value here.
So, it can be written like this: hsl(336,91%,94%).
Of course, it can also be combined with alpha to express transparency. So hsla(336,91%,94%,.6) can represent rose red with 60% transparency.
5. The difference between rgba() and opacity
The color value of rgba() can be used anywhere that expresses color, such as text color, background color, border color, gradient color, etc. For example, if a translucent background color is set for a div, the text inside the div will not be affected. Opacity is the entire transparency of the object. If opacity transparency is set for a div, then the background, internal text, borders, etc. of the div will be affected together.
HTML：
<div id="box1">rgba(245,88,118,.5)</div>
<div id="box2">opacity:.5</div>
CSS：
body{
font:1em "microsoft Yahei";
color:#333;
}
div{
width:200px;
height:200px;
border:6px solid #333;
margin-right:1em;
padding:0.5em;
float:left;
background-color:rgb(245,88,118);
cursor:pointer;
font-size:1.25rem;
transition:0.3s;
}
#box1:hover{
background-color:rgba(245,88,118,.5)
}
#box2:hover{
opacity:.5;
}
Renderings:
6. How to quickly select a beautiful color
If you really can't choose a good-looking color by yourself, then using color matching tools or color matching websites reasonably is the best choice.