Dynamic HSL Gradients

What is HSL color?

HSL is a pattern for generating colors based on Hue, Saturation, and Lightness. This is a somewhat rare pattern, and it usually takes a back seat to Hex color codes (#000000 to #FFFFFF) in front-end design, or RGB(A) values that blend color with opacity. Rendering colors programmatically with HSL is useful for specifying where on the color spectrum it should fall, while letting the computer handle the rest.

What are HEX and RGB(A)?

HEX and RGB(A) are basically the same thing except for the (A) part, which affects the color’s opacity. Red, Green, and Blue (plus Alpha for transparency) combine in values up to 255 for the colors and up to 1 for opacity, making basically any color imaginable. HEX is a quick shorthand for RGB: it combines a pair of hex digits for each color (as in, #FF equates to 255 in hex math), so pure white #FFFFFF is the same as rgba(255, 255, 255, 1.0). So HEX is a bit more efficient to write out- especially considering you can further abbreviate colors pairs in HEX if each pair is the same- #AABBCC in other words can translate to #ABC.

Knowing off-hand what some of these values adds up to can be useful for coding CSS on the fly because there is ample tooling to pick up color values with an eyedropper and paste them around. When it comes to letting an algorithm do the work though, HEX and RGB(A) are less than intuitive for expressing the emotional value of a color.

Why use HSL instead?

Designers tend to memorize a few set HEX or RGB(A) codes, and otherwise use color-pickers to manually select different shades fitting a brand palette or other specification. Services like Paletton can help in terms of providing color suggestions, but ultimately a person has judge and set values for use in the wild.

What if we took more of a centaur-style approach? Human head/horse body: give the computer a general idea how values match up to colors (as a proxy for sentiment), and let the machine handle the details.

Using HSL, a designer can assign intuitive value judgments to data analysis on 3 dimensions. Maybe it starts with green/red- a positive or negative value judgment. But HOW positive? HOW negative? Is it dull or throbbing (Saturation)? Well-supported or speculative (could be lightness)?

Now, magnify that by the rest of the rainbow. Then, consider the fact you can shift to multiple colors within a gradient. Finally, how about making predominant data occupy a greater portion of your gradient?

Once you establish a basic visual language in terms of how you’re applying color values, a user can interpolate a thousand words with a glance at a color bar. Think of this as a decision engine for whether a data point is worth further exploration: does this spectrum appeal to my needs? What about then sorting data by color? The possibilities are endless.

HSL values and emotional impact

Color values can express a range of emotions- “this product is HOT”/”our company is COOL”- and designers spend a lot of time picking them out manually, by feel. Computers don’t struggle to understand how much red, green, and blue go into making yellow but designers do. Designers don’t struggle with understanding emotions- at least not as much as computers do- and our intuition allows us to judge the meaning behind numbers we crunch.

A quick description of how HSL values work:

Hue– A number from 0 - 360, indicating its place on a color wheel. This is the general vibe of your color- a cool blue at hsl(200, ...), a warm magenta at hsl(310, ...), so on.

Saturation– A number from 0 - 1, which affects how vibrant your color will be. S values closer to 0 will come out more grey.

Lightness– A number from 0 - 1, ranging from black at 0 to white at 1.

Top value (in parens) is HSL: the first parameter is a color value- 99 for green, 0 for red- and only the saturation and lightness change. The bottom values are the HEX codes. It’s less than intuitive to find patterns for predicting the end result.

Using HSL values in a gradient

After mapping out how your data relates to relative values in HSL, you can drop them into a CSS gradient the same as if they were HEX or RGB(A) colors:

linear-gradient(to right, hsl(348, 34%, 58%) 0%, hsl(348, 14%, 34%) 100%})

Note the 0% and the 100% after the HSL color declaration: these percentages refer to the point on the gradient at which your color will show its declared value. If you’re combining two computed colors and weighing one more heavily in your gradient than the other, you’ll have to account for where they’ll peak rather than what percentage of the gradient you’ll want them to occupy.

Brute-force gradient setting in React (example)

Here’s a very simple example of setting these values to appear on the fly- brute force in the sense of applying them as inline CSS. Programmatically setting HSL as part of your component’s state allows for dynamic gradient updating as part of your app, with the fewest moving parts in terms of stylesheets.

<div style={{background: `linear-gradient(to right, ${this.state.hsl})`}} /> 

Consider storing gradient values alongside your data on the back-end in order to save processing time when rendering your data.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Mark Bello

Mark Bello