Visit tints.dev to use the GUI and API.
Read the 2.0.0 launch blog post to learn how it works.
Created by Simeon Griggs
Contributions by kevnk
10-color Palette Generator and API for Tailwind CSS
Home Page: https://tints.dev
Visit tints.dev to use the GUI and API.
Read the 2.0.0 launch blog post to learn how it works.
Created by Simeon Griggs
Contributions by kevnk
Firstly, this is a great tool. So thank you for this.
It is a great starting point to getting the right balance and colour scale.
I have however, noticed a few issues with the '50' shade and it seems to get a little confused.
Please see some screenshots to illustrate this.
Thought you might like to know about this in case you wish to fix it :-)
Thanks.
Sometimes you have a brand color that is lighter (or darker) than a 500 but you want to be sure it gets into the pallet. We could allow it to be set as the 400 or 600 color and let everything be generated off of that.
something like this
{
"colors": {
"purple": {
50: "var(--purple-50)",
*/......./*
950: "var(--purple-950)"
}
}
}
More of a topic of discussion: I've made a change to my local copy that instead of evenly distributing the colors on the lightness/luminance scale, it sort of bell curves them. So it looks more like this:
(Looking at this image, it may be better if we make the extremes even closer to one another...)
The reason I did this was that I wanted the two extremes to be a little closer to each other so I could use them next to each other as background colors without them being so starkly different. This also adds more contrast between the middle ones which is nice for making callouts just different enough from each other.
I'm using this to generate a palette for my site and I'm interested to see how it turns out.
Any thoughts? If you think this would be useful, feel free to copy the code.
A few days ago, I generated a palette that tried to approximate the correct lightness stops. It would "stretch" the palette to match.
But today, I generated another that doesn't try to match the same steps.
I know this was probably an error, but if not—I really liked that functionality. It got me closer to the desired output. It would also be useful if you implement #18. Thoughts?
Hi! I love the API you have for tailwind colors. I'm wondering if I'm able to use it in a side project that I eventually want to turn into a paid project. Is there a license that I need to adhere to or is this MIT and I can use it freely?
Best,
Chai
ex: https://www.tints.dev/blue/1B212C. I've set that to the 900 shade, but it's not retained when sharing the link.
First - amazing work - looks great!
One enhancement I'd love to see - as colours are added to the collection is there any way the the tints could all be matched to the same perceptual luminance - possibly using HSLuv (https://www.hsluv.org/)?
There's a good reason for doing this - design systems like Shopify Polaris (https://polaris.shopify.com/design/colors/palettes-and-roles) use HSLuv to ensure that the relationship between tints of different colours create the same contrast ratio for accessibility. The upshot of this is that you can put magenta-14 against pink/gray/yellow/ -7 and know it'll meet minimum contrast requirements.
While I'm sure there will be many requests for various things, this is a great little tool, I would argue the only thing missing is to allow a param in the API to toggle between luminance and lightness. Even if only to toggle on or off for all colors.
Outside of that, for what this is intended to do I'm not sure much more is really required. Heck I'd be satisfied with the default being Luminance as that's more consistent with Tailwind's default scale IMO.
Happy to contrib some time for this :)
Hello,
Would it be possible to create an NPM package for this instead of using the API? Would like to use this in my app for automatically creating user themes.
Would be amazing to be able to add additional color stops above and below e.g adding 25 or 950. Useful for working with legacy color pallets or non-tailwind based systems.
(love the tool btw - thanks!)
Although, the shade can be set via dropdown, it would be nice to have an option to auto-detect shade, based on input color introspection.
For example, color #141d28 is a dark bluish grey, with approximate shade of 950. Determining shade number automatically would be a nice feature.
For the reference, check Tailwind CSS Color Generator.
Awesome app! I'm facing a minor issue where selecting a color crashes the application with the following error. It's weird because I'm pretty sure this used to work before.
uV/L<@https://www.tints.dev/build/_shared/chunk-EP65UD75.js:4:19103
pa@https://www.tints.dev/build/_shared/chunk-6276REWY.js:6:23795
$r</O.useMemo@https://www.tints.dev/build/_shared/chunk-5OT5PUXO.js:1:6262
uV@https://www.tints.dev/build/_shared/chunk-EP65UD75.js:4:19016
du@https://www.tints.dev/build/_shared/chunk-6276REWY.js:6:19466
Do@https://www.tints.dev/build/_shared/chunk-6276REWY.js:8:1571
Ba@https://www.tints.dev/build/_shared/chunk-6276REWY.js:8:45628
Ua@https://www.tints.dev/build/_shared/chunk-6276REWY.js:8:39461
Vf@https://www.tints.dev/build/_shared/chunk-6276REWY.js:8:39392
qr@https://www.tints.dev/build/_shared/chunk-6276REWY.js:8:39250
Ii@https://www.tints.dev/build/_shared/chunk-6276REWY.js:8:35673
Qo@https://www.tints.dev/build/_shared/chunk-6276REWY.js:8:36474
pn@https://www.tints.dev/build/_shared/chunk-6276REWY.js:6:3250
Ka</oe/<@https://www.tints.dev/build/_shared/chunk-6276REWY.js:8:34024
Reload the page, click on the select color button, receive crash. This is using Firefox 124.
firefox-developer-edition --version
Mozilla Firefox 124.0b9
Here's a short video reproducing the issue, just in case that somehow helps 🤷
Hi, I was reading the documentation on tints.dev and I tried running some tests using the endpoint https://www.tints.dev/api/brand/2522FC. However, it throws a 404 Not Found error.
Hey, first off this is great! I've attempted to build something like this and really be struggling. The colors end up uneven or in the wrong oder. However, I'm running into cross-origin (CORS) when I attempt to use your API.
Using the example endpoint here:
https://www.simeongriggs.dev/using-the-tailwind-css-palette-generator-and-api
fetch('https://tailwind.simeongriggs.dev/api/brand/2522FC')
.then((response: any) => response.json())
.then((json: any) => console.log(json));
Here's the error received:
Thanks for this awesome tool!
I've just noticed that when you update any of the Hue/Saturation/Lightness fields or the Luminance/Lightness toggle the sample code under Paste this into your tailwind.config.js
doesn't update. It only seems to update when you edit the source swatch value.
Add PWA to Tints, this so users can install it as a "Desktop App" using the install feature of modern browsers.
Perhaps Remix PWA or something similar could help: https://github.com/remix-pwa/remix-pwa
First of all, I'd like to say thanks for putting something like this together. It may not be as good as a designer-curated palette, but it's leaps and bounds ahead of anything I can come up with!
While the color preview is nice, I feel as if it lacks a "real-world" example of these colors in use. It'd be great if there were a couple of different colorful UIs that used the generated colors so the user could get a better feel of what they'd be like in a real app.
There are more colors available in the near future.
https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/
Hi,
Can you add a 50 variants to follow TailwindCSS palette (https://tailwindcss.com/docs/customizing-colors#color-palette-reference)?
Thank you, Florian
Hey I actually tried to create function get color shades but it also didn't match up with original tailwind colors from this site
https://tailwindcss.com/docs/customizing-colors
So I took a another approach. I use tensorflow.js and train a model. here is the results
https://thejenos.github.io/ImageFilterStealer-Tensorflowjs-/color.html
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.