51–60 of 83 posts
Looks useful for gradients. Strange that nobody mentions Paletton. It's my go to tool when picking colors: https://paletton.com/ You start with the base, and then also get gradients to adjacent colors in the palette. Especially the triad and tetrad ones are useful.
Mine is a MS WIndows application with variable export functionality: https://palettewb.com
This is amazing. Until now I used https://colorbox.io which first originated at Lyft before becoming an independent project.
I use this one: https://color.adobe.com/fr/create/color-wheel/
Nice! I have a color tool I'm building too: https://divmagic.com/tools/color-converter
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.
Do u mind sharing some code?
2. At runtime, I use the material-color-utilities library[1] to generate a whole color theme based on that one root color. The applyTheme method puts the theme into CSS variables on the body like --md-sys-color-primary: #c72320; and so on for each color token.
3. In tailwind.config.js I set the colors to point to those variables, for example "primary": "var(--md-sys-color-primary)", and so on for the rest of the colors.
Using this approach I can remap colors at runtime for whole subtrees by simply overriding the CSS color variables.
[1] https://www.npmjs.com/package/@material/material-color-utili...
I built one recently. Much simpler and more opinionated, but can generate a Tailwind configuration: https://ghola.dev (desktop/ipad is best) Long read on how it was built with web components: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...
I love playing with color. This is another nice tool. Here are few other good alternatives/otpions; - https://adevade.github.io/color-scheme-generator/ - https://colorcolor.in (do not generate tailwind directly but a well done one) - http://colormind.io - https://uicolors.app/create
I like https://huemint.com/