hue.tools
It's an attempt to create a simple but useful toolbox for common color related tasks and problems.
While it's in no way perfect or provides the tools for every use case, it has served me well in the last few months and I hope it will be useful for some of you as well.
It looks like this is interpolating in HCL or HSV space— that tends to produce unexpected results, including intermediate colors with unrelated hues (pink between orange and blue?), or sharp discontinuities if one of the endpoints changes slightly (try mixing orange and blue, and then shifting the blue towards teal until suddenly the intermediate pink pops to green).
This document[1] also illustrates pretty well.
Interpolating in RGB space has its own issues (more so if gamma is not handled correctly) due to the human visual system's differing sensitivity to different colors— the result is often that two bright colors will have an intermediate color which is darker than either endpoint.
There's a known solution, thankfully: Mix colors in a perceptual color space like Lab or Oklab[2]. The behavior is very predictable and aesthetically pleasing.
[1] https://observablehq.com/@zanarmstrong/comparing-interpolati... [2] https://bottosson.github.io/posts/oklab/
You can actually change the interpolation mode on the bottom below the color boxes. The default is LCH because I think it looks the best most of the time, but you can use LAB if you prefer that.
CIE L*C*h is based on either CIE 1976 L*a*b* or CIE 1976 L*u*v*, it's just a different representation. <--for formatting or the asterisks vanish.
But without display compensation (mapping the CIE color created for given RGB value, such that a color management system can alter the RGB sent to the display in order to preserve color appearance) you will still have the experience of getting a different color for a given encoding on different displays.
How far down the rabbit hole do you want to go? In any case, these are better than HSL and HSV representations.
An idea for improvement would be to add a palette feature that you can see and modify on all tabs so you can create and modify a set of colors without having to copy them somewhere else before moving on to the next piece of a design.
Thanks for the suggestion! I will see what I can do.
One thing that I think would help is for the tool to not lose state when changing between tabs. You have the manual randomize color button, so it doesn't make sense to randomize on tab switch.
Then, in addition, sending colors from one tab to another. For example, I want to modify a color, and then send it to Mix Swatch 1.
Also, like everyone else, I love the color names! I'd love to see these applied to more swatches, like in the step names in Mix, or the color combinations in Info. Maybe it could show the names, and then flip to the hex value on hover.
Also, I would love if I could save off my settings in different tabs. I know I could just bookmark, but having an in-app method of saving/restoring would be wonderful.
Again, thanks for this! I am definitely adding this to my color toolset!
I also really like the color names. But I can't take credit for that, because someone else is doing all the hard work here: https://github.com/meodai/color-names Showing them in more places might be cool, but the performance might become an issue then.
Saving settings might also be a cool feature to add. I'm gonna look into that.
Thank you!
https://twitter.com/thot_exper1ment/status/14903867798489047... <-- example of some blending in a color space i'm working on
The nerd in me would wish that the tool would use primarily some top-tier colorspace like oklab, but I can understand why you didn't want to go down in that rabbithole.
I never heard of oklab before. Guess I have some reading to do. But I also wouldn't say no to a PR that adds support for it ;)
WCAG defines their own algorithm for calculating the contrast between two colours to ensure good accessibility [1][2]. Bootstrap v5 uses this [3].
[0] https://github.com/twbs/bootstrap/blob/v4.6.1/scss/_function...
[1] https://www.w3.org/WAI/GL/wiki/Relative_luminance
[2] https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
[3] https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_function...
I also love the names that come up ("pig pink" v.s. "strawberry milk")
And the names are definitely awesome. All the credit for that goes to: https://github.com/meodai/color-names
Lots of kudos on the work you put in too! Your app is fun and super slick. Top notch design and frontend skills.
this is better then the previous tool i was using as a toolbox. thanks for the work
I haven't had time to play with it much, so far, but, as it so happens, I have been working on color themes for my app, lately, using tools like this.
Thank you!
One thing I'm curious about that I couldn't discern from the GH repo: what's the license?
Sure, there are a few enhancements that can be made (state management), but this is a great starting point. Nice job!
Currently the user can't change the gamma value, because I personally never had the need for it. But I see why it might be useful and will look into adding that.
[0] http://blog.johnnovak.net/2016/09/21/what-every-coder-should...