Generating "better" brand's colors variations

[damsfx]

I don't think the colors generated are the best.

With amout set in percentage as actual :

https://github.com/wintercms/wn-tailwindui-plugin/blob/c757d8f0a2cabead86454326c1b1a715358e15fc/skins/tailwindui/layouts/_branding.php#L11-L19

With amout set as integer :

According to comments in phpColors.php, amout must be an integer. https://github.com/mexitek/phpColors/blob/e10e44f67632096072237ff0822674a442d4bb50/src/Mexitek/PHPColors/Color.php#L401-L408

But if the base color is already dark (or light), it results in the generation of black (or white) past a certain percentage when using integer.

$color = new Color($colorString);
return [
    'dark' => $color->darken(20),
    'darker' => $color->darken(30),
    'darkest' => $color->darken(40),
    'light' => $color->lighten(25),
    'lighter' => $color->lighten(30),
    'lightest' => $color->lighten(35),
];

This is because the phpColors library calculates the percentage to be added based on 100% of the channel but not on the remaining percentage to reach the 0% (darker) or 100% (lighter).

$hsl['L'] = ($hsl['L'] * 100) - $amount;

The trick

So I've slightly modified the shade generation to caclulate a percentage of luminance :

$color = new Color($colorString);
$luminance = $color->getHsl()['L'] * 100;
return [
    'dark' => $color->darken($luminance * 0.20),
    'darker' => $color->darken($luminance * 0.30),
    'darkest' => $color->darken($luminance * 0.40),
    'light' => $color->lighten($luminance * 0.25),
    'lighter' => $color->lighten($luminance * 0.30),
    'lightest' => $color->lighten($luminance * 0.35),
];

And I think it give better results : Maybe the amounts should be finely tuned.

Or equally spaced in the channel:

$color = new Color($colorString);
$luminance = $color->getHsl()['L'] * 100;
return [
    'dark' => $color->darken(($luminance / 4) * 1),
    'darker' => $color->darken(($luminance / 4) * 2),
    'darkest' => $color->darken(($luminance / 4) * 3),
    'light' => $color->lighten((100 - $luminance) / 4 * 1),
    'lighter' => $color->lighten((100 - $luminance) / 4 * 2),
    'lightest' => $color->lighten((100 - $luminance) / 4 * 3),
];

[LukeTowers]

I am by no means an expert in colour theory or generating colour palettes but the equally spaced option looks best to me if you'd like to submit a PR. @JosephBlythe any thoughts?

[joseph-sm]

@LukeTowers Yes agree should be equally spaced, @damsfx is definitely on the right track as using luminance over lightness / darkness yields a more varied result, maybe there is a better library to use than phpColors? Otherwise I think his solution is great!

There is a good tool here which shows off the differences https://tailwind.simeongriggs.dev/purple/A855F7

I think Tailwind actually handpicked their colours (read that somewhere) most likely generated & tweaked them, so auto generation of colour variations from user defined colours will not always be an exact science.

[damsfx]

I think Tailwind actually handpicked their colours (read that somewhere) most likely generated & tweaked them, so auto generation of colour variations from user defined colours will not always be an exact science.

Certainly, the automatic generation of color variations from user-defined colors is definitely not an exact science.
That's why I put quotation marks on "better colors".

For Tailwind I confirm, the selection of the colors in the palette was handmade.
https://tailwindcss.com/docs/customizing-colors#generating-colors

We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.