Color Scheme Generator for Tailwind

[adevade]

Hey Tailwinders!

Just wanted to share a tool I built (mainly for my own use) to quickly generate some UI colors.

Enter a brand color (or randomize one), and you'll get a bunch of matching colors and greys. Then you can just copy the output to your tailwind.js config!

All colors (Call-To-Action, Info, Warning, Success, Danger) and greys automatically match the hue of your main brand color.

Check it out: https://adevade.github.io/color-scheme-generator/

If you have any suggestions or ideas, I would love contributions! Happy coding ❤️

[ahuggins]

@adevade This is great! I was looking for something like this. I also found 0to255.com, which can help in picking your primary color. The two together is very neat. Anyway, posting in case anyone else stumbles on this post.

[robjstanley]

Thanks for this 🔥

[kiru]

@adevade It's really nice tool! Support for the new configuration format would be nice.

[adevade]

@kiru Thank you! Yes, of course! I'll push an update later today!

EDIT: Thinking more about it, the format should still work! Just copy the values into your theme key in the new config file.

theme: {
  colors: {
    // Paste values here to replace the default color palette
  }
}

theme: {
  extend: {
    colors: {
      // Paste values here to extend and add to the default palette
    }
  }
}

[kiru]

You are right, it works! I did not realize that grouping in colors was not necessary. Thank you.

[oliverpool]

Hi,

I just found about this one: https://javisperez.github.io/tailwindcolorshades/

Which looks perfect to adjust some colors (for example if my brand is a blue that is not in tailwind palette, I can simply adjust all the blues of the tailwind config!)