
Show HN: AI color palette generator for Tailwindcss - manceraio
https://tailwind.ink/
======
deltron3030
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
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
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.

~~~
sillysaurusx
I gave up trying to reason about color models when I realized the CIE model
wasn't determined rigorously and empirically. A full critique is beyond the
scope of 3AM, but, it's kind of fascinating to go back to the roots of color
models and read about how precisely they came up with them. Remember to turn
on your skepticism when you do.

"X is a sphere" has to be reconciled with "What are the chances that our
visual system would evolve into a _perfect_ sphere with no flaws?"

For some reason, people are so determined to turn complicated phenomena into a
pure and simple form. Even astronomy wanted to believe that orbits were
circles, since circles are clearly more perfect. But nature isn't perfect; it
simply exists.

~~~
trevyn
Certain aspects of nature can be modeled extremely well with simple formulae.

Orbits are _damn_ close to perfect ellipses.

Likewise, human perception of color luminance could be _represented_ by a
simple model where cross-human perceptual variation results in a damn close to
perfect sphere.

Just like the actual orbital parameters for a given body are described by a
few constants derived from observation, the actual human perceptual parameters
(such as the constants in the CIE model) are likewise derived through
observation.

~~~
sillysaurusx
Being close to something doesn't make it that thing. The orbits are close to
perfect ellipses, but Mercury's orbits isn't a perfect ellipse – it required
Einstein's modification to understand the discrepancy.

Human vision isn't even remotely in the same ballpark as "close to an
ellipse". That idea is a very powerful, very persistent illusion, and as far
as I'm concerned it will be productive to break it whenever possible.

------
zxcvbn4038
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
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-
colo...](https://tailwindcss.com/docs/customizing-colors#default-color-
palette)

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.

------
rutierut
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
> 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
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-
exte...](https://tailwindui.com/documentation#how-tailwindcss-ui-extends-
tailwind)

------
hackerman123469
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.

~~~
sillysaurusx
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/...](https://raw.githubusercontent.com/dmarman/dmarman.github.io/d26dec580a4f89860fbc4873fbda9f7574dff530/src/models/model.js)

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.

~~~
kuu
> 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

------
swyx
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#col...](https://github.com/sw-yx/spark-
joy/blob/master/README.md#color-picking)

~~~
nateweiss
Great resource, thank you for curating this list!

~~~
swyx
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)

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

~~~
manceraio
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.

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

