Show HN: Huemint – Machine learning for color design(huemint.com)
huemint.com
Show HN: Huemint – Machine learning for color design
https://huemint.com/
53 comments
Excellent explanation! I came here thinking “why use ML for this?” and this is specifically addressed:
> You might ask at this point, if we can enumerate all possible solutions like this, why not just generate colors from first principles - why is machine learning even needed? The answer is basically that translation and rotation in colorspace might be contrast-invariant, but they're not preference invariant. Humans have subjective preferences for certain color combinations over others, so to generate pleasing color combinations we need to quantify which areas in the configuration space people generally prefer.
> To quantify which color combinations graphic designers prefer, I started by scraping design thumbnails from the web.
> At this point we have a decent sized dataset to train our ML model. The overall approach is to treat the problem as conditional image generation - the color contrast graph is the input and the corresponding color palette is the output.
> You might ask at this point, if we can enumerate all possible solutions like this, why not just generate colors from first principles - why is machine learning even needed? The answer is basically that translation and rotation in colorspace might be contrast-invariant, but they're not preference invariant. Humans have subjective preferences for certain color combinations over others, so to generate pleasing color combinations we need to quantify which areas in the configuration space people generally prefer.
> To quantify which color combinations graphic designers prefer, I started by scraping design thumbnails from the web.
> At this point we have a decent sized dataset to train our ML model. The overall approach is to treat the problem as conditional image generation - the color contrast graph is the input and the corresponding color palette is the output.
This was really cool project and a great writeup!
It's interesting to think what would happen if a tool / technique like this one became super popular. Would we see more variation, as more people could choose schemes that look good? Or would we see convergence as there are no longer people actively making decisions (similar to what may be happening in the stock market due to the rise of index funds: [1])?
[1] https://www.theatlantic.com/ideas/archive/2021/04/the-autopi...
It's interesting to think what would happen if a tool / technique like this one became super popular. Would we see more variation, as more people could choose schemes that look good? Or would we see convergence as there are no longer people actively making decisions (similar to what may be happening in the stock market due to the rise of index funds: [1])?
[1] https://www.theatlantic.com/ideas/archive/2021/04/the-autopi...
This should be added to the AI for art list going around!
edit: I forgot where I saw the list for 2021 but it included stuff like this https://twitter.com/ML4CDworkshop/status/1467661464400183298...
edit: I forgot where I saw the list for 2021 but it included stuff like this https://twitter.com/ML4CDworkshop/status/1467661464400183298...
Very impressive technical work, a relatively complex approach explained in a simple way, well done
This writeup is fantastic. Clear description, beautiful visualizations... looks like a true labor of love.
This is really nice! It'd be nice if the colors picked were saved in the url, so that you can use history to navigate the different patterns generated.
I love this suggestion (and hope the OP implements it), but in the meantime, there is a link button on the toolbar right next to the palette that provides a link to the generated palette.
I’ve used multiple color palette generators and this is definitely one of the best. Besides the ML, showing the colors on images like a phone and real web pages is really impressive.
My one suggestion is since you have Bootstrap support, maybe add TailwindCSS utility support as well
My one suggestion is since you have Bootstrap support, maybe add TailwindCSS utility support as well
I opened it with a skeptical eye and walked away completely impressed. Despite the odd dissonances that pop up at intervals, many of the palettes produced are not only trendy and pleasing but also unexpected and creative in some ways.
Huge kudos!
Huge kudos!
Nice. I have daydreamed about something like this for years, and this is not it.
I'd imagine a series of left/right comparisons, like a visit to an eye doctor, where the machine learning is rewarded for its ability to predict my preferences. Eventually (a time commitment for me) it will be able to build from scratch color designs that I love.
This is like an early application of machine learning: What are the odds of victory for this backgammon position? Here, instead, we've estimating a preference function on color triples. Is RGB even the right domain, or do we want to work in some frequency transform, to capture the equivalent to musical chords. This is an empirical question, that can only be answered by trying to estimate this preference function, and noticing ripples better resolved by a different parametrization.
This would be easy, compared to the Riemannian geometry used in medical imaging. There's more money there.
For commercial use one cares what others think. There's the speciation question: You won't synthesize deep jazz tracks and deep blues tracks without separating the advice into species. Identifying clusters in data is something statisticians have worried about since the dawn of statistics.
I'd imagine a series of left/right comparisons, like a visit to an eye doctor, where the machine learning is rewarded for its ability to predict my preferences. Eventually (a time commitment for me) it will be able to build from scratch color designs that I love.
This is like an early application of machine learning: What are the odds of victory for this backgammon position? Here, instead, we've estimating a preference function on color triples. Is RGB even the right domain, or do we want to work in some frequency transform, to capture the equivalent to musical chords. This is an empirical question, that can only be answered by trying to estimate this preference function, and noticing ripples better resolved by a different parametrization.
This would be easy, compared to the Riemannian geometry used in medical imaging. There's more money there.
For commercial use one cares what others think. There's the speciation question: You won't synthesize deep jazz tracks and deep blues tracks without separating the advice into species. Identifying clusters in data is something statisticians have worried about since the dawn of statistics.
This is fantastic, and I will definitely use it for personal projects in the future!
I see a few requests for practical features here, but I have one incredibly silly request: how plausible would it be to restrict the colors to a set list of RGB values, so one could, say, generate color palettes for physical mediums based on medium color -> RGB conversion lists, such as painting, cross stitch thread[0], or yarn[1]?
[0]: https://threadcolors.com
[1]: https://halcyonyarn.com/yarn-colors/color-codes/
I see a few requests for practical features here, but I have one incredibly silly request: how plausible would it be to restrict the colors to a set list of RGB values, so one could, say, generate color palettes for physical mediums based on medium color -> RGB conversion lists, such as painting, cross stitch thread[0], or yarn[1]?
[0]: https://threadcolors.com
[1]: https://halcyonyarn.com/yarn-colors/color-codes/
yeah that should be possible, just need to quantize the resulting palettes to the closest available thread color. You could possibly do it with the api (there's some instructions at the bottom of the about page)
Great work. The theme generated is also great - https://huemint.com/bootstrap-basic/
Totally don't buy the machine learning thing for this, but fantastically well done, especially like example pages. Really good, thank you for this.
I am a little bit confused, why does a scheme changes every time I switch page, I would like to see single scheme applied all over? Or maybe I am not understanding how this works?
I think I see - you can 'lock' the colors at the top and they remain persistent.
Yes, I'm not sure how ml is used or needed here. But the website is well done.
[deleted]
This is nice. Once of my favorite palette tools is coolors.co, and they have a nice feature that let's you hit spacebar for a new palette. Would be useful here too I think.
Also would be nice to "apply" the colors from an upload image to the various scenarios. I.e. grab X colors from image and generate would cycle through various forms of those (possible adding extra complementary colors as needed).
Also would be nice to "apply" the colors from an upload image to the various scenarios. I.e. grab X colors from image and generate would cycle through various forms of those (possible adding extra complementary colors as needed).
Hmm, I realize I was the upload image works backwards from how I expected – I think you are actually intending me to upload a screenshot of a design to then swap out palettes. That is super cool, but on first guess I thought you were extracting from mine to make a palette. Might need a little helper text, but cool feature!
In Russian, the name reads as something indecent.
Well not really, it's "хьюминт"
You must be unavare how Russian people actually read latin letters.
Usually I just got to Adobe kuler to find color schemes for projects: https://color.adobe.com/explore
But this project creates some pretty good ones on the fly. I'd be interested in knowing what features of colors it's uncovered, that it uses to generate new swatches.
But this project creates some pretty good ones on the fly. I'd be interested in knowing what features of colors it's uncovered, that it uses to generate new swatches.
That's really cool! I like the various demos of the themes.
I need to play with it some more, and understand how to use it, but good job!
I need to play with it some more, and understand how to use it, but good job!
Is it supposed to generate palettes with nearly-unreadable text like this? https://share.getcloudapp.com/Z4u7dwdG
Is there anything that checks for contrast/accessibility?
(Also, I couldn't find any credit or name on the site?)
Is there anything that checks for contrast/accessibility?
(Also, I couldn't find any credit or name on the site?)
This is really cool, I'm excited to see more ML applied to design like this.
One project I wish someone would build is an ML-powered algorithm for perceptually even saturation, drawing on crowdsourced data to help pick colors that most people would perceive as being equally colorful
One project I wish someone would build is an ML-powered algorithm for perceptually even saturation, drawing on crowdsourced data to help pick colors that most people would perceive as being equally colorful
I love it, but now I'm stuck playing with the cube hologram thing on the intro page.
I love the ML angle but honestly struggled to use the tool. I tried locking a few of the swatches and selecting a different tool on the left, but all swatches were replaced with new hues. What does locking really do?
each template on the left is a separate thing basically. When you lock a color, then click "generate", the next palettes take your locked colors into account - if you lock the background to white, then click generate, the foreground colors should make sense for the white background.
I got that after commenting but would prefer if the locked swatch stayed in place so I can see how the hue (or a combination of hues) works across different media
This is incredible. I've been struggling with a color palette for my most recent project so I uploaded a screenshot of it, clicked generate and I instantly got a really nice palette! Amazing work - thank you.
Wow, nice job!
I clicked around and got the same color palettes on multiple occasions. Is that because I have to give the system some input for it to work?
Your websites are fantastic, by the way. Google and/or NASA should contact you. ;)
I clicked around and got the same color palettes on multiple occasions. Is that because I have to give the system some input for it to work?
Your websites are fantastic, by the way. Google and/or NASA should contact you. ;)
Try increasing the "creativity" slider in the options. Setting it to a higher value will increase diversity at the cost of accuracy. (This controls the sampling temperature like in language models)
When I use the tool myself, I usually start with the transformer model to lock the first few colors, then switch to the diffusion model if I see a repeat. When all colors are locked except one or two, the "random" mode starts working if you still need more variations.
When I use the tool myself, I usually start with the transformer model to lock the first few colors, then switch to the diffusion model if I see a repeat. When all colors are locked except one or two, the "random" mode starts working if you still need more variations.
Thanks. Still browsing your photo galleries, just beautiful.
This is amazing! I love it! Actually needed this kind of thing right now to figure out a color scheme for a website.
If able, would it be possible to add Material-UI as a section similar to the Bootstrap section?
If able, would it be possible to add Material-UI as a section similar to the Bootstrap section?
OP: Did the machine learning application come first, or the cool 3D point cloud on the landing page?
(I almost didn’t click through, got distracted by touch-rotating it on my iPad)
(I almost didn’t click through, got distracted by touch-rotating it on my iPad)
I did the 3d point cloud just to visualize the data at first. Then after I thought it made a pretty cool landing page.
Right on. I also think it makes a pretty cool landing page
What a great idea. My intuition for matching colours like this isn't very strong, so this is really helpful for mocking things up. Thanks for sharing.
I have to say I’m very impressed with the extent to which you explored this idea, explained it and then applied to a very usable and useful service.
Well done!
Well done!
I'd love to see this with more colors so I could generate syntax highlighting schemes with it :D
( the api caps out at 12 colors )
Is there a way to run this locally?
( the api caps out at 12 colors )
Is there a way to run this locally?
Nice work.
Few days back I was trying to decide a colr theme which woul work for both light and dark mode. Would this be able to solve that ?
Few days back I was trying to decide a colr theme which woul work for both light and dark mode. Would this be able to solve that ?
Page crashes on my phone. Safari.
That is a ton of effort that went into a free service.
What is your plan for huemint?
Would be cool if for the website versions it could generate a dark mode scheme.
you can do this by setting the background to black, then lock it. When you click generate again, the subsequent palettes will then take the dark background into account.
there's also a dark mode preset in the (gear icon) menu.
I concede this is not totally obvious just from the UX, maybe it needs a tutorial or something...
there's also a dark mode preset in the (gear icon) menu.
I concede this is not totally obvious just from the UX, maybe it needs a tutorial or something...
Definitely use this for future projects
very cool! Thanks for sharing
love it
You can guide the ML model by locking one or more colors, then clicking generate again. (click the circular swatch on top to lock a color)