Now, let’s say that you want to make this background darker when hovering – to increase its contrast. This button has some text with white color and background in that color: rgb(30, 144, 255). This is a huge power to have the opportunity to deal with every property of color separately. ![]() Of course, it’s oversimplified, but what I wanted to present is the flexibility of working with HSL colors. You can basically use something like this. So maybe instead of this, you should try the solution below. What is the downside of that solution? Much more CSS code. How can you swap between light and dark themes then? Of course with Sass, or even pure CSS (toggling some ‘dark-theme’ class with JavaScript). How to use it for toggling between light and dark themes?ĭark themes are pretty hot recently – it’s one of the top functionalities in number of applications. It’s awesome! After watching this, you’ll understand the advantage of HSL over RGB or HEX. Why? Because now primary and secondary are complementary colors. CSS Variables with HSLĪs you can see on the example used below, it’s rather nice and easy to create a color palette.įor secondary color, I added 180 to hue. Also, it’s much easier than imagining RGB. You don’t have to spend many hours to learn how to read HEX code. Well, one of the biggest advantages of using HSL is its readability. □ Interested in other frontend development trends? Make sure to check out our massive State of Frontend 2020 report ! What’s so cool about HSL? 380° is the same as 20°, and -120° is the same as 240° 0% means the color is black because completely no light, 50% color is neutral, 100% color is white. Next is saturation, 0% stands for grey, 100% is maximum intensity.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |