tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

Color Scheme Generator for Tailwind #128

Open adevade opened 6 years ago

adevade commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

Thanks for this 🔥

kiru commented 5 years ago

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

adevade commented 5 years ago

@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 commented 5 years ago

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

oliverpool commented 4 years ago

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!)