Harmony, a UI color palette prioritizing accessibility, utilizes advanced color tech and features, serving as a reliable companion for design systems. Access it for free as a Figma file and npm package.
Hey everyone, I’m thrilled to unveil my third product as a maker: Harmony, a unique UI color palette! Why is it so unique? First, it’s intensely focused on accessibility. Next, it leverages cutting-edge color technology and provides features that make it a dependable companion for any design system. Finally, Harmony is available for free and is provided as both a Figma file and an npm package.
👉 Check out my Twitter thread where I explain how Harmony was designed and how designers and developers can benefit from it: https://twitter.com/romanshamin_...
---
Here are seven Harmony features that simplify the lives of designers and developers:
1. Equal contrast within lightness levels. Configure your UI effortlessly with dozens of switchable accent colors, as you can do on macOS. Ensure that the text on a yellow button is as legible as the text on a blue one. This functionality is achieved, because in Harmony, colors such as Blue 600, Green 600, and all others within the 600 level maintain the same contrast level.
2. Mirrored contrast columns simplify the creation of UI themes—both light and dark—and also ensure consistent color contrast for text and buttons in those themes. This is made possible by organizing color columns in Harmony as pairs, with the same contrast mirrored across the central column.
3. P3 gamut support for richer colors. Harmony leverages up to 49% more colors from the P3 gamut, enhancing the vibrancy of every color in the palette on modern displays. Be sure to use the Display P3 color profile in Figma to access all these vibrant colors.
4. Consistent chroma and perceived lightness ensure that all colors within a group appear remarkably similar. This cohesive approach helps semantically related, yet differently colored elements, such as user avatars, tags, and notifications, maintain a uniform appearance, even when placed in different sections of the UI.
5. Tailwind compatibility. Harmony seamlessly integrates with Tailwind’s color count, lightness levels, and naming conventions. Additionally, Harmony is available as an npm package that includes color configurations for Tailwind.
6. Figma variables support. You’ll find the palette neatly organized in the ‘Harmony Primitives’ collection. Simply assign these variables to your semantic tokens and configure UI theming modes, keeping the mirrored contrast columns in mind.
7. OKLCH as the source of truth. Harmony provides an OKLCH color code for each sample. Use these codes to ensure color consistency between Figma and CSS, since copying and pasting HEX codes into CSS may not produce the desired results if the Figma document is set to Display P3 mode.
---
Harmony was developed by a team of believers at Evil Martians, specializing in product consulting for developer tools.
🙇♂️ Roman Shamin (https://twitter.com/romanshamin_en), creator of OKLCH Color Picker & Converter, Polychrom APCA contrast checker, and Martian Mono font.
🙇♂️ Anton Lovchikov (https://twitter.com/antiflasher), creator of apcach—a JS color calculator for composing colors with a consistent APCA contrast ratio.
🙇♂️ Gleb Stroganov (https://twitter.com/strongeron), product designer at Evil Martians.
🙇♂️ Ivan Buryak (https://twitter.com/11bit), frontend engineer at Evil Martians.
---
We all are truly grateful for your support. Feel free to share your thoughts! 🙌
I tried a few third-party palettes, but somehow I didn’t pay attention to how good they are in terms of accessibility, just the general appearance, brightness and consistency to brand colors. This palette is made with an emphasis on accessibility and I think it is a great new candidate for the next project, especially for color-led experience such as dashboards, platforms etc.
I actually love the idea and looking forward to Websites and apps starting to use the cutting-edge color technology as I am among those who hate working under direct sun with Macbook. Thank you for making it so easy to use in Figma guys!
Fantastic Idea. Congratulations on your launch! I felt Harmony works best when building Design system and products. Especially, Dark mode adjustment is amazing.
Are you planning to start paid plan or some extensions?
Polychrom—APCA Contrast Checker