Filament•2mo ago

[v4] Colors are less saturated than the tailwind ones

Generally speaking, the filament colors are way less saturated than the tailwind equivalent. Is it by purpose? It's even worse when I try to generate a palette from the hex value:

FilamentColor::register([
    'primary' => Color::Amber, // => #E17100
]);

FilamentColor::register([
    'primary' => '#FD9A00', // => #DE7E00
]);

FilamentColor::register([
    'primary' => Color::Amber, // => #E17100
]);

FilamentColor::register([
    'primary' => '#FD9A00', // => #DE7E00
]);

I understand colors are transformed into oklch from hex, and it can't generate the exact same color. But the problem is no matter the colors I try to use, the result is always too much pastel. Another example with Indigo-500:

FilamentColor::register([
    'primary' => Color::Indigo, // => #7C86FF
]);

FilamentColor::register([
    'primary' => '#615FFF', // => #818BFF
]);

FilamentColor::register([
    'primary' => Color::Indigo, // => #7C86FF
]);

FilamentColor::register([
    'primary' => '#615FFF', // => #818BFF
]);

18 Replies

awcodes•2mo ago

Not sure exactly where “pastel” comes into play with your examples but filament does some extra processing to make the text and background are ADA compliant.

charlieOP•2mo ago

yeah, I've read that. I noticed the button text is now not necessary white.

Dan Harrin•2mo ago

theres no way we can perfectly generate an entire palette from one shade, we just use the hue from that color to generate a balanced palette. the color you input is not necessarily 500 so your examples dont make sense as a comparison while these examples might be less saturated, others might not if you dont like the color palette filament generates, just pass your own and dont use filaments, there is plenty of customisation there

charlieOP•2mo ago

My remark was not for my personal needs, but more to make the framework even better 🙂 And I was also curious about how it works behind the scene. In my case, I'm using the Filament ColorPicker in a Settings page to define Filament theme, so it would have been convenient to use the Filament palette generator 😉 Maybe it would help if the ColorPicker could generate oklch... Is it planned or maybe something to contribute for?

Dan Harrin•2mo ago

I don't think passing in an oklch color will make it more accurate I don't think the color picker library we use supports it yet either, and I think its actually pretty difficult to create an oklch picker

charlieOP•2mo ago

this tool gives me exactly what I want, so I know that's possible: https://www.uihue.com/ It seems it is using the Colorjs.io library (DeltaE 2000 algorithm) to iterate through the Tailwind CSS colors and find the nearest match I'll look if it could be translated to php

Dan Harrin•2mo ago

I think the method they use probably involves using the values of the nearest Tailwind color instead of taking an average, which is pretty clever but I am a little worried about the performance hit of doing that on each request which is why avoided too much complexity in our implementation

charlieOP•2mo ago

of course, that could be an intensive process...

charlieOP•2mo ago

I just released a package using this approach. Didn't do any benchmarks, but the palette generated seems very close to what I get from uihue. https://github.com/CharlieEtienne/palette-generator

GitHub

GitHub - CharlieEtienne/palette-generator: A PHP library for genera...

A PHP library for generating tailwind v4 color palettes from a hexadecimal color - CharlieEtienne/palette-generator

awcodes•2mo ago

Good luck maintaining that array. 😂 Looks good though.

charlieOP•2mo ago

thanks! I think it doesn't need to change until tailwind completely change the colors Dan, if you're interested in a benchmark, it is 18x slower than Filament implementation (without caching)

awcodes•2mo ago

I wonder if the problem is the color conversion or the script that handles the ADA of the text over a background color. Not sure.

charlieOP•2mo ago

one of the problems is that colors in tailwind are not just linear lightness change over different hues: it has different scales for lightness, chroma and hue for each shade (see the picture) So derivating from a fixed scale is not going to produce the more accurate colors.

charlieOP•2mo ago

awcodes•2mo ago

Hmm, ok, but is the problem tailwind, oklch or something else? Just wondering if tailwind went to oklch too early.

charlieOP•2mo ago

no, I think they started with oklch to have something easier to automate, then customized everything to have the perfect colors 😄 I would say oklch gives you the best tools possible (you can't generate perfect matching across different lightness with HSL, and even Lab), and tailwind made it harder because they tweaked it to have exactly they wanted. But IMO we can't have better palettes than tailwind's in 2025. The v4 colors are fantastic. Unfortunately they don't use a mathematical formula you can apply to have the same thing. Regarding Filament, I don't know why the Amber-500 (default primary) is darker than the original Amber-500... Maybe because of ADA...

Dan Harrin•2mo ago

when you say that filaments amber-500 is darker than the original, do you mean that when you generate a palette that happens, or when you use Color::Amber that happens? It is hard-coded in the latter, so it should be identical Contrast is never calculated when generating a palette. It is only calculated when deciding which shade to pick for a background color on a particular element

charlieOP•2mo ago

forget what I said, I was looking on something that is 600 not 500 😁 Default colors are perfect! The problem is only on generated palettes.

Gaming

Programming

[v4] Colors are less saturated than the tailwind ones

Did you find this page helpful?