5 ms·

Show HN: AI color palette generator for Tailwindcss

209 points by manceraio 6y ago

hackerman123469 6y ago
So what exactly is AI about it? It just looks like a common algorithm that matches colors together and not some AI that has been trained to find matching color palettes.
- laurensr 6y ago
  The use of the term AI may generate funding ;-)
- avery42 6y ago
  According to the README [0] it's using neural networks: > It uses two neural networks to predict the full palette. The first, model.js it predicts all the shades vertically from 50-900 given a certain color as input. The second, nextModel.js predicts horizontally all the colors horizontally given a certain shade as input. [0]: https://github.com/dmarman/dmarman.github.io https://github.com/dmarman/dmarman.github.io
  - hackerman123469 6y ago
    Yeah but if you look at the code it doesn't really predict anything on trained data etc. It's not really a neural network either. It will always return the same output for the same input. There are no training datasets etc. It's literally just an algorithm that returns an output and returns the next output based on the previous output. I would have expected some dataset of colors to train a model on and then use that to generate values but there really is no actual AI. People seem to confuse a clever algorithm with AI. There's nothing inherently intelligent about what it does. It's all math.
    - manceraio 6y ago
      Well, it's doing inference with an already trained neural network. Inference will return the same result always. A training dataset is not needed once a model is trained. Of course, AI sounds better than NN and is shorter than Neural Network. If you want to check the code for the "real" NN to train the model just follow the open issue on GitHub...
    - kuu 6y ago
      > There's nothing inherently intelligent about what it does. It's all math. As any other AI algorithm. In the end, all it's curve fitting... This is an already trained NN, that's why there are no training dataset or the model does not train...
      - k__ 6y ago
        Is this maybe the difference between AI and ML? I would expect an AI to be some higher level agent (according to the agent model) that modifies its own code while it does its work. ML is done independently from the work and if you don't do it again (manually), the model won't change itself.
- manceraio 6y ago
  It uses two neural networks trained with the original tailwind palette. Here is the GitHub page with more info: https://github.com/dmarman/dmarman.github.io https://github.com/dmarman/dmarman.github.io
- sillysaurusx 6y ago
  It's effective, for one. I was surprised how good it looks. Color matching is a lot harder than it seems when you're generating palettes. "AI" may seem cheesy, but you have to remember that in the future, lots of "AI programming" is just going to become "programming." This is clearly an effective, simple way of solving the problem, and requires no clever or common algorithms. Also, what the hell is this file? Haha. https://raw.githubusercontent.com/dmarman/dmarman.github.io/d26dec580a4f89860fbc4873fbda9f7574dff530/src/models/model.js https://raw.githubusercontent.com/dmarman/dmarman.github.io/... This is awesome. The model outputs were turned into a single line of javascript which then gets evaluated by multiplying the color against all the weights. That wasn't what I was expecting, and I'm totally stealing this technique.
  - manceraio 6y ago
    yep, this line of js was rendered using Brain.js https://github.com/BrainJS/brain.js#standalone-function https://github.com/BrainJS/brain.js#standalone-function
  - kuu 6y ago
    > Also, what the hell is this file? Haha. https://raw.githubusercontent.com/dmarman/dmarman.github.io/.. https://raw.githubusercontent.com/dmarman/dmarman.github.io/.... I may be wrong, but it seems the weights of a trained NN
  - ggggtez 6y ago
    > gets evaluated by multiplying the color against all the weights. That wasn't what I was expecting This is literally just the definition of a 1 layer neural network.
