Ready Monetized Wordpress Website


Saturday, June 8, 2019

Move over RGB. HSL is in town!

Move over RGB. HSL is in town!

When it comes to colors, you are probably very familiar with defining them in the RGB format with its # character and weird arrangement of numbers and letters between A and F. The problem with RGB is that it only makes sense if you are a computer. You can't easily tell what a color is by just looking at its RGB representation. What does #B3EFB2 stand for? What about #F71735? What we need is a different, more human-friendly way of specifying colors.

That different and human-friendly way is HSL (or its related cousin, HSV). The way the HSL color format works is by breaking a color up into its Hue, Saturation, and Lightness parts. Let's look at what these parts mean.

Hue represents the actual color you want, and you specify the color by picking the degree value it falls under in the infamous color wheel:

Saturation determines how intense your color is, and you specify that intensity between 0% (no intensity) to 100% (full intensity).

The last value you specify is Lightness, and it too is specified as a percentage. 0% is total black, and 100% is full white.

You can combine all of three of these values to generate the color you want. Going an extra step further, you can then specify this color in your CSS (or JavaScript). To make that happen, you can use the hsl function and specify it as the value for any color property:

.rectangle { width: 200px; height: 100px; border: 10px solid #333; margin: 100px; margin-left: 20px; background-color: hsl(54, 100%, 62%); } 

The hsl (and related hsla where alpha/transparency is also supported) functions have near universal browser support, so you can use them today.

submitted by /u/Rocketclown
[link] [comments]

from web_design

No comments:
Write Your Comments

Ready Monetized Blogger Gaming Website