Joey Cherdarchuk - Obumbratta
@obumbratta.com
It's the standard naming convention for tailwind colours, and while I don't use tailwind, I do like the naming convention. I think it started with 100 to 900 like the font weights and then in old school coding with BASIC fashion they added a 50 and 950 when moving to 11 colours.
January 9, 2026 at 8:23 PM
It's the standard naming convention for tailwind colours, and while I don't use tailwind, I do like the naming convention. I think it started with 100 to 900 like the font weights and then in old school coding with BASIC fashion they added a 50 and 950 when moving to 11 colours.
Thanks, Frank. It was quite fun to work on.
January 8, 2026 at 11:20 PM
Thanks, Frank. It was quite fun to work on.
You'd have to look at how chroma.js does it's interpolation for how it handles out of gamut, but the short answer is no the tool does not provide any warnings for this.
January 8, 2026 at 5:53 PM
You'd have to look at how chroma.js does it's interpolation for how it handles out of gamut, but the short answer is no the tool does not provide any warnings for this.
Thanks to chroma.js it looks like the answer to the first question is yes
January 8, 2026 at 5:53 PM
Thanks to chroma.js it looks like the answer to the first question is yes
No, that sounds like a lot of work.
January 7, 2026 at 11:37 PM
No, that sounds like a lot of work.
No I hadn't seen David's work before. Looks pretty cool.
January 7, 2026 at 11:34 PM
No I hadn't seen David's work before. Looks pretty cool.
If ever I can be of service to you and the phenomenal work you create, count me in.
January 7, 2026 at 6:42 PM
If ever I can be of service to you and the phenomenal work you create, count me in.
Let me know if there are any egregious bugs. If you think of something to make it even better, you can also let me know, but I've already put more time into this than I care to admit, so don't get your hopes up that I'll do anything about it.
Happy colour picking
Happy colour picking
January 7, 2026 at 4:20 PM
Let me know if there are any egregious bugs. If you think of something to make it even better, you can also let me know, but I've already put more time into this than I care to admit, so don't get your hopes up that I'll do anything about it.
Happy colour picking
Happy colour picking
There's a few other features salted in there, like shift clicking a swatch to pop that colour into the inputs, some limited undo functionality, and automatically handling diverging palettes.
January 7, 2026 at 4:20 PM
There's a few other features salted in there, like shift clicking a swatch to pop that colour into the inputs, some limited undo functionality, and automatically handling diverging palettes.
And sample UI gives you a dynamic chart and some generic app ui examples.
January 7, 2026 at 4:20 PM
And sample UI gives you a dynamic chart and some generic app ui examples.
Sample visuals lets you see your colours in data viz action.
January 7, 2026 at 4:20 PM
Sample visuals lets you see your colours in data viz action.
Contrast ratios give you contast for each colour against white, your lightest colour, your darkest colour, and black, letting you know which combinations don't pass WCAG guidelines. Clicking on any one will take you to my favourite two-colour contrast ratio tool with those colours pre-input.
January 7, 2026 at 4:20 PM
Contrast ratios give you contast for each colour against white, your lightest colour, your darkest colour, and black, letting you know which combinations don't pass WCAG guidelines. Clicking on any one will take you to my favourite two-colour contrast ratio tool with those colours pre-input.
Again, careful, just because the tool doesn't show a colourblind warning doesn't mean your palette is safe. Bad inputs which aren't that discernible to begin with won't trigger alarms.
January 7, 2026 at 4:20 PM
Again, careful, just because the tool doesn't show a colourblind warning doesn't mean your palette is safe. Bad inputs which aren't that discernible to begin with won't trigger alarms.
Colour blindness does its best to simulate the deficiencies. Warnings pop up on the items where the colours are "significantly" less discernible than they are in the non-colourblind set, but beware the thresholds are kind of arbitrary, so use your best judgement.
January 7, 2026 at 4:20 PM
Colour blindness does its best to simulate the deficiencies. Warnings pop up on the items where the colours are "significantly" less discernible than they are in the non-colourblind set, but beware the thresholds are kind of arbitrary, so use your best judgement.
I like it for when you might want to extend the colours beyond the two at your ends. You can make a visual estimate of where you'd like it to be in a given colour space. Just click and it'll copy the hex of the pixel you were on and you can paste it into your input if you'd like.
January 7, 2026 at 4:20 PM
I like it for when you might want to extend the colours beyond the two at your ends. You can make a visual estimate of where you'd like it to be in a given colour space. Just click and it'll copy the hex of the pixel you were on and you can paste it into your input if you'd like.
This does it's best to plot the colour on a map of the colour space. Unfortunately we only have two dimensions, so the x-axis has to do double duty. Its mainly shows you hue, and does some awkward saturation interpolation.
January 7, 2026 at 4:20 PM
This does it's best to plot the colour on a map of the colour space. Unfortunately we only have two dimensions, so the x-axis has to do double duty. Its mainly shows you hue, and does some awkward saturation interpolation.
In addition to perceptual lightness there are a few other things you can view. The most ambitious (and experimental) of which is the colour plot.
January 7, 2026 at 4:20 PM
In addition to perceptual lightness there are a few other things you can view. The most ambitious (and experimental) of which is the colour plot.
Key for me was being able to export in array, CSS vars, or figma bulk colour style creator plugin formats. It'll choose (sometimes poorly) names for your css vars / figma if you don't give it one. You can also paste the SVG directly into figma to create nice style guides.
January 7, 2026 at 4:20 PM
Key for me was being able to export in array, CSS vars, or figma bulk colour style creator plugin formats. It'll choose (sometimes poorly) names for your css vars / figma if you don't give it one. You can also paste the SVG directly into figma to create nice style guides.
You can also choose a few other options. "Intelligent" is a bit of a misnomer, but sometimes that option does a better job positioning the colours and keeping them in the palette. Play around with the toggles to see what works for your use case.
January 7, 2026 at 4:20 PM
You can also choose a few other options. "Intelligent" is a bit of a misnomer, but sometimes that option does a better job positioning the colours and keeping them in the palette. Play around with the toggles to see what works for your use case.
It defaults to showing you perceptual lightness, since that is usually the most important differentiator when associating a colour with values. And it let's you toggle correcting lightness across the interpollation
January 7, 2026 at 4:20 PM
It defaults to showing you perceptual lightness, since that is usually the most important differentiator when associating a colour with values. And it let's you toggle correcting lightness across the interpollation
You can drag the input swatches around to reorder them. Or click on them to adjust their colours in a colour picker, or quickly delete one.
January 7, 2026 at 4:20 PM
You can drag the input swatches around to reorder them. Or click on them to adjust their colours in a colour picker, or quickly delete one.
I imagine you'll find a lot that it doesn't handle, but it should manage comma or space delimiting (but not both at once), with or without quotes and #'s and even full CSS vars.
January 7, 2026 at 4:20 PM
I imagine you'll find a lot that it doesn't handle, but it should manage comma or space delimiting (but not both at once), with or without quotes and #'s and even full CSS vars.
The input attempts to handle the delimiting for you so you can paste things directly in from whatever you're working on and it'll do it's best to sort it out.
January 7, 2026 at 4:20 PM
The input attempts to handle the delimiting for you so you can paste things directly in from whatever you're working on and it'll do it's best to sort it out.