deltron3030 6y ago
These kind of palettes always struggle with brighter yellows like #ffe400 because of the necessary normalization across hues to make it a full palette in first place, which of course prevents some colors to fulfill their potential (which is often at their peak chromacity). No AI can solve this problem because it's how colors work. I think it's best to keep the palette separate from the code (e.g. store palettes in an app like Sip), and not insist on the replaceability of colors across a range. E.g. instead of blue-500 use functional names like btn-color or brand-color and alias the colors that way in code.
- sillysaurusx 6y ago
  AI can solve it better than normal code can: you have to train on how humans see color. (This has been a long-standing ambition of mine, but sadly there's not yet much work or infrastructure in the field of "graphics AI." There's barely one software rasterizer. https://github.com/vahidk/tf.rasterizer https://github.com/vahidk/tf.rasterizer) The key would be to spend an absurd amount of time carefully cataloguing good colors – by hand – and training it to extrapolate from that information. That's basically how the Musnell color system was created. https://en.wikipedia.org/wiki/Munsell_color_system https://en.wikipedia.org/wiki/Munsell_color_system It's the realization that color space isn't spherical, it's not a cube, it's not any shape at all except "how humans happened to evolve." Even the term "max chromaticity" is just a reflection of the weird way our brains happen to work, not an intrinsic property of color. In that context, a universal curve fitting algorithm might be handy. Which of course is all that AI is.
  - deltron3030 6y ago
    HSLuv is a sphere: https://www.hsluv.org/ https://www.hsluv.org/ They took the CIELUV/LCH/HCL solid and compressed it into a sphere, similar to HSL on top of RGB. The L* (perceptual luminance) value is consistent across hues, it can also replace the 100/200/300 scale for design systems. But even the CIE model has flaws, chromacity is inherently linked with brightness/luminance, no color model can change that. A more saturated/chromatic color will always be perceived as more bright than a less chromatic one at the same luminance. And in order to create a palette you need normalization, which will always weed out individual color defining peaks.
swyx 6y ago
i've added it to my list of color palette generation tools - sharing in case it helps someone else https://github.com/sw-yx/spark-joy/blob/master/README.md#color-picking https://github.com/sw-yx/spark-joy/blob/master/README.md#col...
- baxuz 6y ago
  Thanks!
- nateweiss 6y ago
  Great resource, thank you for curating this list!
  - swyx 6y ago
    welcome! honestly been thinking about making it into a nicer site with previews and commentary and faving and stuff. just gotta find the time (heh, as with all side projects)
jack_riminton 6y ago
This works really well, I'll be using it on my upcoming projects :)
rutierut 6y ago
This is a lovely app but it really needs to generate grays as well. You just can't randomly drop in a color palette without changing the default TW grays. (they are pretty blue)
- nickjj 6y ago
  > You just can't randomly drop in a color palette without changing the default TW grays. (they are pretty blue) reply The Tailwind UI updated color palette at https://www.npmjs.com/package/@tailwindcss/ui https://www.npmjs.com/package/@tailwindcss/ui has true greys with no color hue. And you don't need Tailwind UI to use the updated colors (I asked Adam once). I think the plan is the updated color palette will eventually be rolled into a future Tailwind CSS update, if not already.
  - pottertheotter 6y ago
    All the colors were updated for Tailwind UI, and they are supposed to be incorporated into Tailwind CSS at some point: "During early access, the components in Tailwind UI depend on some extensions we've added to the default Tailwind CSS config (like extra spacing values, updated, colors, additional shadows, etc.) "These extensions will make their way into Tailwind itself in the future...." The bottom of Tailwind UI documentation gives more info on the color palette changes, including the new grey: https://tailwindui.com/documentation#how-tailwindcss-ui-extends-tailwind https://tailwindui.com/documentation#how-tailwindcss-ui-exte...
- manceraio 6y ago
  Yes, I also notice this. The model have some flaws. I could compensate adding some extra data points, but I wanted to train with the original palette. With the release of the new Tailwind palette I will have more data to train with and maybe it will get solved.
  - pspeter3 6y ago
    You could also try training from other palettes but it does look really good! Adding a grays would be key.
RocketSyntax 6y ago
Why doesn't the generated palette include the original color? Makes me lose faith.
- manceraio 6y ago
  Because the model doesn't overfit and that is good. You don't want your model to mimic your trainning data. Otherwise, it would performe poorly with new data.
zxcvbn4038 6y ago
This does pick some pleasing palettes but I’m not clear how they are utilized in the page. A quick scan of Tailwindscss docs shows a bit of discussion about naming colors and picking a primary and secondary color but I don’t see much discussion about the other colors in their palettes. Anyone explain?
- pottertheotter 6y ago
  Tailwind comes with a default color palette. Each color has a 9 shades (100, 200,... 900) and the colors can be used for various elements, such as background, border, font, etc. For example, you can set a border to the 500 shade indigo using the class "border-indigo-500". https://tailwindcss.com/docs/customizing-colors#default-color-palette https://tailwindcss.com/docs/customizing-colors#default-colo... You can also create your own custom colors with whatever names you want, whether color names or something like "primary" as the primary color of your theme. For each you can set shades as well.

209 points by manceraio 6y ago

So what exactly is AI about it? It just looks like a common algorithm that matches colors together and not some AI that has been trained to find matching color palettes.

laurensr 6y ago
The use of the term AI may generate funding ;-)
avery42 6y ago
According to the README [0] it's using neural networks: > It uses two neural networks to predict the full palette. The first, model.js it predicts all the shades vertically from 50-900 given a certain color as input. The second, nextModel.js predicts horizontally all the colors horizontally given a certain shade as input. [0]: https://github.com/dmarman/dmarman.github.io https://github.com/dmarman/dmarman.github.io
- hackerman123469 6y ago
  Yeah but if you look at the code it doesn't really predict anything on trained data etc. It's not really a neural network either. It will always return the same output for the same input. There are no training datasets etc. It's literally just an algorithm that returns an output and returns the next output based on the previous output. I would have expected some dataset of colors to train a model on and then use that to generate values but there really is no actual AI. People seem to confuse a clever algorithm with AI. There's nothing inherently intelligent about what it does. It's all math.
  - manceraio 6y ago
    Well, it's doing inference with an already trained neural network. Inference will return the same result always. A training dataset is not needed once a model is trained. Of course, AI sounds better than NN and is shorter than Neural Network. If you want to check the code for the "real" NN to train the model just follow the open issue on GitHub...
  - kuu 6y ago
    > There's nothing inherently intelligent about what it does. It's all math. As any other AI algorithm. In the end, all it's curve fitting... This is an already trained NN, that's why there are no training dataset or the model does not train...
    - k__ 6y ago
      Is this maybe the difference between AI and ML? I would expect an AI to be some higher level agent (according to the agent model) that modifies its own code while it does its work. ML is done independently from the work and if you don't do it again (manually), the model won't change itself.
