[HN Gopher] Show HN: hue.tools - open-source toolbox for colors
___________________________________________________________________
Show HN: hue.tools - open-source toolbox for colors
hue.tools was created after spending way to much time trying to
find the right tools when working with colors. 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.
Author : pabue
Score : 282 points
Date : 2022-02-16 16:35 UTC (6 hours ago)
(HTM) web link (hue.tools)
(TXT) w3m dump (hue.tools)
| [deleted]
| madelyn wrote:
| Wow!!! This is awesome, I've wanted something like the mix tool
| for quite some time.
|
| Thank you!
| pabue wrote:
| Thank you! Please let me know if there's anything that needs to
| be improved.
| moultano wrote:
| Where do the color names come from? They're delicious.
| pabue wrote:
| I'm using meodai/color-names (https://github.com/meodai/color-
| names). Pretty awesome project.
| memco wrote:
| 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.
|
| 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.
| pabue wrote:
| I always saw them as separate tools because I always had
| predefined colors I wanted to mix/manipulate. But it's a really
| great idea to think more in the sense of a workflow (or steps)
| instead.
|
| Thanks for the suggestion! I will see what I can do.
| jonpalmisc wrote:
| Yup. This is my new favorite color tool website. Excellent work.
| pabue wrote:
| Wow, thanks!
| diogenesjunior wrote:
| just by looking at the homepage, i see nothing helpful. what does
| the website do? no idea. i'd suggest being more descriptive on
| the home page
| pabue wrote:
| I know what you mean but at the same time I think "toolbox for
| colors" describes it quite well with very few words. I also
| think it's best to just try the tools. But I do think that the
| tools themselves need descriptions and maybe even a small
| tutorial, so thanks for bringing that up.
| tbabb wrote:
| EDIT: Author has pointed out that the interpolation mode can be
| changed. Very slick!
|
| 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/
| pabue wrote:
| First of all thanks for the comments and info. I'm actually not
| doing the color interpolation myself. I'm using chroma.js[1]
| for the most part.
|
| 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.
|
| [1] https://gka.github.io/chroma.js/
| cmurf wrote:
| 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.
|
| For displays you're incrementally better off using LChuv. But
| note that these are very rudimentary color appearance models
| compared to CIECAM02 and newer, where surrounding color and
| ambient light can be taken into account. For a given color,
| surrounding it with two different colors will produce a
| different color appearance for that given color, i.e. a spot
| measurement of the given color will of course be the same,
| but the color in context will be different. It's a feature of
| human vision. Simultaneous contract, Bezold effect, and so
| on.
|
| 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.
| tbabb wrote:
| Aha! That was a bonehead miss on my part. Very nice, and very
| slick interface. :)
| java-man wrote:
| Great tool! Does it account for gamma? Can the user enter a
| different gamma value?
| pabue wrote:
| Thank you!
|
| 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.
| amelius wrote:
| Shouldn't the browser account for it?
| bckmn wrote:
| I've run https://www.thecolorapi.com for years that offers
| similar color introspection via JSON API ergonomics.
| nivenhuh wrote:
| Very functional and straight forward to use tool!
|
| Sure, there are a few enhancements that can be made (state
| management), but this is a great starting point. Nice job!
| djfdat wrote:
| Hey, this is a really great tool, thanks for making and sharing
| with us!
|
| 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!
| pabue wrote:
| The color change when switching between tabs is definitely
| something I'm going to remove/fix soon. It didn't really bother
| me, but I see it now.
|
| 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!
| kang wrote:
| 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.
| pabue wrote:
| Good catch, thanks. Gonna fix that.
| zokier wrote:
| 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.
|
| 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.
| pabue wrote:
| You're right, this part can be a bit confusing. I tried to
| prevent it by adding short descriptions to the modifiers but
| there's definitely room for improvement.
|
| 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 ;)
| akselmo wrote:
| Thank you, this is super useful!
| zadjii wrote:
| This is really pleasant to use. For years I've used
| https://paletton.com/ to similar effect, but I actually like the
| interface here a lot better. It's a bit simpler, and more
| straightforward. Great work!
| pabue wrote:
| I'm really glad to hear that. Thank you!
| vasco wrote:
| Also adding this next to my paletton bookmark, amazing work
| indeed!
| rmetzler wrote:
| 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.
| pabue wrote:
| That is definitely something that started to annoy me too. I
| will look into fixing that soon.
| penjelly wrote:
| > It's an attempt to create a simple but useful toolbox for
| common color related tasks and problems
|
| this is better then the previous tool i was using as a toolbox.
| thanks for the work
| pabue wrote:
| Nice to hear, thanks.
| wnolens wrote:
| 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.
|
| I also love the names that come up ("pig pink" v.s. "strawberry
| milk")
| pabue wrote:
| Really cool to hear that!
|
| And the names are definitely awesome. All the credit for that
| goes to: https://github.com/meodai/color-names
| mhdhn wrote:
| Thanks, came here to say, how'd you get the names. That's
| amazing
| echelon wrote:
| Thank you for sharing! This is such a neat library.
|
| Lots of kudos on the work you put in too! Your app is fun and
| super slick. Top notch design and frontend skills.
| pabue wrote:
| Thank you very much!
| throway_99 wrote:
| This is great
| dinkleberg wrote:
| I love this, it's super smooth! Definitely bookmarking this for
| later.
| pabue wrote:
| Thank you!
| 20after4 wrote:
| Over the years I've seen many similar tools, however, this one is
| probably the nicest, simple and straightforward. Really great
| work!
| roadnottaken wrote:
| Seconded
| pabue wrote:
| Oh wow, thank you so much!
| digitalsankhara wrote:
| Agreed! Great work, and in my main toolbox of go-to tools now.
| ChrisMarshallNY wrote:
| This is quite nice.
|
| 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.
| coolhand1 wrote:
| 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
| pg_bot wrote:
| Where do the color names come from?
| pabue wrote:
| I'm using this package: https://github.com/meodai/color-names
| ipdashc wrote:
| 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.
___________________________________________________________________
(page generated 2022-02-16 23:00 UTC)