Colors and color sets

Colors #

Individual colors can be added to Pinwheel via the + toolbar button. Each color can have its own color space. Colors can have alternate values in light mode, dark mode, regular contrast, and high contrast.

A screenshot of Pinwheel’s toolbar

Color sets #

Color sets can be added to Pinwheel via the + toolbar button. Color sets are a way to generate pleasing stepped gradients. Color sets can have an alternative appearance when in light mode, dark mode, regular contrast, and high contrast.

The interpolation setting controls how automatic colors are generated for the Automatic with 2 Colors and Automatic with 3 Colors styles. All the types of interpolation in Pinwheel can be useful, depending on the results you’re after and the colors used.

A screenshot of the different types of interpolation in Pinwheel

Linear interpolation uses color space aware RGB blending. This is the default in Pinwheel, and it’s a good choice for saturated colors. This is sometimes called linear light blending, or gamma correct blending. It looks nice.

Linear (Legacy) interpolation uses color space unaware RGB blending. This is the most common type of blending, and it often results in muddy middle colors, especially with saturated colors. However, it can be a good choice for greyscale gradients.

OKLAB interpolation converts to the OKLAB color space, performs the blending, then converts back to the original color space. It can be a great choice, due to the perceptual uniformity of the OKLAB color space.

OKLCH interpolation converts to the OKLCH color space, performs the blending, then converts back to the original color space. It’s also a good choice, especially when blending with colors that have simliar hues. OKLCH interpolation can be a poor choice when blending colors with very different hues, because it may pass through colors you’re not expecting.

Color aliases #

Color aliases can be added to Pinwheel via the + toolbar button. Color aliases reference colors, entire color sets, or individual colors within a color set. When the original color gets changed, the color alias will update as well.

Color aliases are an ideal choice for semantic colors in design systems.

Name processing #

Exporting can process item and group names. That means you can use nicely capitalized names within your Pinwheel documents, and they can also appear how you’d like within the exported code. “My Color” can become “my-color” or “myColor”, based on your export settings.