Design system color palette generator

An essential tool for generating an accessible, versatile, vibrant color palette at The Business Journals

Color requirements

As part of the foundation for The Business Journals' Blazer design system, we needed brand color palettes up to the task of supporting all our digital efforts. Blazer's color palette would have to be:

Accessible

Colors pass WCAG standards for color contrast, with each corresponding step of the Sapphire, Ruby, and Emerald scales having identical contrast scores against white and black values.

Versatile

Colors should be available to support to a wide range of use cases, from subtle backgrounds to attention-grabbing buttons.

A bit more vibrant

Colors for interactive elements feel more actionable, while still feeling professional.


Tool analysis

Creating a color palette to meet those requirements across three themes by hand would be prohibitively-slow and imprecise. To complete this task, I needed to use one or more tools to minimize friction while exploring the wide range of possible color settings. There are a bunch of really great tools serving this need. But each tool I tried fell short in one or more ways:

Color uniformity

Design and development tools often use the HSL color space to specify and generate colors. But the math behind the HSL color space is fundamentally disconnected from the way people perceive color. Color scales generated by these tools won't have identically-perceived brightness and contrast ratios across our Sapphire, Ruby, and Emerald brand themes, so they aren't well-equipped to satisfy our accessibility requirement.

The HSLuv color space was recently developed as a human-friendly alternative to HSL. Manipulating colors using HSLuv would help ensure that Sapphire 60, Ruby 60, and Emerald 60 values would each have the same contrast ratios against white and black. But tools using HSLuv are scarce and immature.

HSL color contrast with white text against hues at 60% brightness
In HSL, the white text is unreadable against many hues at 60% brightness. Image credit: Alexei Boronine
HSLuv color contrast with white text against hues at 60% brightness
In HSLuv, the white text is always readable against backgrounds of any hue with 60% lightness. Image credit: Alexei Boronine

Color steps

Most color scale generators distribute each color linearly between the beginning and end of the range. To generate a versatile palette that could be applied across a variety of use cases from subtle backgrounds to attention-grabbing buttons, we needed a tool that would let each scale be adjusted along a curve to output more colors clustered toward the beginning, middle, or end values of each range.

Palette context

Generating one accessible, versatile color scale is challenging enough. But we needed a tool that would display advanced controls for multiple scales at once so we could create a completely cohesive palette.


Custom solution

Since I couldn't find the right tool for the job, I started making one! After an initial proof of concept I built up a Vue.js application that provides an interface for generating colors.

The application features:

Immediate visual feedback

The application is reactive, with immediate visual feedback for every adjustment made to each color input.

Uniformity across hues

All color functions are calculated using the HSLuv color space, which ensures uniform brightness across all hues.

Accessibility

Each color step is labeled with WCAG color contrast grades for small and large text against white and black values.

Color swatches displaying WCAG color contrast ratio grades.
Starting values, ending values, and curves can be edited using interface controls or by typing specific values.

Adjustable curves

Colors are distributed in steps along a curve between the start and stop values for hue, saturation, and lightness within each scale. Each curve is derived from coordinates which can be manipulated to output steps evenly across a range, or cluster values more toward the beginning, end, or anywhere in between.

Natural interaction

The math that translates polor coordinates into curves is difficult to manipulate with confidence. To facilitate more deliberate explorations, I plotted each curve on an interactive graph that can be modified without needing to internalize the underlying math. Curves can now be adjusted as easily as lines in any vector drawing app, like Sketch or Illustrator.

Design system integration

With one click, each scale can be exported as design tokens in a YAML format digestible by our design system codebase. The design system then translates the tokens into SCSS variables for use in code, and JSON for import into Sketch color palettes. This made it efforless to validate adjustments made to the colors in actual context within our designs.

Screenshot of YAML code sample
Example YAML design tokens to integrate with design system using Theo.
Screenshot of SCSS code sample
Example SCSS design tokens generated by Theo for importing within design system SCSS.
Screenshot of JSON code sample
Example JSON design tokens generated by Theo for importing as a Sketch color palette.