manceraio 6y ago
It uses two neural networks trained with the original tailwind palette. Here is the GitHub page with more info: https://github.com/dmarman/dmarman.github.io https://github.com/dmarman/dmarman.github.io
sillysaurusx 6y ago
It's effective, for one. I was surprised how good it looks. Color matching is a lot harder than it seems when you're generating palettes. "AI" may seem cheesy, but you have to remember that in the future, lots of "AI programming" is just going to become "programming." This is clearly an effective, simple way of solving the problem, and requires no clever or common algorithms. Also, what the hell is this file? Haha. https://raw.githubusercontent.com/dmarman/dmarman.github.io/d26dec580a4f89860fbc4873fbda9f7574dff530/src/models/model.js https://raw.githubusercontent.com/dmarman/dmarman.github.io/... This is awesome. The model outputs were turned into a single line of javascript which then gets evaluated by multiplying the color against all the weights. That wasn't what I was expecting, and I'm totally stealing this technique.
- manceraio 6y ago
  yep, this line of js was rendered using Brain.js https://github.com/BrainJS/brain.js#standalone-function https://github.com/BrainJS/brain.js#standalone-function
- kuu 6y ago
  > Also, what the hell is this file? Haha. https://raw.githubusercontent.com/dmarman/dmarman.github.io/.. https://raw.githubusercontent.com/dmarman/dmarman.github.io/.... I may be wrong, but it seems the weights of a trained NN
- ggggtez 6y ago
  > gets evaluated by multiplying the color against all the weights. That wasn't what I was expecting This is literally just the definition of a 1 layer neural network.

deltron3030 6y ago

These kind of palettes always struggle with brighter yellows like #ffe400 because of the necessary normalization across hues to make it a full palette in first place, which of course prevents some colors to fulfill their potential (which is often at their peak chromacity). No AI can solve this problem because it's how colors work. I think it's best to keep the palette separate from the code (e.g. store palettes in an app like Sip), and not insist on the replaceability of colors across a range. E.g. instead of blue-500 use functional names like btn-color or brand-color and alias the colors that way in code.

