Well I still can’t help myself. On the main branch we now have a “Scale” option that generates a palette based upon the Matt Ström-Awn paper.
kip
ex_cldr Core Team
kip
ex_cldr Core Team
One last cool thing for today (well, I think it’s cool anyway). Now you can check the gamut bounds of various colospaces with your palette plotted on it. You can check which colourspaces you palette will fit into. By default it’s showing the three common ones (sRGB, Display P3 and Rec 2020). You can even export the gamut map to an SVG to include in design documents.
Subject to feedback I’ll release this to hex by morning UTC+1 timezone.
5
kevinschweikert
Oh wow! I just checked in here and @kip is on fire! One thing i noticed in the screenshots that it’s using the old Tailwind 3 config in a JSON. The new Tailwind 4 moved everything into CSS with @theme. See Theme variables - Core concepts - Tailwind CSS
@import "tailwindcss";
@theme {
--color-mint-500: oklch(0.72 0.11 178);
}
1
kip
ex_cldr Core Team
I wasn’t sure which way to go (not my domain expertise). So Tailwind 4 configuration would be considered more appropriate/relevant?
(and thanks)
2
kevinschweikert
kip
ex_cldr Core Team
I’ve released color 0.7.0 that updates the Tailwind output of the vialuzaer to Tailwind 4.0
I’ave alos provisioned a public version of the palette visualizer at: https://elixir-color.fly.dev/
That means anyone can use the palette generator and gamut visualizer without having to install the library.
2
tcoopman
Again, that looks awesome.
Something weird I just noticed, I tried some different colours and for this one the results are a bit weird:
The seed is 300, but 400 is noticeable dimmer than 300. Not sure what’s going on there?
0
kip
ex_cldr Core Team
That was most interesting. And you’re right, when a seed like #ff9900 snaps to stop 300, there’s a big lightness jump from 300 (L=0.772) down to 400 (L=0.648) — a gap of 0.124 — while adjacent generated stops only differ by ~0.08. The seed at 300 is brighter than the generated 300 would have been, so 400 looks noticeably dimmer by comparison.
This is the a nap-to-seed discontinuity - we replace stop 300 with the exact seed colour, but the seed’s lightness doesn’t match the curve at that position. The fix is to not snap when the seed’s lightness differs too much from the generated stop’s lightness, or to adjust the adjacent stops to smooth the transition.
Working on it, but its UTC+1 where I am and its time for sleep (perhaps a couple of beverages didn’t help!).
Will fix in the morning and publish an update. Thanks again very much for trying it out, and reporting the issue.
1
lud
That’s great !
Could you also make the seed not reset when changing from Tonal / Theme / Contrast / etc ?
0
kip
ex_cldr Core Team
I’ve published color version 0.8.0 and redeployed the visualizer. Let me know if that looks better?
I’ll take care of the navigation / seed preservation issue in my morning (hope thats ok).
0