I'm in the middle of a massive overhaul of The Fiery Well's online presence, so of course I want to procrastinate play and do something distracting fun.
After doing some Feedback Fridays this month inside The Coworking Coven, I saw an opportunity to do something I've wanted to do for a very very very long time: fix color palettes for the web.
If you've gone to Pinterest for inspiration, made up a mood board in Canva, or had a brand designer give you a strip of 5-7 colors in a row like this and wondered how the hell to put them to use in your website... you are NOT alone.
A basic color palette - but what color do I use for what?!
The website platforms we use don't help us in making color decisions. At all. They say "put in 6 colors and we'll do the rest" but the rest... relies entirely on the proper selection of colors in the first place.
And if it's up to you to decide what color to use for what... that's a lot of choices you have to make.
In Podia, for example, they have you choose how your colors are used very broadly. And then those colors can be used for different styled "sections" such as a dark background or a background of your brand color. Simply putting your brand palette in results in some laughable combinations that also lack proper color contrast.
Know how each color is used, ahead of time!
This means you have to know how the platform is using the colors and consider how each color works with the next.
How does each color work in context?
Will that dark orange work on a dark grey? (hint: no.)
This takes a lot of guess work, saving and refreshing, tweaking and playing, and well, time.
So I thought, what would it look like if I just gave you the cheat sheet and you put the colors in per their intended use? Here's what Accent 1 is for, here is what Shade 4 is for, and so on.
This was a step in the right direction, but I went back to the member that had submitted the Feedback Friday and asked them if they would be open to being a beta tester for turning their brand colors into a plug and play palette they could use for their Podia site. While not something I would generally do in the community (due to the level of detail involved), I knew this would be something more people could use, so I could productize it.
And... I wanted to play.
So I played and came up with this (this is not their brand palette, but one I've made)
An example of plug and play palette (example – not final product)
I pulled all the color selectors from Podia and put the necessary color next to it so there is zero question of what color should be used for what. Choices for text, links, headings, cards, buttons all decided, clearly labeled, exampled and laid out so it's as simple as copy/paste. The result is clean, accessible, and consistent branding across the site.
How would it feel to know how your colors should be used on your website?
To go from this:
A selection of colors that feels almost random
To this:
How each color works, in context (example)
I'm having a ball putting these together and the response from my beta tester was "holy SHIT YES" and "omg i am OBSESSED with these" so I'm sure someone else here would feel the same way.
I'd love to do up a few pre-made palettes (let me know what color combos you'd like to see) and also work with folks to adjust their existing color palettes to be more consistent, and more than anything else: more accessible.
What do you think? Would this solve your color palette struggles?
Patty Ryan Lee
CEO | The Fiery Well, LLC Join me inside our Free Discord this September! The Coworking Coven re-launches this Fall!
P.S. This is what happens when I play. Can you imagine what happens when I work? I'm opening my waitlist for web design projects this October. Join the waitlist now.
This email was sent to "Reader" because you signed up for our newsletter, signed up for a free resource via email, or recently made a purchase from The Fiery Well, LLC.
Disclosure: We earn money by participating in affiliate programs. Many of the links in this email may earn affiliate commissions. This means we earn money when you purchase a product from our link, at no cost to you. However, all opinions shared are our own and we only share products and services that we love and use ourselves. When you see links in this email, please assume they are affiliate links.
