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.