hue.tools was created after spending way to much time trying to find the right tools when working with colors.<p>It's an attempt to create a simple but useful toolbox for common color related tasks and problems.<p>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.
EDIT: Author has pointed out that the interpolation mode can be changed. Very slick!<p>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).<p>This document[1] also illustrates pretty well.<p>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.<p>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.<p>[1] <a href="https://observablehq.com/@zanarmstrong/comparing-interpolating-in-different-color-spaces" rel="nofollow">https://observablehq.com/@zanarmstrong/comparing-interpolati...</a>
[2] <a href="https://bottosson.github.io/posts/oklab/" rel="nofollow">https://bottosson.github.io/posts/oklab/</a>
I like it, however I wish the colors wouldn’t change constantly when I click between tools. I would like to explore the possibilities I would have with one or two colors.
The UI seems responsive and produces nice looking results. However I found the usefulness of blending and mixing hampered by the fact that fine grained control of the saturation, luminance, etc. are only available in the modify tab. It would be more useful to me if I could modify those on any color I’m working with in the other tabs.<p>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.
This is really pleasant to use. For years I've used <a href="https://paletton.com/" rel="nofollow">https://paletton.com/</a> to similar effect, but I actually like the interface here a lot better. It's a bit simpler, and more straightforward. Great work!
It's been said several times already but I really love the names. They add so much flavor to it and, surprisingly enough, really seem to get my imagination going, haha.
Hey, this is a really great tool, thanks for making and sharing with us!<p>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.<p>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.<p>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.<p>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.<p>Again, thanks for this! I am definitely adding this to my color toolset!
Nice work! I'm glad you support color spaces outside of RGB for blending. I've been working on designing some new color blending modes/spaces and I'm excited to see more anthropocentric math being used to generate colors in general.<p><a href="https://twitter.com/thot_exper1ment/status/1490386779848904707" rel="nofollow">https://twitter.com/thot_exper1ment/status/14903867798489047...</a> <-- example of some blending in a color space i'm working on
In modify there are "brighten", "tint", and "lighten", and for uninitiated like me the difference seems pretty vague. I suppose they refer to some similar operations in different colorspaces, but the tool could be more intuitive here.<p>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.
Is it possible to know about a certain color if it's dark or light? My goal is to automatically determine whether to put a white or black text on top of a background colored box based on the answer. Is it has something to do with the temperature? I'd expect to get some value below or above 0.5.
I really enjoyed adjusting the different knobs in 'Modify' mode to achieve something that 'felt' good to me. I don't know anything about color (as represented by computers or otherwise) but it was fun.<p>I also love the names that come up ("pig pink" v.s. "strawberry milk")
This. is. awesome. Thanks for sharing! I manage a lot of designs and guidelines for Open Source projects and the amount of time I spend translating color information into different values to make sure everything is "on brand" is ridiculous. This is going to save me ton of time
I’ve run <a href="https://www.thecolorapi.com" rel="nofollow">https://www.thecolorapi.com</a> for years that offers similar color introspection via JSON API ergonomics.
> It's an attempt to create a simple but useful toolbox for common color related tasks and problems<p>this is better then the previous tool i was using as a toolbox. thanks for the work
This is quite nice.<p>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.
Minor bug: backspacing. Eg, edit some value, type "1", now backspace changes text to "NaN" instead of expected "". To make it a bit worse, users can't even do "01", now backspace changes to "" instead of expected "0". Both should be fixed imo.
Minor gripe: double clicking a hex color selects just the value and not the hash, which is good for text entry, but annoying when pasting a previously copied hex colour and you get ##ABCDEF. Might be nice to remove the duplicate ## or something.
Looks really good. I would love to be able to generate HCL palettes like <a href="https://medialab.github.io/iwanthue/" rel="nofollow">https://medialab.github.io/iwanthue/</a>
I love this tool, especially that it's built with SvelteKit. Thanks for sharing it!<p>One thing I'm curious about that I couldn't discern from the GH repo: what's the license?
Really loved the UI. Did you first create a prototyping with Figma or some other tool or just slowly iterated during your development till you were satisfied?
nice project! Suggestion: for the blending tool, you could show a grid of every blending mode at once instead of needing to pick the blending mode one by one
Very functional and straight forward to use tool!<p>Sure, there are a few enhancements that can be made (state management), but this is a great starting point. Nice job!