sillysaurusx 6y ago
AI can solve it better than normal code can: you have to train on how humans see color. (This has been a long-standing ambition of mine, but sadly there's not yet much work or infrastructure in the field of "graphics AI." There's barely one software rasterizer. https://github.com/vahidk/tf.rasterizer https://github.com/vahidk/tf.rasterizer) The key would be to spend an absurd amount of time carefully cataloguing good colors – by hand – and training it to extrapolate from that information. That's basically how the Musnell color system was created. https://en.wikipedia.org/wiki/Munsell_color_system https://en.wikipedia.org/wiki/Munsell_color_system It's the realization that color space isn't spherical, it's not a cube, it's not any shape at all except "how humans happened to evolve." Even the term "max chromaticity" is just a reflection of the weird way our brains happen to work, not an intrinsic property of color. In that context, a universal curve fitting algorithm might be handy. Which of course is all that AI is.
- deltron3030 6y ago
  HSLuv is a sphere: https://www.hsluv.org/ https://www.hsluv.org/ They took the CIELUV/LCH/HCL solid and compressed it into a sphere, similar to HSL on top of RGB. The L* (perceptual luminance) value is consistent across hues, it can also replace the 100/200/300 scale for design systems. But even the CIE model has flaws, chromacity is inherently linked with brightness/luminance, no color model can change that. A more saturated/chromatic color will always be perceived as more bright than a less chromatic one at the same luminance. And in order to create a palette you need normalization, which will always weed out individual color defining peaks.

swyx 6y ago

i've added it to my list of color palette generation tools - sharing in case it helps someone else https://github.com/sw-yx/spark-joy/blob/master/README.md#color-picking https://github.com/sw-yx/spark-joy/blob/master/README.md#col...

baxuz 6y ago
Thanks!
nateweiss 6y ago
Great resource, thank you for curating this list!
- swyx 6y ago
  welcome! honestly been thinking about making it into a nicer site with previews and commentary and faving and stuff. just gotta find the time (heh, as with all side projects)

jack_riminton 6y ago

This works really well, I'll be using it on my upcoming projects :)

rutierut 6y ago

This is a lovely app but it really needs to generate grays as well. You just can't randomly drop in a color palette without changing the default TW grays. (they are pretty blue)

nickjj 6y ago
> You just can't randomly drop in a color palette without changing the default TW grays. (they are pretty blue) reply The Tailwind UI updated color palette at https://www.npmjs.com/package/@tailwindcss/ui https://www.npmjs.com/package/@tailwindcss/ui has true greys with no color hue. And you don't need Tailwind UI to use the updated colors (I asked Adam once). I think the plan is the updated color palette will eventually be rolled into a future Tailwind CSS update, if not already.
- pottertheotter 6y ago
  All the colors were updated for Tailwind UI, and they are supposed to be incorporated into Tailwind CSS at some point: "During early access, the components in Tailwind UI depend on some extensions we've added to the default Tailwind CSS config (like extra spacing values, updated, colors, additional shadows, etc.) "These extensions will make their way into Tailwind itself in the future...." The bottom of Tailwind UI documentation gives more info on the color palette changes, including the new grey: https://tailwindui.com/documentation#how-tailwindcss-ui-extends-tailwind https://tailwindui.com/documentation#how-tailwindcss-ui-exte...
manceraio 6y ago
Yes, I also notice this. The model have some flaws. I could compensate adding some extra data points, but I wanted to train with the original palette. With the release of the new Tailwind palette I will have more data to train with and maybe it will get solved.
- pspeter3 6y ago
  You could also try training from other palettes but it does look really good! Adding a grays would be key.

RocketSyntax 6y ago

Why doesn't the generated palette include the original color? Makes me lose faith.

manceraio 6y ago
Because the model doesn't overfit and that is good. You don't want your model to mimic your trainning data. Otherwise, it would performe poorly with new data.

zxcvbn4038 6y ago

This does pick some pleasing palettes but I’m not clear how they are utilized in the page. A quick scan of Tailwindscss docs shows a bit of discussion about naming colors and picking a primary and secondary color but I don’t see much discussion about the other colors in their palettes. Anyone explain?

pottertheotter 6y ago
Tailwind comes with a default color palette. Each color has a 9 shades (100, 200,... 900) and the colors can be used for various elements, such as background, border, font, etc. For example, you can set a border to the 500 shade indigo using the class "border-indigo-500". https://tailwindcss.com/docs/customizing-colors#default-color-palette https://tailwindcss.com/docs/customizing-colors#default-colo... You can also create your own custom colors with whatever names you want, whether color names or something like "primary" as the primary color of your theme. For each you can set shades as well.