One of the first things I do with a new color palette is figure out how to actually use it.
Creating the palette is one step. Knowing which color goes where (and why) is a different problem entirely. So before I place anything, I drop the full palette into an accessibility matrix to see what combinations hold up. From there, I look at each swatch and start assigning roles.
Here’s how I worked through a recent example.
You can view the accessibility matrix for this palette here.
How I dissect a palette
The image above shows an actual color palette from a recent design I completed.
If you remember in a past issue, where I talked about my color palette formula, I normally have a Secondary set of hues.
But in this project, the brand didn’t really allow for a secondary hue that made sense.
As I was working through this design, here’s how I was interpreting the colors and how I wanted to use them:
- Primary: This swatch is a tricky one, because there’s not a lot of combos that work for accessibility. As a result, I look at this one and feel it would be used in a limited fashion — possibly for buttons (with the Dark text), or select backgrounds.
- Primary Light: This swatch has much more versatility, because I have more flexibility on the accessibility side. This hue I feel could be great for backgrounds and allow for overall better contrast than the Primary.
- Primary Extra Light: The extra light hues in my palettes are probably my most utility color — I look at this one and see it being a great use for backgrounds, light gradients, and possibly a light button.
- Primary Dark: This dark hue is a tricky one. Although it’s the same Primary with just adding black to it, it feels quite a bit different. So I look at this one and imagine only using it in select areas for small accents where it doesn’t over power our Primary hue.
- Dark: Like most (or all) designs, the Dark swatch is always for body copy, and sometimes headings or dark backgrounds.
- Gray: Although only a slight variation from the Dark hue, this was specific to the brand. I imagine using this one in particular for dark buttons (with white text), and headings.
- Extra Light: With this overall palette in particular, this extra light gray hue could cause conflict with the Primary Extra Light. Used side-by-side, they clash — so realistically, I don’t see using this hue all that much unless I need a variation on a dark background or hover state.
- White: White is a utility color used in many ways, so I see using this for backgrounds, text color on dark backgrounds, and accent elements.
Design to Dollars takeaway
Before you place a single color, give every swatch a job. Run your palette through an accessibility matrix first, then look at each color and ask — where does this belong, and where does it not? That thinking up front saves a lot of backtracking later.
