Huey
a color palette generator used for whitelabel solutions
Background
The Turntide BMS was designed to fit with any client's branding, so whitelabeling was a key feature. Unfortunately, generating an entire range of colors and their associated tints & shades takes quite a bit of time. Huey was a tool I developed as a shared resource for teams to quickly generate color palettes that met both brand guidelines and WCAG compliance standards.
- A random color re-paints Huey each time it loads
- Huey exports instantly to PostCSS, SCSS, and Tailwind
- Set brand colors easily
- Customize palettes across all dimensions
- Color scales can be calculated with different color modes
- Check for color blindness with the simulator
- Copy the hex for a hue with a click
- Copy an individual color's hex by clicking its cell
- Each hue has its own WCAG contrast chart
Process
Huey was a great excuse for me to dive into VueJS, a framework with which I'd only loosely been acquainted. It allowed me to compare it against React and Angular, and I found that its simplicity and straightforward syntax made it an ideal candidate for a project like Huey. In learning about Vue, I also managed to wrap my head around some of the concepts that had eluded my understanding in the other frameworks.
The contrast chart shows useful information for every color pair in the hue family.
Huey can export to PostCSS, SCSS, and Tailwind in an instant.
Takeaway
This is one of my favorite side projects, as it allowed me to close a door I'd left open for several years while simultaneously learning a new framework. When I first started coding back in 2013, I created my first dynamic color scale using Sass mixins and functions. I was enthralled with the solution, but I knew my solution was incomplete: it only worked in one hue at a time, and I couldn't account for scaling methods, contrast ratios, or additional hues. Huey allowed me to explore all of those areas and build a one-stop solution for all of them.