![]() ![]() Not long ago, I basically did the same thing but rotated the hue to animate this stargate: See the Pen Random Reds by Chris Coyier ( on CodePen. You could randomize the H, S, and L tightly around some values: For example, say you want to generate some different red tones. I really like HSL when playing with color in JavaScript. See the Pen Sass Color Functions by Chris Coyier ( on CodePen. Or, you might get hot and heavy with Sass color functions or your own home brew thing. Those of you on the cutting edge might recall the working draft of Color Level 4 with the color() function and more intuitive sub-functions. Still, nothing nearly as intuitive as HSL. You might even be the clever sort who can identify color by Hex codes. You might have some mental chops with rgb(), knowing that rgb(255, 0, 0) is clearly red or rgb(0, 0, 0) is black, but manipulating those to get to a light purple or starting with a forest green and getting a little lighter isn’t exactly mental math. Change the lightness to essentially mix in black or white. Change the saturation to get deeper or more muted colors. Change the hue to take a trip around the color wheel. You can hand-manipulate any of those four values and have a decent sense of what is going to happen. Lightness: 0% is completely dark (black). ![]() Saturation: 0% is completely desaturated (grayscale).Values above and below will be modulus 360. 120 o is where greens are and 240 o are blues. We’ve talked about it before but we can break it down a little more and do some interesting things with it. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |