I would love to see such tools have some accessibility DX built-in. The idea is to define the color palette in such a way that we know whether a color combination is accessible just by looking at the color name. For example, using the USWDS design system, I know that blue-30 on gray-80 is accessible (WCAG AA), because the difference between both values is 50+.
The concept of color contrast isn't niche, but building your color palette around the WCAG contrast algorithm kind of is. It's useful for checking boxes if you're required to do WCAG audits, but is neither necessary nor sufficient to ensure actual users with disabilities are able to read your text.
The wcag color contrast algorithm isn't great (and there is a proposal for a better one), but sufficient color contrast is necessary for a variety of visual conditions. That it's not good enough for some doesn't mean it's not more accessible than not doing it at all though.
A while back, a lot of Big Tech platforms (most notably GitHub) switched their "should we put black or white text on this user-supplied background color" algorithm to use the WCAG contrast formula. Doing so caused a lot of white-on-red badges to flip to black-on-red.
Many users reported this was harder to read, even those without the form of color blindness which makes black and red hard to distinguish. Whether making this change was really "more accessible" than doing nothing is therefore pretty debatable, but it definitely helped them pass their WCAG audits.
This brings up another interesting point I haven't considered before: how to make things not only functional, but beautiful for folks with different kinds of color vision. I wonder if there's any research into the aesthetics of design for including color blind folks.
Really I'm just surprised they haven't done the math on those color blindness types and just added that to the WCAG algorithm. Maybe someone has already?
EDIT: too late to edit the prior comment. Streamlit is one in particular where several people have requested for accessibility to be added to the roadmap, but it is continually declined. However, given how companies are getting sued for gaps in accessibility on websites, as well as public service providers, its hard to want to keep something in the tech stack that is unintentionally hostile to accessibility patterns and standards.
For a long time, I've been on the lookout for the perfect color tool, but so far haven't found it yet. Something that lets you get as advanced as what's presented by this library: https://colorjs.io/
Colour Science is one of the more serious projects I know of, and more or less lets you get as advanced as you want. Used by film professionals among others. https://www.colour-science.org/
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'm not entirely sure what I'm looking for, to be honest. I have this vague feeling that I'll know it when I see it. A lot of tools are attractive and provide unique features, but I don't think I've ever come across one where I immediately say to myself "yes! this is going to be my day-to-day professional tool." Nothing has quite hit that mark with me.
If you’re up for talking about it, I wouldn’t mind hearing what color things you do day to day, and what kinds of things your current tools aren’t able to do, or don’t do very well. What’s on your wish list for a color tool?
That sounds plausible, yeah. The Color object is space-agnostic, so you can take any set of colors and interpolate their lightness/luminosity/value using any color space you prefer.
I also haven't checked their code but it reminds me of the awful "smooth scrolling" trend that was popular on a lot of websites a few years back and implemented with unperformant synchronous JS attached to an onScroll event with no denouncing. I just assumed it was the same on that site.
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.
colormind.io is great! They have a free API you can use to get random color palettes.
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].
do you know a tool that uses OKHSL/V instead of hex? Like colorcolor.in uses such a color space, but then all the overlays are still in hex, so there is this break between input and output
You meant the "Overlay" (bottom-left) to have HSL option too? Btw, if you open an issue/request with the right context, Saneef will look into it. I will nudge him if that makes sense.
Yes, so if I start a palette at Lightness 100 and end at Lightness 0, I should see these numbers in the resulting colors
In this specific example the starting color is still not ff, but f9 due to some easing interference (though I'd expect a function x=0 y=0 to not do anything for the very first color), but even then you still see a clear connection, and if you had 10 steps you'd see ~10 lightness point increase in each palette color
I like what you built. I think calling something a palette generator that only does one color at a time isn't "correct". Or at least not what I am looking for. I want something like yours that builds out a suite of colors for an app.
This is great. I just did a better job generating a palette in under a minute, starting from a logo, than I did manually in 30 minutes last time I needed to do it. Nice work!
Love it. Thanks so much to the author for making this. I wonder what's the easiest way how to sync these colors with Figma. Perhaps pro designers use some plugin for generating this kind of colors and exporting them to Tailwind?
Figma's approach to color is so frustrating and bonkers that I don't even bother. I've tried to make it work several times, and it's just so manual and tedious that I give up.
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.
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.
Great tool, very useful. I use it to generate a color palette from a single color, then take its output and feed it into https://palettte.app to manually adjust each one.
Hey! I'm the creator of tints.dev – the "brand" set of colours is what I use on my blog simeongriggs.dev and yeah I used this tool to put in the `500` swatch value and generate the rest :)
Nice idea. Would be even better if you could manually adjust several of the values and it would adjust the missing ones in between. Now you can only base it on one single starting color.
I am a full stack dev and I do not know nothing about colors but I use tailwind css.
Where could I study how to choose colors and better use this tool?
I once wrote a blog post about this (niche) concept: https://darekkay.com/blog/accessible-color-palette/