I'm sure you are already familiar with the RGB and HEX representation of colors as this is what most articles/tutorials use when writing colors in CSS, but these are not the best ways to write colors in CSS. HEX and RGB are hard to understand and it's not easy to make a color lighter/darker or convert a color from red to orange. This is where HSL comes in. HSL is an easier-to-read format that makes it simple to do things like change the brightness or hue of a color.
What is HSL?
HSL stands for hue, saturation and lightness. This is similar to how RGB represents color by combining its red, green, and blue values, but with HSL, these values are more intuitive.
Hue
The hue of the color is surrounded by A circle expressed in degrees. Think of a color wheel, with 0 degrees representing red, 180 degrees representing cyan, and 360 degrees representing the same red.
Saturation
Saturation from 0 to Expressed as a percentage between 100 and determines the grayness of a color. If a color is 100% saturated, there will be no gray at all, while a color with 0% saturation will be a shade of gray with no color.
Brightness
Brightness is also expressed as a percentage , and determine the color white or black. If a color is 50% brighter, then that means there is no extra white or black added to the color. As the percentage increases above 50%, it adds more white to the color until it reaches full white at 100% brightness. As the percentage drops below 50%, it adds more black to the color until it reaches full black at 0% brightness
How to use HSL?
Now that we understand what HSL is, we can talk about how to use it. It works the same as RGB, you can call the hsl function in CSS to define HSL color.
.class { /* Pure red #FF0000 */ background-color: hsl(0, 100%, 50%);}The first value passed to hsl is hue, which is a degree between 0 and 360, and the second value is saturation, which is 0% To a percentage value between 0% and 100%, the final value passed is the brightness, which is a percentage value between 0% and 100%. You can also use hsla to represent a partially transparent color. This function accepts a fourth argument, which is a value between 0 and 1, where 1 is fully opaque and 0 is fully transparent.
Why is this important?
Writing colors like this might seem a little strange, since you're most likely used to HEX or RGB, But once you get used to it, it makes writing CSS much more enjoyable. Here are a few reasons:
Change brightness/saturation easily
< span style="font-size: 0.882em;"> As I mentioned at the beginning of this article, you often need to change the brightness or saturation of a color in CSS to do things like introduce a hover state for a button. Using HEX can be a pain because no one knows what the 10% darker version#FA652F is What, but the 10% darker version hsl(16, 95%, 58%) is easy to calculate. All you need to do is reduce the brightness value by 10% hsl(16, 95%, 48%).
You can even take it a step further, usingcalc custom property in CSS does this automatically for you.
.btn { --background-hue: 200; background-color: hsl( var(--background-hue), 100%, calc(50% + var(--lightness-offset)) ) ;}.btn:hover { --lightness-offset: -10%;}.btn:focus { --lightness-offset: -20%;}.btn-danger { --background-hue: 0;}With this small amount of code, we set up a basic btn class that always uses The background becomes 10% darker on hover and 20% darker on focus. We also do this so that we can change the button tint for other types of buttons, we don't even need to modify the hover and focus states of these new button types since they are all done using custom properties and calc.
Get related colors easily
If you If you are familiar with any color theory, then you know that it is important to understand complementary colors, primary/secondary colors, analogous colors, etc. It's difficult to find these different types of colors using RGB or HEX, but it's easy to find things like complementary colors using HSL. This is because complementary colors are simply colors on the other side of the color wheel, which in the case of HSL means their hues are 180 degrees away from each other.
This is important because you can use this knowledge to create a color theme in CSS that uses math to calculate These complement colors and allow you to easily change the color theme of your entire site at once. Here's an example of a website I built that does just that.
Change color tone easily
Finally, HSL The last big win is the ease with which it can change the hue of the color. If you want your red to be a little more orange, you can do that by making your hue a little bigger, since orange is after red on the color wheel. This is really helpful because in the early stages of design and development, small color changes like this are very common, and being able to make them easily can save a lot of time.
Conclusion
HSL is a A different way of representing color in CSS that is not only easier to read, but also easier to modify and use in CSS. In my opinion, it is the best color format in CSS.
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/css-hai-you-zhe-zhong-yan-se-xie-fa-xue-dao-le.html
支付宝扫一扫 
评论列表（196条）
测试