Early this year, CSS-Tricks linked to a page on Refactoring UI about building a color palette. They discuss problems with some common color palette selection options and ways you can get stuck with (or introduce technical debt fixing) problems from not having enough colors with enough distinct shades. They say “it’s not uncommon to need as many as ten different colors with 5-10 shades each for a complex UI.” That is, a scale of neutrals (white to very dark gray with other grays in between), a scale of your primary color, and a scale of each of several accent colors – at least one accent color is a must, but you may need more to give user feedback such as warnings versus errors, success messages, or information.

I got to thinking about the color scheme of this website, and another site I built recently which I had trouble picking colors for. What if you’d like your “neutral” scale not to be grays? The text on this site is brown; or technically, it’s a very dark red, #300. If I lighten it in 20% increments with the fantastic Hex Color Tool, I get the following:

This is not leading to a usable “neutral” scale; a pale pink is simply not interchangeable with a light gray.

However, what if you simultaneously lightened and desaturated your initial color? Would that work? My first attempt converted the color to HSL, divided the distance between the saturation and 0 and between the lightness and 1 into equal pieces, and stepped them both simultaneously. To my surprise, while the lightest colors are certainly more usable as a neutral scale than the RGB lightening, the intermediate ones are significantly more saturated.

For a second try, I exponentially decayed the saturation, using the points (0, initial_saturation) and (final_shade_step, 0.05) to define the equation. That 0.05 was done by feel — I started with 0.001 and my brown grayed out way too fast; 0.01 was still too fast, but 0.1 seemed too slow. I went back and forth between 0.075 and 0.05 but ultimately the latter seemed better for a wider variety of starting colors.

It’s still not quite as desaturated as the plain hex lightening in the intermediate colors, but it’s more comparable and still a big improvement in the lightest colors.

When I tested my code, I found it worked great for fairly saturated starting colors. For less-saturated starts, though, the colors weren’t great OR my equation fell apart entirely and spat back junk. I could fix the latter with some min/max checks, but that was suboptimal – keeping the same saturation level throughout the scale. Instead, for starting colors where the saturation is under 55%, the saturation value at the final shade step is computed as 0.01 of the starting saturation value. That works much better. For example, taking a 50% saturated dark blue-green…

Min-max checks in place, but using same equation as above:

With the adjusted equation:

I added a similar cutoff point at 35% saturation, dropping the constant down to 0.001, although at that point the linear equation works quite well.

After all that, do you want to play?

“Colorful Neutral” Color Scale Generator

If you would like to peek or fool around with it, the code for this can be found in my GitHub colorful-neutral-scale repository.

Fade to black and white image by Alexas_Fotos on Pixabay.

The post Non-Gray Grayscales appeared first on rweber.net.

I got back to this sooner than I thought – and good thing, too, since I found a bug dating clear back to my color layer flattener (not accounting for leading zeroes when converting to a hex string is a lot more noticeable once you are doing something with said hex string besides displaying it). You can read about the idea behind this in the previous color scheme picker post.

You can now select up to five colors from the grid of fifteen and have those colors show as the highlight on the corresponding hex code and in boxes below against black and white backgrounds. You can actually select more than five but only the first five (left to right, top to bottom in the grid) will show up below. Have fun!

Up-to-date code is available in the GitHub repo. Thanks again to Brian Grinstead and David Merfield for the color utilities they’ve written and made freely available.

The post Return of the Color Scheme Picker appeared first on rweber.net.

After my JS Color Layer Flattener and research for Web Design for the Non-Designer, I decided to implement the color scheme selection process outlined in WebdesignerDepot’s article How to Get a Professional Look With Color: choose up to five colors; increase to fifteen by adding the result of overlaying each color with translucent black or white; unify the fifteen by overlaying all with a common translucent color. Instead of manual input like the layer flattener, I went with Brian Grinstead’s color picker Spectrum, except for the black and white layers. The colors populate on load via David Merfield’s Random Color script, something I pinned a while ago but never used. I do use the blending part of my color layer flattener to compute hex values for the fifteen resulting colors.

Try it out!

To use it yourself there are two pieces you need: jscsp-form.html and either jscsp-complete.js or jscsp-no-jquery.js. The form includes Spectrum’s CSS and both the scripts include both Spectrum and Random Color; jscsp-complete.js includes jQuery, as you might guess, so use jscsp-no-jquery.js if your site already loads jQuery. At the moment the GitHub repo for this is slightly behind CSS-wise but not functionality-wise.

To use: place a div with id="csp-container" in your page. If the file jscsp-form.html is not at the root of your webpage, assign the container div a data-path attribute with the URL between the domain and jscsp-form.html. For example, for example.com/gadgets/color/jscsp-form.html you would use data-path="gadgets/color". Including or excluding slashes on each end is okay. Call jscsp-complete.js or jscsp-no-jquery.js sometime after the container div.

My intention is to come back to this and add a means to select, say, five of the fifteen resultant colors and have them appear by themselves underneath the current contents, perhaps against both black and white backgrounds.

The post A color scheme picker, take 1 appeared first on rweber.net.

A while ago I was trying to find an appropriate opaque fallback color for a translucent background color. Although after some thought I understand what the method is to calculate such a thing, at the time I just did a search and came across an article by Lance Gutin relating transparency and color for grayscale. I thought I might expand it to full-color, and after little time on the Mozilla Development Network and a lot in Stack Overflow and Brackets, I have a little utility for you. You can use it here or grab it on GitHub.

Since the arithmetic turned out to be straightforward and my need for this sort of calculation is infrequent, this project turned more into a way to practice non-DOM-manipulation and plain-vanilla JavaScript. My goal was for any valid color specification syntax to be acceptable, and maybe for it to be even more forgiving than that. I found the MDN pages on the color CSS data type and regular expressions in JavaScript most helpful.

Mathity Math

The simplest calculation is on an opaque background, where you take a weighted average of the color values. If the alpha of your overlay color is set to 0.8, to find the red value of the color you see (the composite color), you’ll calculate 0.8*(red value of overlay) + (1 - 0.8)*(red value of background). Do that for all three color channels and you have the code for the composite color. You can make this calculation for some opacities via the Color Blender from Eric Meyer (opacity must be a fraction with denominator less than or equal to 11).

When you add translucency as an option for the background the arithmetic increases in length but not really in complexity: the spec for simple alpha blending or compositing (which applies to both SVG and CSS) simply takes a doubly-weighted average, though it does not take the color underneath the background into account.

Here’s the fully written out calculation, for the red channel:
(composite alpha)*(composite red) = (1 - overlay alpha)*(background alpha)*(background red) + (overlay alpha)*(overlay red)
The composite color’s alpha value will be 1 - (1 - overlay alpha)*(1 - background alpha). If either background or overlay is opaque, the composite will be opaque. If the background is opaque the equation simplifies to the one we had previously; if the overlay is opaque it simplifies to composite red = overlay red.

A translucent background on an opaque bottom layer (the tallest stack I was interested in manipulating) can be dealt with in two steps: average the background and the bottom layer and then average that with the overlay.

Turns out that calculation is the simplest of the bunch, though, and extracting the color information from the assorted kinds of input permitted is much more complicated. I’ll leave that story to the code itself, though.

Rainbow Cake (both cake and photo) by Dabbisch on Deviantart [CC BY-NC-ND 3.0].

The post Flattening Color Layers with JavaScript appeared first on rweber.net.