14 ms·
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.
- deleted 5y ago[deleted]
- java-man 5y agoGreat tool! Does it account for gamma? Can the user enter a different gamma value?
- pabue 5y agoThank 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 5y agoShouldn't the browser account for it?
- java-man 5y agoWhen mixing colors, gamma value is important, see for example [0]. A naive implementation would produce darker, and generally incorrect colors. [0] http://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/ http://blog.johnnovak.net/2016/09/21/what-every-coder-should...
- madelyn 5y agoWow!!! This is awesome, I've wanted something like the mix tool for quite some time. Thank you!
- pabue 5y agoThank you! Please let me know if there's anything that needs to be improved.
- zadjii 5y agoThis is really pleasant to use. For years I've used https://paletton.com/ 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!
- memco 5y agoThe 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 5y agoI 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.
- zokier 5y agoIn 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 5y agoYou'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 ;)
- wnolens 5y agoI 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 5y agoReally cool to hear that! And the names are definitely awesome. All the credit for that goes to: https://github.com/meodai/color-names https://github.com/meodai/color-names
- dinkleberg 5y agoI love this, it’s super smooth! Definitely bookmarking this for later.
- pabue 5y agoThank you!
- moultano 5y agoWhere do the color names come from? They're delicious.
- pabue 5y agoI'm using meodai/color-names (https://github.com/meodai/color-names https://github.com/meodai/color-names). Pretty awesome project.
- rmetzler 5y agoI 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 5y agoThat is definitely something that started to annoy me too. I will look into fixing that soon.
- penjelly 5y ago> 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 5y agoNice to hear, thanks.
- throway_99 5y agoThis is great
- 20after4 5y agoOver the years I've seen many similar tools, however, this one is probably the nicest, simple and straightforward. Really great work!
- pabue 5y agoOh wow, thank you so much!
- digitalsankhara 5y agoAgreed! Great work, and in my main toolbox of go-to tools now.
- roadnottaken 5y agoSeconded
- pg_bot 5y agoWhere do the color names come from?
- pabue 5y agoI'm using this package: https://github.com/meodai/color-names https://github.com/meodai/color-names
- bckmn 5y agoI’ve run https://www.thecolorapi.com https://www.thecolorapi.com for years that offers similar color introspection via JSON API ergonomics.
- jonpalmisc 5y agoYup. This is my new favorite color tool website. Excellent work.
- pabue 5y agoWow, thanks!
- tbabb 5y agoEDIT: 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-interpolating-in-different-color-spaces https://observablehq.com/@zanarmstrong/comparing-interpolati... [2] https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- pabue 5y agoFirst 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/ https://gka.github.io/chroma.js/
- cmurf 5y agoCIE 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.
- djfdat 5y agoHey, 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 5y agoThe 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 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!
- nivenhuh 5y agoVery 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!
- pabue 5y agoThere's definitely quite some room for improvement. Thanks!
- ChrisMarshallNY 5y agoThis 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 5y agoThis. 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
- pabue 5y agoThank you! Let me know if there is anything that you're missing or that can be improved.
- diogenesjunior 5y agojust 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 5y agoI 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.
- kang 5y agoMinor 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 5y agoGood catch, thanks. Gonna fix that.
- akselmo 5y agoThank you, this is super useful!
- ipdashc 5y agoIt'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.
- pabue 5y agoSame, I'm so glad someone is taking the time to come up with all of those amazing names.
- thot_experiment 5y agoNice 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. https://twitter.com/thot_exper1ment/status/1490386779848904707 https://twitter.com/thot_exper1ment/status/14903867798489047... <-- example of some blending in a color space i'm working on
- ricopags 5y agoI love this tool, especially that it's built with SvelteKit. Thanks for sharing it! One thing I'm curious about that I couldn't discern from the GH repo: what's the license?
- pabue 5y agoOh, I totally missed adding a license... Definitely gonna add it later. In case you want to know now: it's gonna be MIT. Thank you!
- sinelanguage 5y agoYour UI is really beautiful. Well done!
- pabue 5y agoThank you!
- CyanBird 5y agoIf this could be added as a Photoshop plug in, I as an artist would not think twice of forking some cash to get it, mark it as business expense
- pabue 5y agoI've never build a photoshop plugin but it sure sounds interesting. I'm gonna see whats possible here. Thanks for the suggestion!
- emmanueloga_ 5y agonice 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
- pabue 5y agoOhh, very cool idea. I'll experiment with that a bit and see how this could work. Thanks for the suggestion!
- asiachick 5y agoI notice on the modify page, dragging the sliders, the color update lags. Is that intentional?
- pabue 5y agoThis might have something to do with CSS transitions. It's not intentional. Gonna take a look at it later. Thanks!
- stoicjumbotron 5y agoReally 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?
- pabue 5y agoI initially started with this project to learn more about svelte and try sveltekit. So I never made a design or a prototype. I just had a rough idea of how I wanted it to look and then just iterated on it while building it.
- 5ESS 5y agoCould you add support for 10 or 12 bit colors?
- pabue 5y agoInteresting suggestion, I'll see what I can do.
- just-tom 5y agoIs 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.
- exclipy 5y agoLook at the L for either LAB or LCH. It'll be between 0 and 100.
- Cyykratahk 5y agoA simple function is to calculate whether the total of each RGB channel reaches a certain threshold, with different weights given to each channel. For an example, see the YIQ contrast function used by Bootstrap v4 [0]. 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/_functions.scss#L72-L85 https://github.com/twbs/bootstrap/blob/v4.6.1/scss/_function... [1] https://www.w3.org/WAI/GL/wiki/Relative_luminance https://www.w3.org/WAI/GL/wiki/Relative_luminance [2] https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests [3] https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_functions.scss#L146-L202 https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_function...
- pabue 5y agoGreat idea. I think this will fit nicely with the info tool. Also a accessibility contrast score might also be helpful. I will take a look at that. Thanks!
- polyterative 5y agoLooks really good. I would love to be able to generate HCL palettes like https://medialab.github.io/iwanthue/ https://medialab.github.io/iwanthue/
- dsmmcken 5y agoMinor 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.