HSL() / HSLa() is great for programmatic color control

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We’ve talked about it before but we can break it down a little more and do some interesting things with it.

Hue: Think of a color wheel. Around 0o and 360o are reds. 120o is where greens are and 240o are blues. Use anything in between 0-360. Values above and below will be modulus 360.
Saturation: 0% is completely desaturated (grayscale). 100% is fully saturated (full color).
Lightness: 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.
alpha: Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent.

You can hand-manipulate any of those four values and have a decent sense of what is going to happen. Change the hue to take a trip around the color wheel. Change the saturation to get deeper or more muted colors. Change the lightness to essentially mix in black or white.
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. You might even be the clever sort who can identify color by Hex codes. Ask David DeSandro at a party sometime. Still, nothing nearly as intuitive as HSL.
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. Or, you might get hot and heavy with Sass color functions or your own home brew thing. More power to ya!
See the Pen Sass Color Functions by Chris Coyier (@chriscoyier) on CodePen.
I really like HSL when playing with color in JavaScript. For example, say you want to generate some different red tones. You could randomize the H, S, and L tightly around some values:
See the Pen Random Reds by Chris Coyier (@chriscoyier) on CodePen.
Not long ago, I basically did the same thing but rotated the hue to animate this stargate:
See the Pen Sparklegate by Chris Coyier (@chriscoyier) on CodePen.
If you’re messing with color in JavaScript and want randomization to result in pleasing colors, give PleaseJS a spin.
Need a quick color picker? I put this one together ages ago and I quickly ported it over to CodePen:
See the Pen HSL Explorer by Chris Coyier (@chriscoyier) on CodePen.
There is also the HSL Color Picker and Mothereffering HSL if you want options.
See the Pen HSL by Graham Pyne (@gpyne) on CodePen.
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. Lots of great goodies in there to up your understanding of working with color.
See the Pen HSL by Dan Wilson (@danwilson) on CodePen.
The post HSL() / HSLa() is great for programmatic color control appeared first on CSS-Tricks.
Source: CssTricks

Posted on June 1, 2018 in Austin Web Designer, css, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, javascript, The, web, Web Design Services

Share the Story

Back to Top