README

从单个基础颜色（可以是十六进制值、HSL或RGB）生成TailwindCSS调色板（范围从50到900）。

使用HSL颜色模型和基础颜色的亮度来生成步进颜色，通过增加（或减少）亮度来生成步进颜色（并考虑边界阈值）。

安装

通过运行以下命令安装它

composer require lukapeharda/tailwindcss-color-palette-generator

使用方法

首先，导入所需的命名空间和类

use LukaPeharda\TailwindCssColorPaletteGenerator\Color;
use LukaPeharda\TailwindCssColorPaletteGenerator\PaletteGenerator;

然后创建您的基准颜色

// from hex
$baseColor = Color::fromHex('#ffff00');

// or from RGB
$baseColor = Color::fromRgb(255, 255, 0);

// or from HSL
$baseColor = Color::fromHsl(60, 100, 50); // or $baseColor = Color::fromHsl(0.6, 1, 0.5);

最后，使用基准颜色创建一个调色板

$paletteGenerator = new PaletteGenerator;
$paletteGenerator->setBaseColor($baseColor);
$palette = $paletteGenerator->getPalette();

生成的$palette将是一个数组，键是TailwindCSS颜色步长，值是Color对象

$palette = [
    50 => Color,
    100 => Color,
    200 => Color,
    300 => Color,
    ...
];

然后您可以遍历它以生成CSS变量或按需使用

foreach ($palette as $key => $color) {
    echo '--color-primary-' . $key . ': #' . $color->getHex() . ';';
}

在您的tailwind.config.js文件中扩展颜色设置并添加primary颜色调色板

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    50: 'var(--color-primary-50, #F5F3FF)',
                    100: 'var(--color-primary-100, #EDE9FE)',
                    200: 'var(--color-primary-200, #DDD6FE)',
                    300: 'var(--color-primary-300, #C4B5FD)',
                    400: 'var(--color-primary-400, #A78BFA)',
                    500: 'var(--color-primary-500, #8B5CF6)',
                    600: 'var(--color-primary-600, #7C3AED)',
                    700: 'var(--color-primary-700, #6D28D9)',
                    800: 'var(--color-primary-800, #5B21B6)',
                    900: 'var(--color-primary-900, #4C1D95)',
                }
            }
        }
    }
}

之后，您可以使用您的颜色作为常规CSS Tailwind类，例如text-primary-100或bg-primary-300。

默认值

PaletteGenerator类有一些可配置的选项，设置为合理的默认值。

基准颜色步长值

默认情况下，基准颜色步长值是500。这意味着调色板中将生成5个更亮和4个更暗的颜色。

您可以通过在PaletteGenerator对象上调用setBaseValue方法来更改它

$paletteGenerator->setBaseValue(400);

将基准值设置为400，则将生成4个更亮和5个更暗的颜色。

边界阈值

默认情况下，生成的最亮颜色亮度值为90%，最暗颜色亮度值为10%。

您可以通过在PaletteGenerator对象上调用setThresholdLightest和setThresholdDarkest方法来更改此设置

$paletteGenerator->setThresholdLightest(80); // or $paletteGenerator->setThresholdLightest(0.8);
$paletteGenerator->setThresholdDarkest(20); // or $paletteGenerator->setThresholdDarkest(0.2);

颜色步长

默认情况下，使用TailwindCSS 2.x颜色步长范围（从50到900）。

您可以通过在PaletteGenerator对象上调用setColorSteps方法并传入一个包含步长值的数组来覆盖它

$paletteGenerator->setColorSteps([100, 200, 300, 400, 500, 600, 700]);

待办事项

计划开发不同的颜色生成策略。