Huetone is here! 🌈
It's the tool you need to create and fine-tune your color system.
Details in thread
huetone.ardov.me
It's the tool you need to create and fine-tune your color system.
Details in thread
huetone.ardov.me
Color systems should be predictable in terms of contrasts. It makes them easy to use. If you can easily replace "blue-500" with "orange-500", your palette is well constructed.
Huetone helps you build such systems by visualizing your palette and contrasts between colors.
Huetone helps you build such systems by visualizing your palette and contrasts between colors.
For visualization, Huetone uses LCH color space.
LCH stands for Lightness, Chroma, and Hue.
Unlike RGB or HSL, it is perceptually uniform and covers all the colors a human can see.
Note that we are still limited to our RGB monitors, and some colors will be undisplayable.
LCH stands for Lightness, Chroma, and Hue.
Unlike RGB or HSL, it is perceptually uniform and covers all the colors a human can see.
Note that we are still limited to our RGB monitors, and some colors will be undisplayable.
To get an idea of LCH, look at this diagram below. The upper colors are more saturated than the lower ones. The slider represents lightness.
Did you notice how there is no dark and saturated yellow? Live with it 😔
Did you notice how there is no dark and saturated yellow? Live with it 😔
So we visualized colors, what about contrasts?
To give you more context, Huetone uses two contrast algorithms:
To give you more context, Huetone uses two contrast algorithms:
1. Standard WCAG2 contrast algorithm.
If you have ever checked the contrast ratio, 99% you have used this one. It doesn't care which color is text and which is the background.
If you have ever checked the contrast ratio, 99% you have used this one. It doesn't care which color is text and which is the background.
2. Advanced Perceptual Contrast Algorithm (APCA) by @MyndexResearch.
It is a working draft for the WCAG3. APCA is usage-aware, so we need 2 values to represent possible combinations of text and background.
Check this page to learn more w3.org/WAI/GL/task-fo…
It is a working draft for the WCAG3. APCA is usage-aware, so we need 2 values to represent possible combinations of text and background.
Check this page to learn more w3.org/WAI/GL/task-fo…
Those were the core parts I wanted to highlight.
There is also a bunch of small things that simplify work with Huetone:
– hotkeys
– editable slots to check contrasts
– export to Figma.
– unique URLs for every palette
There is also a bunch of small things that simplify work with Huetone:
– hotkeys
– editable slots to check contrasts
– export to Figma.
– unique URLs for every palette
It's still a raw project, and the interface can be confusing, but I already feel like sharing it. 😅
I'm going to make it open source later, after I finish cleaning up some messy code.
I'm going to make it open source later, after I finish cleaning up some messy code.
Finally, if you want to dive deeper into a world of color systems, check these articles:
1. stripe.com/blog/accessibl…
2. wildbit.com/blog/2021/09/1… by @efedorenko
1. stripe.com/blog/accessibl…
2. wildbit.com/blog/2021/09/1… by @efedorenko
Great news! I've just made the repository public. So you can fork and play with it.
The code can be messy, I'm not a real programmer 🤪
github.com/ardov/huetone
The code can be messy, I'm not a real programmer 🤪
github.com/ardov/huetone
• • •
Missing some Tweet in this thread? You can try to
force a refresh
