simeongriggs/tints.dev

10-color Palette Generator and API for Tailwind CSS

tints.dev

Palette Generator and API for Tailwind CSS

Visit tints.dev to use the GUI and API.

Read the 2.0.0 launch blog post to learn how it works.

Credits

Created by Simeon Griggs

Contributions by kevnk

tints.dev's Issues

[Feature Request] Accept Luminance or Lightness in API Call

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

[Feature Request] consistent perceptual luminance

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.

License Question

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

Change default stop value in API

Is it possible to configure the stop value in the API URL?

Could we export the pallets as HSL or others?

There are more colors available in the near future.
https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/

Recent update unmoors the stops from the target lightness

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?

Feature request: Add a feature to auto-detect shade from input color

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.

Add option to export to tailwind config and use css vars

something like this

{
  "colors": {
    "purple": {
      50: "var(--purple-50)",
     */......./*
      950: "var(--purple-950)"
    }
  }
}

[Feature Request] - Convert Tints into a simple PWA

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

Feature request: Add additional color stops

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

Colors are not matching with tailwind colors

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

Adding 50 variants

Hi,

Can you add a 50 variants to follow TailwindCSS palette (https://tailwindcss.com/docs/customizing-colors#color-palette-reference)?

Thank you, Florian

API throws CORS 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:

Weighted Distribution

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.

UI Examples with Generated Colors

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.

Color selection crashes app

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

Reproduction

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 🤷

tints.webm

Shade 50 hex code is broken and sometimes the colour gets a little mixed up too.

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.

I'm selecting Purple and its outputting red-ish colors?

Base color not included

This is the second tool I checked with a similar issue today so maybe there was a recent breaking change in a library somewhere.

When I enter #285e97 into the tool, that color is changed. Is this happening just for me?

Request: Create NPM package

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.

Share Link does not retain color shade selection

ex: https://www.tints.dev/blue/1B212C. I've set that to the 900 shade, but it's not retained when sharing the link.

Updating the Hue/Saturation/Lightness/Luminance options doesn't update sample code

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.

Idea: allow provided color to be another swatch than 500

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.