A process for building out color palettes
A somewhat complex alternative to using a palette generator
Being completely honest, I find playing with colors fun. It reminds me of mixing paint. I’m also an epic nerd that is more than a little obsessed with color theory… but for those of you that aren’t into either of those things, I also have a few practical reasons for spending time building out palettes.
The first being, while working within the bounds of pre-existing style guides with defined color palettes, I’ve run into plenty of occasions where colors were not originally selected with user interface design in mind. For example, colors may all be too bold or don’t work well with accessibility restrictions.
The second, is a bit more difficult to describe. While I generally tend to adhere to the idea that less is more when it comes to color on interfaces, I have run into a number of occasions where I need to differentiate one area of an interface from another and existing brand colors just aren’t working... too much contrast is causing the feature to stick out like a sore thumb or a particular feature isn’t standing out enough. This particularly happens when I’m using neutral colors and the quick “just put a layer of white over it and drop the opacity solution” started to become problematic as I started generating lots and lots of different colors without any real awareness for doing so (Read: stylesheet bloat issues).
A few years ago I found this article on creating color palettes using adjustment layers. Since then, I’ve worked to develop a process, based off of same adjustment layer idea, that gives me lots of options based off of a limited set of base colors. From those options, I consciously narrow or broaden out a palette that is typically weighted more heavily toward a broad set of neutrals to complement a set of brand colors and a separate set of semantic colors reserved for specific interactions. Here’s what that process looks like…
Building a base
When building a palette from scratch, I typically start by defining my base colors in Adobe Kuler, though really any color palette generator will work. I tend to use Kuler since I regularly use there “Create from Image” feature. Kuler also allows me to easily save the palettes I create into my Adobe Libraries for access in Photoshop.
A couple general aims for the base color palette:
- have a good variation in value: at least one very dark value, and one very light value.
- limit the number of different hues to 2–3
I’ll also usually build out a separate neutral palette base. My current go to way to do this is to edit a copy of my color palette in Kuler, pick one of the colors from there (usually my darkest value), switch it to a shades scheme and drop the saturation (using HSB) around <20 range and then slide the brightness setting until I get a somewhat evenly split scale.
Color adjustments
For the sake of efficiency I’ve built myself a palette generator psd based off of the adjustment layer concept in the Bjango article mentioned above. If you’d like a place to start, wanna follow along, or just feel like perusing my file, it is available for download here.
In it you’ll find my most frequently used adjustment layers for creating a palette:
- Tints and Shades: Adding white/black using a hue & saturation adjustment layer.
- Light and Dark Overlays: A loose equivalent of tones. These are solid color layers, set to an overlay blending mode with varying opacity. If I make adjustments to my generator file for a given palette, they are usually made on these four layers. Either by modifying the layer opacity or by changing the color of the layer—usually to the darkest and lightest shade of my neutral palette.
- Brighten: This is a Level adjustment layer that produces more saturated, brighter tones.
There’s also got a set of base color shapes that can be easily modified by selecting a layer, and then selecting a color from the Library palettes.
I’ve now got a nice set of variations to pick from for a broader, hopefully more useful palette. At this point I set up a separate list of square swatches for final color selections. Using the eyedropper tool I sample from the variation set to fill the new final swatch shapes.
If I’m starting from scratch, I’ll usually pick a set of final primary interface colors from the options. A few things I keep in mind when choosing final colors for a new palette:
- Limit bright colors selections to 3–4.
- Weight more heavily on neutrals, particularly lighter neutrals.
If I’m looking for ways to expand upon an existing palette, I’ll copy all original base colors and usually look for complementary rows. Eg. adding all tints for certain base colors, or a row of tones for neutrals. I did this while at DocuSign and ended up with these colors as additions to the core brand color palette: https://dribbble.com/shots/2007423-DocuSign-Styleguide-Colors.
In either case, it’s important to try and keep accessibility in mind. If you place selected colors together, are they going pass accessibility requirements? If they aren’t do you have other combinations in the palette that will pass? I’ll usually do a quick check on selections by going to View > Proof Setup and selecting the Color Blindness proofs... move swatches around, overlap them. I’m essentially looking for contrast between color selections, though this is really just a quick proof of concept sort of test and shouldn’t be a replacement for doing further accessibility checks on your mockups later on down the road.
Semantic colors
Now that I’ve got a set of final selections, I’ll usually put some thought into semantic colors. In the case of this particular palette, it looks like I’ve already got some decent options for links as well as primary and secondary calls to action, but may need something else for positive and error interactions and notifications.
Admittedly, depending on the palette, things get a little less formulaic here. But typically I‘ll stick with green = go, red = stop. In the case of the example palette, it my be a little less obvious how to generate a related color, but digging into some color theory, I’d probably choose to derive my red from one of the purple hues (red + blue = purple) and derive my green by mixing one of my final blue selections with a random yellow. I would then run those through my usual gamut of adjustment layers to give me a few more options that might match my final palette a bit better.
It does look like there will be some accessibility problems with the semantic colors (they are green and red after all), but I don’t recommend solely relying on color for semantic indicatiors… another article for another time perhaps.
Add your swatches to a Library
The easiest way to do this: Once you’ve set up your final swatch list, save a copy of the file, delete the mixer layers, and then hit the “Library from Document” button in the Libraries panel.
A few troubleshooting notes:
- Libraries doesn’t recognize colors generated by adjustment layer. This means it’s important that your final swatch list is created by filling the swatch shapes with the final colors. Aka. Don’t skip the eyedropper bit.
- If you do not delete the mixer layers you may end up with stray colors from the mixing process.
Yeah that’s all great, but how do I get this into Sketch?
For those of you wondering about Sketch… I just haven’t found a great way to build out color variations in Sketch. But I readily admit an Adobe Library of color palettes isn’t so helpful if I’m spending time most of my time building out flows and UIs in Sketch.
Below is the (somewhat) pain free process that I use to move my swatches over into Document Colors (or Global Colors if you prefer). But if anyone has run into a better way to do this, please share.
Start by installing the Palettes plugin. Throw a shape onto your Sketch artboard so you’ve got something to “fill”. Carefully arrange your windows (or use a window manager app)…
And start adding each color to your Document Colors list via the eyedropper tool. 😭
Once that’s done, go to Plugins > Sketch Palettes > Document Colors > Save Palette. Name it, save it, and you’re free to load it into your Sketch files (via the same plugin) at your leisure.
