Welcome to the 50th (!) edition of the Design to Dollars newsletter — what a journey it’s been! Grateful to have you on board.
If you’ve been a long-time follower, you know that I preach about consistency.
It’s the single biggest pitfall that anyone can make, and the first step in ensuring consistency is declaring your brand color palette.
So today, I’d like to break down my starting color palette I use for every new website design project.
There’s a few aspects that go into creating a solid palette, considering your brand, accessibility, and overall aesthetic.
Let’s dive in!
My color naming structure
I break down my color palette into 3 areas: Primary, Secondary, and Neutrals.
This palette gives me enough flexibility in design to allow for a number of color combinations for use in buttons, backgrounds, and more.
Note: don’t get Primary and Secondary confused with the colors we traditionally refer to as those on a color wheel — instead, this naming is more a “First” and “Second” approach.
Primary Colors
With my first selection of colors, I choose a single hue that I designate as the “Primary”. This is drawn from the existing brand — whether that’s the style guide or logo itself.
I then take that Primary color, and insert the HEX code into a Tint & Shade Generator to make up 3 alternate swatches: a Dark, a Light, and an Extra Light.
You’ll want to make sure that the alternate swatches vary enough so it gives you proper variations to work with for contrast.
The Primary color swatches are often used for headings and buttons.
Secondary Colors
Next up, I choose a Secondary hue that’s different from my Primary. Again, this is chosen from the brand guide or grabbed from the logo — if neither exist, then I do some creative research to identify the best complimenting color hue to help support the design, brand, and audience.
Once again, I take that Secondary color, and insert the HEX code into the same Tint & Shade Generator to make up another 3 alternate swatches: a Dark, a Light, and an Extra Light.
The Secondary palette is often used for headings, alternate buttons, and backgrounds.
Neutral Colors
Last up in the color palette are the Neutrals — and these remain the exact same on every single website design.
It provides the basic neutral colors for me to use that work on any design — a White, Extra Light, Light, and Dark hue.
These are mostly used for backgrounds, body copy, and button text.
Checking for Accessibility
Now, once I establish the palette, I always check to see what color combinations I can use that are accessible.
For example, can I use White text on a Primary background? Or should it be the Primary Dark?
A great way to visualize this is to input your colors into this Accessible Color Matrix. It tells you what passes accessibility standards, and what doesn’t.
It limits you to only 6 swatches, so I usually have to only include the most important colors I want to check for that aren’t so obvious.
And there you have it — my go-to approach for building a solid, flexible, and accessible color palette for every website design. Having this structure in place not only ensures consistency but also makes design decisions faster and more intentional.
If you’ve got questions about color palettes, accessibility, or anything design-related, just hit reply—I’d love to chat!
Until next time,
