CSS for beginners 17: HSL value colors

Hi there and welcome! 😊 In this video, we will talk about HSL value colors in CSS.

HSL colors are colors that we define with hue, saturation and lightness. Syntax for HSL value color looks like this:
➡️ hsl(120, 100%, 50%)

First value represents color from hue wheel of colors. On hue wheel of colors 0 represents red color, 120 represents green color, and 240 represents blue color. All other colors are in between these values.

Second value represents saturation. Saturation represents how much we want to include our source color (color that we choose with first value) in our final color.
So for example, if we choose like first value 120 (green color) and set 0% like a saturation value, our final color will not be green it will be grey color. Reason for this is that with 0% we set that we don't want to include our source color (green) in our final mix at all. In other hand, if we set saturation 100% for same color our final color will be exact green color that we choose with first hue value.

Third value represents lightness. The easiest way to understand lightness is if we set 0% that means that color that we choose with first hue value is not exposed to light source which means that you can not see what is the color and your final color will be black. In other hand, if we set 100% for lightness this means that our source color is completely exposed to light source and our final color will be white. Why? Because if source light is very bright every color seems white.
So if we want to get exact color that we choose like source color with hue value we should set 50% for lightness. Of course, if we want to get some darker or brighter color we can set any value in between 0% and 100%.

💻 If you want to learn how to build websites from the scratch check out our course that is currently on amazing discount :
👉https://www.udemy.com/course/draft/3449352/?referralCode=CAF8EB035733439CDF8D

NOTE: Buying of our course you support our channel and we are immensely grateful to you for that! ❤️🙏

📺 For the most recent updates please subscribe on our YouTube channel:
https://www.youtube.com/channel/UCKJZPftMDi_GcpxT2bmWXUg?sub_confirmation=1

🔔 Hit the notification bell to be notified when videos go live.

👤 You can reach us on social media:
https://www.instagram.com/mastermindstutorials/?hl=sr
https://twitter.com/MasterMindstut1

🤝If you want to support our work:
https://www.paypal.com/paypalme/MasterMindsTutorials?locale.x=en_US
https://www.patreon.com/mastermindstutorials
Please remember that even little from you means a lot for us. ❤️🙏

❓ Do you have any questions? Feel free to ask us directly on email:
📧 [email protected]

➡️ Please press 👍 button if you like this content and share this video to all that could be interested in this! 🙏

––––––––––––––––––––––––––––––
Music: Spring In My Step - Silent Partner https://youtu.be/siCmqvfw_1g
––––––––––––––––––––––––––––––
#CSSBeginners #CSSLearnItFromScratch #HSL

Тэги:

#CSS_for_beginners #CSS_step_by_step #how_to_set_HSL_Colors #how_to_control_HSL_colors_in_HTML #how_to_use_HSL_colors_in_CSS

Скачать видео