Product Design
color alchemy
There are many amazing tools available online for designers. However, as a designer having to deal with brand consistency and accessibility needs, formulating exact hex-values for new colors and color palettes can be time consuming and hit-or-miss.
This patented calculator-style color finding tool allows the user to calculate new colors in accordance with brand palettes and WC3 best practices, with a novel approach to navigating RGB and HSL color spaces at the same time.
project overview
After struggling over how to best construct a system of colors for a global design system for my company, I decided I needed a better tool for finding colors that met brand specifications, upheld AAA WC3 standards, and quickly calculated new colors for existing palettes.
The Objective
Create a calculator that gave designers a way of finding solutions to niche complex color problems without having base their decisions on eyeballing.
My Contributions
As the principle contributor to my company’s global design guidelines, and a UX strategist, I outlined the problem, researched human perceptual physiology, WC3 web standards for accessibility, and the underlying algorithms necessary to do the calculations. I then designed and wrote the code to make it happen.
Defining a Hybrid Color Space
To tackle complex challenges like determining the ideal red and green hues alongside a brand blue or achieving a 7:1 contrast ratio with a specific color background, I created algorithms that combined equations from existing literature, merging RGB and HLS color spaces. This was the key to writing a calculator that could answer some key problem categories.
Features
- Independent adjustments to relative luminance and perceived saturation
- RBG adjustments for precise contrast-ratio setting
- Automatic maximization of saturation and/or relative luminance
- Perceived saturation gradient calculation
- Relative color adjustments
- Color palette expansions
- And more!
Writing & Testing Algorithms
Concepts for the equations used in this calculator were tested in Excel and later written in Javascript and integrated directly into the HTML. Outputs were tested against existing tools to make sure results would yield W3C appropriate answers. I also created a companion minimum font-size calculator, adhering to HE75 and related research, was concurrently developed as part of an advanced set of tools for designers (not shown here).
Designing the Interface
The UI on this one was tricky. What you see here is a concept I’ve been working on to simplify the interactions for this particular function.
This can be a complex color-space combination to navigate and I ran several professional designers through light usability testing to figure out where they were stumbling.
What you see here is a work in progress.
Try it out:
The following is a snippet of the early code that I wrote to test my hypotheses and derive my calculations.
To calculate a new hex-value, enter your base hex-value, select your operations, and push the “+” button. This will show the new value based on the calculation. This is helpful for finding specific callers that fall within specific contrast ratios or saturation variations from the base.
US Patent Pending
Software Tool for Deriving Colors From A Reference Color By Varying Color Characteristics (US-20230195433-A1, June 22, 2023)
Have a UX need?
let's talk!
I welcome any feedback comments or questions about any work you find on this site. I am also always interested in exploring new opportunities and new ideas.