Pinwheel

Design systems

Pinwheel is a great all-round color utility, but it really shines as the source of truth for your design system’s colors.

Color sets help when creating beautiful, stepped color gradients, and are perfect as design system primitives. OKLAB, OKLCH, and color space aware linear blending can be used, which avoids the typical issue of muddy colors in the middle of gradients.

Color aliases are an ideal solution for semantic colors. They reference another color or color set, dynamically updating as the original color changes.

Everything can be organised in groups, and groups can be namespaced. What’s a namespaced group? If a namespaced group is called text, then a color alias inside could be called primary. When exported, the color can be referenced as text.primary in Swift, or --text-primary in CSS.

Works with Figma

Yes! Pinwheel plays nicely with Figma. There’s various ways to integrate Pinwheel and Figma to keep color variables in sync.

Works for developers

Pinwheel’s document format is an open specification, and documents can be stored in Git repos. It’s likely Pinwheel can be integrated into your existing workflows and build scripts.

Fix common issues

When moving colors between design tools or into code, sometimes their appearance can change unexpectedly. Colors may become too vibrant, or too dull, not matching how they looked when they were originally chosen. Pinwheel provides utilities to resolve these issues in a single click.

Importing and exporting

Pinwheel imports Design Tokens JSON, Figma documents, Sketch documents, CSS, asset catalogs, and other file types.

Once you’ve finished making adjustments, automated exporting can be set up to simultaneously export in multiple formats. Would you like SCSS, Design Tokens JSON, and SwiftUI color enums all at once? Sure thing.

Pinwheel can also be run from the command line, if that sort of thing excites you. It excites us!

Exporting can process color names, too. This means the colors in your Pinwheel documents can have nice capitalisation and spaces, but your CSS variable names can be kebab case with a prefix, and your Swift enums can be camel case.

Color testing

Pinwheel has on-the-fly color accessibility testing that shows WCAG 2 and APCA contrast next to the picker as colors are adjusted, making it faster to meet accessibility requirements.

More comprehensive and repeatable color accessibility testing can be set up, and the resulting reports can be saved as HTML or PDF documents.

Color accessibility testing can be run from the command line, too. Being able to easily re-run tests means regressions can be spotted and fixed quickly. It also means accessibility testing can be part of build scripts or unit testing.

Pinwheel handles opacity correctly when testing colors, unlike some other tools.

Not a subscription

Pinwheel is USD$25 plus local taxes. All 1.x updates are included in that price. There’s also a 30-day free trial, so you can use it for a few weeks before making up your mind.

If you’d like to know more, please read about Pinwheel’s pricing and business model.

Privacy focused

Pinwheel and all our products are privacy focused, with no ads, no analytics, and no creepy tracking.

Unlike other tools, we aren’t watching you work. Documents aren’t stored on our servers, and we can not view them.