Forum Discussion
Swatch Library
A recent post by randykepple inspired me to share this. Randy's solution is also great so check that out!
With Swatch Library you can create a palette per brand or project, and every swatch is one click to copy, in hex or RGB. Nothing to install, no sign-up, and nothing stored on a server. Your colours save automatically in your own browser.
Type or paste a code, bulk-paste a whole list at once or, in Chrome/Edge, use the eyedropper to pick colours from anywhere on your screen, a client's website, a brand PDF, a Storyline slide. You can drop a logo or brand asset onto the tool and it will pull the dominant colours out and build a palette from them. Everything happens in the browser, nothing is uploaded anywhere. You untick any strays, name it, and it is done. I find this the quickest way to get a client palette in.
Beyond that there is a WCAG 2.2 contrast checker built in, set a foreground and background colour, get the ratio, and see pass/fail for AA and AAA body text, large text and non-text elements like icons and focus indicators. That is useful enough on its own, but the thing I am most pleased with is the contrast grid. Each palette has a Grid button that opens a matrix of every colour pair in that palette, painted with the actual pair so you can see at a glance which combinations work for text and which do not. One click on any cell opens the full checker for that pair. If you have ever wondered whether your brand colours are actually safe to use together, this answers it quickly.
There is also a colour vision preview. A Vision button on each palette shows it as it appears to people with protanopia, deuteranopia and tritanopia, plus a greyscale row for print. It automatically flags any pairs that become hard to tell apart, named with their perceptual distance score.
Each swatch has a tints and shades button that opens a nine-step ramp from light to dark, and you can click any step to copy it or add it to the palette. Useful for hover states and backgrounds.
You can drag swatches to reorder or move them between palettes, filter palettes once your library grows, and use Export/Import to back everything up or share a brand palette file with your team so everyone's working from the same set. There's a built-in guide for the full tour. It can be used directly in the linked Rise course, or used online via the link.
All free, no downloads, no signup, no nonsense!
9 Replies
This is genuinely useful, thanks for building and sharing it.
The palette-per-brand setup solves a problem I run into constantly. Managing five or six client brand colors across different projects usually means digging through old files or asking a client to resend their brand guide for the tenth time. Having it live in the browser and exportable is a much better system.
The contrast grid is the standout feature for me. Checking every color pair at once instead of testing combinations one at a time in a separate contrast checker saves a surprising amount of time on client projects where the brand colors weren't originally picked with accessibility in mind.
Also glad to see the color vision preview included by default rather than as an afterthought. That's the kind of check that's easy to skip when you're moving fast on a deadline, so having it built into the same tool you're already using removes the excuse to skip it.
This is going straight into my regular toolkit. Appreciate you putting this together and explaining the local storage tradeoffs so clearly in the replies too.
DShaw ...how does your app know it's you? As in, when I share this with a team member and they click the same link? And a quick question, is there a way to sort the color swatches by hue or is it a manual sort only? I spent some time this morning creating a couple of swatch boards and the included color picker eyedropper was a massive time saver. I totally geek out on big, little wins like this!
Good question, and worth detailing since it could catch people out. There’s no login or account, so the app doesn't know it's you at all. Everything saves locally in your own browser (localStorage, for the technically minded) and nothing touches a server. That means if a teammate clicks the same link, they land on their own separate, empty library in their browser, not yours. Same goes for you on a different device or in a different browser on the same machine; Chrome and Edge each keep their own copy for example.
The flip side of that privacy is worth highlighting; your palettes live in your browser's site data, so they're only as permanent as that. If you clear browsing data and include "cookies and site data" (or "site settings"), your library goes with it. Clearing history alone is fine, it's the site data option that matters. An Incognito/InPrivate window also starts empty and will delete everything when you close it.
So the golden rule, once you've built a board you care about, export it. This downloads a small JSON file that's your backup, your way of moving between machines, and your way of sharing with the team. They Import it on their end; Merge adds your palettes alongside theirs, Replace swaps theirs out entirely. There's an info button next to Export in the app that walks through it.
I’ve added a 'sort by hue' button for each palette… The eyedropper's often my go to tool also!
I'm so glad that I asked, because as you know, we are continually having to clear our browser cache when testing new courses in the LMS and I would have been very bummed out if I'd lost all my new color swatches! :)
I have an entire PDF with pastel color combinations that I like referencing to find color combinations that are engaging and still provide good contrast with text. I spent about 5 minutes yesterday adding about 90 of those pastel hexadecimal colors to my palette. Losing that would have been a bummer, for sure.
This is such a great resource and an even better production tool. My sincere appreciation for sharing this with the world.
DShaw... now that I've spent 5 minutes using your online app, I'm even more impressed. The "Tints & Shades" button is brilliant! I can tell you were an Adobe Kuler evangelist, like myself. This is deceptively simple and such a wonderful resource for those of us in the trenches of corporate eLearning design and development. Please don't take this away or I will have to find you and give you all my money.
Thanks for the kind words Randy… It really is a valuable tool in the box for any ID. I use it constantly, and so do my team, when working on client projects
DShaw: As I said when you posted this in reply to Randy, this is an elegant solution. You deserve super-hero status.
Thanks so much Judy.. I always thought I’d look good in a cape!
I'm in awe of people who have the talent and skill to create amazing resources like this and grateful to you for sharing your hard work here! This is surprisingly one of those quality of life upgrades you didn't know you needed until you have it! Thank You!!
