![]() ![]() See the Pen HSL by Dan Wilson ( on CodePen. Lots of great goodies in there to up your understanding of working with color. Wanna learn more about color on the web in general? Don’t miss Sarah Drasner’s A Nerd’s Guide to Color on the Web. See the Pen HSL by Graham Pyne ( on CodePen. There is also the HSL Color Picker and Mothereffering HSL if you want options. See the Pen HSL Explorer by Chris Coyier ( on CodePen. ![]() Need a quick color picker? I put this one together ages ago and I quickly ported it over to CodePen: Color Palette Magic Our resident engineer, Ken, is back to show you how to create nifty gradient ramps and a host of other fun things to do in the Hexels palette window. If you’re messing with color in JavaScript and want randomization to result in pleasing colors, give PleaseJS a spin. See the Pen Sparklegate by Chris Coyier ( on CodePen. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |