Subscribe
Sign in
Harmony — Elevating UI contrast control to a new level of precision
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.
42
Replies
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! 🙌
@romanshamin The Tailwind support is super helpful on this. Did you by any chance check the Tailwind defaults for their accessibility level and was that one of the factors that influenced your devision to make this product reality?
@wintoniak yes, we are big fans of Tailwind itself and the Tailwind color palette, which we extensively use in our projects.
And yes, every time the color contrast in our UIs played a significant role, we found ourselves wishing to surpass the possibilities of Tailwind’s palette. So, it’s true, that was one of many initial driving forces for us!
Our story begins with a pressing need. Back in the day, all existing color palettes faced a common issue: some colors were excessively bright, while others were overly dark. Utilizing any of these existing palettes would undoubtedly lead to accessibility problems down the road. To tackle this challenge, my colleagues and I devoted numerous hours manually crafting colors for each project. We meticulously examined each color using contrast calculators, and we assessed the consistency of the resulting color set with our own eyes.
Then came the game-changer: OKLCH. This innovative model introduced a perceptual lightness axis and a consistent chroma axis, making our color selection process significantly more manageable. However, there was still a lingering issue - the contrast ratio wasn't as consistent as we desired. We wanted more.
A groundbreaking idea: what if we calculated colors in a way that ensures all colors within the same level have precisely the same contrast ratio?
The concept was intriguing, but the implementation was undeniably challenging. It appeared that no one—not a single designer—had ever explored this idea before. There were no ready-made solutions for calculating colors based on desired contrast values. So, we made the bold decision to roll up our sleeves and create an algorithm from the ground up. We put our ideas to the test with a proof of concept on Codepen, and the result of our efforts amazed even us—a palette that harmonized perfectly.
I'm so proud of what we accomplished. The colors we created are not only visually solid but also exhibit consistent chroma and perceived lightness. Even when we play around with different hues, our test interface maintains an astounding level of consistency. And that's where our mission of bringing Dynamic UI Themes to the world was born!
I really believe that fellow designers will save hours and upon hours of active work time and will be delighted with the outcome.
This project hasn't just provided us with a solution to our immediate problem; it has ignited a passion within us to delve deeper into the world of colors, their intricate relationships, and the vital aspects of accessibility.
We are so inspired by this journey that we decided to distill our color calculation algorithm into an open-source library called apcach (https://github.com/antiflasher/a...). This library is just the beginning! We're hard at work on many more tools that will prove invaluable to designers and developers.
Stay tuned for exciting updates, and join us as we explore the colorful world of design and accessibility!
Would love to test in the next project. Thank you for making a palette for Tailwind.
Looks super helpful for making sure colors match up across designs and stay accessible. Props to the team for creating such a useful tool
Great job on creating Harmony! I'm curious, how does Harmony ensure consistent color contrast for different UI themes in both light and dark modes?
@a007mr Hi Anton! A good question. The palette consists of 11 levels - from 50 (pale, almost white color) to 950 (dark, almost black). We have divided all levels into two groups. Colors in levels 50 to 500 are compared to black, colors 600 to 950 are compared to white. These are the values specified in each color slot in the Figma file. If you use, say, red-800 on a black background, you will get some other contrast value than the one shown by the big number.
@a007mr thank you, Anton!
Firstly, Harmony employs the innovative APCA algorithm instead of the OKLCH Lightness parameter. This decision ensures that the perceived lightness of all samples remains extremely consistent on both light and dark backgrounds.
Secondly, we concluded that since dark colors are intended for light UI themes and light colors for dark themes, we could organize them accordingly. In Harmony, Blue 600 has a contrast level of 65 against a white background, while Blue 400 has the same 65 value against a black background. This approach yields consistent results when both themes consider this mirrored design.
Check out my Twitter thread to learn more about it: https://twitter.com/romanshamin_...
Awesome, hopefully I can pass Chrome's Lighthouse accessibility thing. Pretty annoyed by it's complaints around contrast.
@kingromstar hey Rami! Well I can't assure you because it's highly depends on the way you are using (any) color palette :)
Technically speaking, Chrome Lighthouse includes an option to use APCA for contrast calculation https://web.dev/articles/color-a... and if you switch for APCA then our palette will work quite smoothly with Lighthouse because the palette itself is built using APCA.
Even if you don't switch to APCA, as long as you use 50-500 level colors on black backgrounds and 600-950 level colors on white backgrounds, you'll get a WCAG rating of AA and AAA, which is good enough for most cases.
I'm truly impressed by the Harmony Color Palette! This initiative remarkably addresses accessibility in UI design, making it a breeze to attain precise UI contrast control. The availability of this tool as a free Figma file and npm package is a testament to the creators' dedication towards inclusive design. The blend of aesthetic appeal and functionality makes it a commendable resource for any design system. A hearty kudos to the team behind this!
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!
It's no secret that people find adopting new tools (let alone color tools) a bit intimidating. OKLCH and P3 sound great and appealing, but you can't help but worry about a steep learning curve.
The team behind this palette did an incredible job of simplifying and transforming such a complex concept into a user-friendly product. I have taken Harmony for a spin, and I'm hugely impressed.
Compatibility with Tailwind makes it even more awesome.
Bravo!
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?
@kimihito_tanaka thank you, Kimihito!
It’s true, our goal was to create the ultimate color palette that seamlessly integrates into any design system. The feedback we’ve received so far from those implementing Harmony into their UIs confirms our success. Please share your feedback once you’ve had the chance to test it!
And no, we don’t have any plans to make it a paid product. Harmony will remain free and open source.
Furthermore, we do have plans to release extensions of the palette that will cater to different specific needs and objectives of designers and developers.
Unicorn Platform