Chromaspec

Chromaspec is an opinionated design system palette generator that creates color scales with consistent perceived brightness using OKLCH.

Why OKLCH

OKLCH is an improved version of LCH. LCH is a color space where colors with the same Lightness value should have comparable perceived brightness.

L:0.8 C:0.18 H:85#F2B200
L:0.8 C:0.12 H:240#6FC8FF

This property of LCH/OKLCH makes it an ideal solution for creating a system of colors with predictable brightness, suitable for UI design. An UI element moving from colors like blue-10 blue-50 and blue-70 to yellow-10 yellow-50 yellow-70 should keep the perceived brightness, thus stay as prominent as before in the design.

Features

Levels

Levels defines the steps in the color scales. In Chromaspec, level ranges from 0 to 100, and calculates lightness with the following formula:

lightness = 100 - level
level 0 will have 100% lightness and results in white (#FFFFFF), while level 100 will result in pitch black (#000000)

Palette

Palette is the view that visualizes the relationship between the chosen tones of the color scales. It is most useful when used to examine the general tone of the selected palette.

Scales

Scales is the view where the color steps are laid out with details. Tip: To make each scale to have roughly the same accessible color pairs, try to fine tune the chroma curves and aim for similar WCAG Relative Luminance values for the same step across the scales.

Combinations

Select two scales and check how many accessible combinations the scales can produce. A flexible color system that is easier to use in UI design should have more accessible combinations.

Export

Export the result in different formats. Generate a sharable link here for future reference.

Tips

Fit brand colors into the color scales of the design system.

Step 1: Find the color in the OKLCH color space

Use OKLCH Color Picker & Converter to convert from Hex to OKLCH. Note down the L, C, and H components of the color.

For example, #0000FF (blue) can be defined in OKLCH as oklch(45.2% 0.3131362576587438 264.05300810418345). I can note down the L to be 0.45, C to be 0.31313, and Hue to be 264. The numbers do not have to be super precise.

Step 2: Create a scale with the same hue

In Scales, apply H to the hue of a new scale or change an existing scale. In the example, we set the Hue to 264.

Step 3: Create a step with the same brightness

In Levels, apply L to one of the level or a new level. In the example, we need level 55 to match the lightness of 0.45.

Step 4: Refine the chroma curve of the scale to fit brand color into the scale

Change the parameters in Chroma Settings to approximate the character of the brand color. In our example, #0000FF is an extremely vibrant blue, we will have to move the peak param to make the chroma peak at level 55, increase the multiplier to make the entire scale more saturated to match the vibe of the color. We eventually

Pay attention to the Hex, and Relative Luminance values to see if the colors are getting close to the brand color, and the relative luminance is still largely consistent with the other scales.

Step 5: Experiment

Depending on the brand color, you might get lucky and get the HEX code to appear. Sometimes it can appear on a nearby level. Play around with the tools in Chromaspec to make the new scale fit even better in the color system.

Reference and Links