Did you know that you can use CSS HSL, or Hue, Saturation and Light, can be used anywhere you would normally use a color HEX number or RGB value? This insightful and incredibly helpful CSS tutorial will show you how to do it!
This is a rather intuitive approach to color styling once you get the hang is how it all works. And it is also a good tool to have in your coding arsenal when you need to quickly match a color through CSS, but do not have a way to easily generate the same HEX code or RGB value. By the end of this video, you should be able to apply this to any of your projects moving forward. And it’s supported in every browser, except IE versions 6-8.
hue |(h)yoō|
noun
a color or shade : her face lost its golden hue | verdigris is greenish-yellow in hue.
• the attribute of a color by virtue of which it is discernible as red, green, etc., and which is dependent on its dominant wavelength, and independent of intensity or lightness.
saturation |ˌsa ch əˈrā sh ən|
noun
the state or process that occurs when no more of something can be absorbed, combined with, or added.
• Chemistry the degree or extent to which something is dissolved or absorbed compared with the maximum possible, usually expressed as a percentage.
• [as adj. ] to a very full extent, esp. beyond the point regarded as necessary or desirable : saturation bombing.
• (also color saturation) (esp. in photography) the intensity of a color, expressed as the degree to which it differs from white.
light 1 |līt|
noun
1 the natural agent that stimulates sight and makes things visible : the light of the sun | [in sing. ] the street lamps shed a faint light into the room.
• a source of illumination, esp. an electric lamp : a light came on in his room.
• the amount or quality of light in a place : the plant requires good light | in some lights she could look beautiful.
The video does a great job of explaining the values used in this CSS3 feature and offers plenty of nice examples, so we can focus on the components of HSL CSS color styling. Looking at the definitions above gives you everything you need to know to understand how the mechanics involved work.
One other thing mentioned above is very important. Internet Explorer versions 6-8 do not support the use of HSL or HSLa color styling. You will need to convert your code for it to be rendered properly in these versions. Here is a great online tool to automatically do that for you!
If you have found this lesson in CSS3 color styling with the use of HSL colors, you will probably also enjoy this recent post on advanced text formatting through CSS. Thanks for stopping by!
Pingback: Using CSS Pseudo-Classes to Style Your Links