ardov / huetone

A tool to create accessible color systems

Huetone

The app helps you to create accessible color systems with predictable contrast ratios. Check this twitter thread to learn more.

Run locally

1. Install Yarn
2. Clone and open Huetone repo
3. Run yarn to install dependencies
4. Run yarn start and open http://localhost:3000
5. You are excellent!

Thanks

• Lea Verou, Chris Lilley and the CSS working group for providing all the essential code for color conversions.

• Gregor Aisch for making the great chroma.js library.

• Andrew Somers for developing the Advanced Perceptual Contrast Algorithm (APCA). Note: it's still a working draft for WCAG 3. To learn more check this thread or read that article.

• Stripe team for publishing that article back in 2019 which inspired me to make this app.

huetone's Issues

Feature Request: increase height of graphs and draw lines between dots.

First: I love if. Such a great tool

Problem: In the graph it's hard to align the dots in smooth distribution. For example: I want to have a linear diagonal line from lightest to darkest color. If I move one point up or down it's not very clear if this will lay on a diagonal line.

Solution: Increase the height of the graphs. Best will be square graphs. This will help to align the dots more granular. Lines between the dots also will support to see if the distribution is smooth.

Add a way to copy `lch()` color

lch(47% 74 33) color notion is coming to CSS and can be used today with PostCSS polyfills.

I think it could be a very useful to be able to copy lch() from your awesome tool since you already have L, C, H values in URL. Right now, I copy number by number, but it will be nice to be able to copy lch() notation in one or two clicks.

My favorite way would be to have copy icon with Copy lch() tooltip. But I think a shortcut or a value in a dropdown menu is also an option.

App Crash - Attempt to use history.pushState() more than 100 time per 30 seconds

Hey @ardov

I keep hitting this bug:
Adjusting a color a lot in a short period via the HCL graphs can cause the app to crash and give the following error:

SecurityError: Attempt to use history.pushState() more than 100 times per 30 seconds

It also happens when using the keyboard shortcuts.

Browser: Safari
Video:
https://user-images.githubusercontent.com/13898607/149143837-9db2b664-1597-4f65-a7d1-7dadb1e11756.mov

Add Auto value to theme switcher

Now switcher has only Sun and Moon icon for light and dark theme.

It is not obvious how to set Auto mode to use system default (which is the best mode for modern OS since they all have sunset/sunrise theme switching).

I try to read sources, but was not lucky to understand the logic.

What do you think of adding A mode, which will be default?

Add P3 and Rec2020 support

Thanks for amazing tool. I love it so much and use to rgb → lch convert.

Now we start to work with P3 colors and found that tool is not very useful. We can send PR to improve P3 support, but want to got a approve from maintainer first.

My current plans:

1. I see only one border on canvases right now. It seems like it is a border for sRGB colors. We want to add multiple borders for sRGB limit, P3 limit, Rec2020 limit and eye visibility limit.
2. In additional to making RGB hex field red, add a note that color is out of sRGB or is out of P3 color space.
3. Optionally we can hide Rec2020 limit and show it only by hot key (since we do not have enough Rec2020 screens right now).

I think it will be very useful changes for the tool because we have a lot P3 displays right now (most of OLED screens, all modern Apple screens), Safari got a full support for P3 colors and other browsers and CSSWG is planning to add this support too.

Feature request: "Apply current chroma to column"

Similar to luminance. Loving the tool btw <3

removing palette is too much simple

hi, I appreciate you made such a great service.

I got two requests ,

Look, I wanted to duplicate the palette but there is some mistakes, I clicked 'remove' and that has removed directly.

1. Please add a dialog for check before to remove palette.
   ex)"Are you sure? Y/N"

2. we need more spacing gap between duplicate and delete buttons.

that's all I wanna say to you.
Happy New-year!

License?

Hi there, I'm really digging Huetone. I wanted to make a fork, but I saw that there is no license. Do you plan on adding one or is it closed to forks/modifications?

Apply current hue to row is not working

Clicking on "Apply current hue to row" has no effect.
It's also not throwing any error in the console

Support imporing palette

Sorry if it has already supported.

Feature Request: Export as lch and oklch

It would be great to export the palette as lch and oklch.

Keyboard shortcut for chroma broken for OKLch

C + ↓↑ shortcut doesn't have enough granularity for OKLch and causes huge swings in color.