Tailwind color palette generator

I would love to see such tools have some accessibility DX built-in. The idea is to define the color palette in such a way that we know whether a color combination is accessible just by looking at the color name. For example, using the USWDS design system, I know that blue-30 on gray-80 is accessible (WCAG AA), because the difference between both values is 50+.<p>I once wrote a blog post about this (niche) concept: <a href="https:&#x2F;&#x2F;darekkay.com&#x2F;blog&#x2F;accessible-color-palette&#x2F;" rel="nofollow">https:&#x2F;&#x2F;darekkay.com&#x2F;blog&#x2F;accessible-color-palette&#x2F;</a>

I love playing with color. This is another nice tool. Here are few other good alternatives&#x2F;otpions;<p>- <a href="https:&#x2F;&#x2F;adevade.github.io&#x2F;color-scheme-generator&#x2F;" rel="nofollow">https:&#x2F;&#x2F;adevade.github.io&#x2F;color-scheme-generator&#x2F;</a><p>- <a href="https:&#x2F;&#x2F;colorcolor.in" rel="nofollow">https:&#x2F;&#x2F;colorcolor.in</a> (do not generate tailwind directly but a well done one)<p>- <a href="http:&#x2F;&#x2F;colormind.io" rel="nofollow">http:&#x2F;&#x2F;colormind.io</a><p>- <a href="https:&#x2F;&#x2F;uicolors.app&#x2F;create" rel="nofollow">https:&#x2F;&#x2F;uicolors.app&#x2F;create</a>

I built one recently. Much simpler and more opinionated, but can generate a Tailwind configuration: <a href="https:&#x2F;&#x2F;ghola.dev" rel="nofollow">https:&#x2F;&#x2F;ghola.dev</a> (desktop&#x2F;ipad is best)<p>Long read on how it was built with web components: <a href="https:&#x2F;&#x2F;www.naildrivin5.com&#x2F;blog&#x2F;2024&#x2F;01&#x2F;24&#x2F;web-components-in-earnest.html" rel="nofollow">https:&#x2F;&#x2F;www.naildrivin5.com&#x2F;blog&#x2F;2024&#x2F;01&#x2F;24&#x2F;web-components-i...</a>

This is great. I just did a better job generating a palette in under a minute, starting from a logo, than I did manually in 30 minutes last time I needed to do it. Nice work!

Love it. Thanks so much to the author for making this. I wonder what&#x27;s the easiest way how to sync these colors with Figma. Perhaps pro designers use some plugin for generating this kind of colors and exporting them to Tailwind?

This is a nice tool. As another approach that I use in my codebases is I define the color palette with CSS variables, so my Tailwind config just points to those. Then at runtime I can plug in different color themes.

Great tool, very useful. I use it to generate a color palette from a single color, then take its output and feed it into <a href="https:&#x2F;&#x2F;palettte.app" rel="nofollow">https:&#x2F;&#x2F;palettte.app</a> to manually adjust each one.

For the &quot;brand&quot; example demo&#x27;d, is that what people tend to do for configs?<p>I thought people would simply just modify the default colors or create new variables like primary, secondary, etc..

Looks useful for gradients. Strange that nobody mentions Paletton. It&#x27;s my go to tool when picking colors:<p><a href="https:&#x2F;&#x2F;paletton.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;paletton.com&#x2F;</a><p>You start with the base, and then also get gradients to adjacent colors in the palette. Especially the triad and tetrad ones are useful.

I took me forever to find out how to apply hue shift even though I was actively looking for it.

Nice idea. Would be even better if you could manually adjust several of the values and it would adjust the missing ones in between. Now you can only base it on one single starting color.

can&#x27;t figure out how to search colors within 5 sec. im out.<p>i like <a href="https:&#x2F;&#x2F;www.color-hex.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.color-hex.com&#x2F;</a>

I am a full stack dev and I do not know nothing about colors but I use tailwind css. Where could I study how to choose colors and better use this tool?

Nice. Is there something similar for bootstrap?

What would be a good way to choose a color palette for a gradient background?

How come the oklch colors aren&#x27;t saturated like p3?

Nice!<p>I have a color tool I&#x27;m building too: <a href="https:&#x2F;&#x2F;divmagic.com&#x2F;tools&#x2F;color-converter" rel="nofollow">https:&#x2F;&#x2F;divmagic.com&#x2F;tools&#x2F;color-converter</a>

I use this one: <a href="https:&#x2F;&#x2F;color.adobe.com&#x2F;fr&#x2F;create&#x2F;color-wheel&#x2F;" rel="nofollow">https:&#x2F;&#x2F;color.adobe.com&#x2F;fr&#x2F;create&#x2F;color-wheel&#x2F;</a>

This is amazing. Until now I used <a href="https:&#x2F;&#x2F;colorbox.io" rel="nofollow">https:&#x2F;&#x2F;colorbox.io</a> which first originated at Lyft before becoming an independent project.

could use oklab color space support

Mine is a MS WIndows application with variable export functionality: <a href="https:&#x2F;&#x2F;palettewb.com" rel="nofollow">https:&#x2F;&#x2F;palettewb.com</a>

IT WAS A NICE PLAY