- https://adevade.github.io/color-scheme-generator/
- https://colorcolor.in (do not generate tailwind directly but a well done one)
How would you define what the perfect color tool is? I would guess like most tools that it depends entirely on the job at hand, and that maybe no one perfect tool can exist. Colour Science might be great at serious color management and perceptual measurements and conversions between standardized color spaces, but not the right tool for a web developer looking for quick & easy way to make an HSV palette generation widget (and not because Colour Science is Python, but because it’s too big and heavy of a hammer).
I’d love to find a color tool that generate tints along the same lines given an set of initial starting colors.
Does colorjs allow you to do that do you know?
It has a unique UI that I haven't seen before in similar tools, allowing you to see the relative L/C/H across all of the colors in the palette using graphs. It makes it much easier to create a palette that looks cohesive.
- https://paletton.com/ palettes with color theory and can generate the entire scheme.
- https://medialab.github.io/iwanthue/ I want hue, uses k-means to separate out colors, great for graphs and getting contrast on those.
I was using it to get random (and hopefully pleasant) color schemes awhile back when you could still run Twitter bots for my cheesy “JustTriangles” bot [1].
I once wrote a blog post about this (niche) concept: https://darekkay.com/blog/accessible-color-palette/
We will all be disabled at some point, permanently or temporarily. So many great tools are unusable due to accessibility reasons (like Streamlit!).
For example, #F00 text on an #000 background passes WCAG AA, but will be unreadable for users with a common form of color blindness: https://accessibility.psu.edu/color/colorvisiondetails/
Well put!
https://www.radix-ui.com/colors
(I work at WorkOS and Radix is an open source project of ours.)
I'm not aware of any tools though that leverage the concepts they laid out to generate new palettes.
Material 3, a pretty big spec used by Google, has a color system that works like this
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...
https://chakra-ui.com, https://ripple-ui.com, https://flowbite.com, https://tailblocks.cc, https://ui.shadcn.com, https://headlessui.com
Long read on how it was built with web components: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...
I thought people would simply just modify the default colors or create new variables like primary, secondary, etc..
You start with the base, and then also get gradients to adjacent colors in the palette. Especially the triad and tetrad ones are useful.
i like https://www.color-hex.com/
I have a color tool I'm building too: https://divmagic.com/tools/color-converter
