Skip to content

About

Design principles and inspiration for Strum.

Comparisons

Strum Colors is closely related to both Harmony and Radix UI Colors.

In short, where Harmony is a drop-in replacement for the Tailwind color palette, Strum is a drop-in replacement for Radix UI Colors.

Harmony

Strum Colors started as a fork of Harmony, and shares many philosophies in its creation and packaging. We use OKLCH colors (with RGB fallbacks available) to craft our color scales so that you have a consistent hue across different percieved lightness, and consistent accessible contrasting colors. However, our system does not use the color names and scales built in to Tailwind CSS.

Radix UI Colors

Strum Colors uses the same 12-step scale system as Radix, where each step in the system applies to one or more specific use cases. This allows you to design pages and components by simply knowing which scale to use for each scenario.

We also adhere to the same light and dark mode philosophy as Radix, where the same 12-step scale applies in both modes. Light and dark mode are not simply inversions of each other, but hand-crafted scales that offer a consistent look and accessibility across both.

Strum Colors also provides the same color palettes as Radix, so any neutral or accent color that is available in Radix is available here. Although the hues are similar between the two systems, they are not the same color palettes. Our scales are crafted using OKLCH to achieve consistent hue at different percieved lightness across the palette.

Tailwind-first

Strum Colors offers artifacts for any front end, including vanilla CSS that can enable our color palettes anywhere that CSS is loaded, and detailed JavaScript/TypeScript objects that can be used server-side or in your favorite CSS-in-JS solution. However, it is largely designed with Tailwind users in mind.

See our setup documentation for details on adding Strum Colors to your Tailwind config, and our aliasing documentation for details on adding semantic aliases for your personal branding.

Documentation

All colors in this documentation of course use Strum! We use the Slate palette aliased to neutral and the Teal palette aliased to primary. Syntax highlighting in our code blocks also uses various Strum colors at the 11 and 12 scales.

This site was also built using:

The Author

Strum Colors is maintained by Colin Hemphill, a front end focused software engineer in Austin, TX.

PreviousColors