단일 색상에서 전체 Tailwind CSS 팔레트를 생성하는 방법

사용자가 웹사이트 스타일을 지정하기 위해 브랜드 색상을 선택할 수 있는 앱이 있습니다. 당연히 디자인에 다양한 색상 음영을 사용합니다. 어떤 곳에서는 더 밝은 색상을 사용하고 다른 곳에서는 더 어두운 색상을 사용합니다.

Tailwind CSS 색상 팔레트를 생성하는 많은 색상 생성기와 앱이 있습니다. 내가 가장 좋아하는 것 중 일부는 다음과 같습니다.

Create Tailwind CSS color families

ColorBox

Generating Colors (from Tailwind CSS docs)

문제는 간단한 UI를 원하고 사용자가 가능한 모든 음영을 선택하도록 강요한다는 생각이 골칫거리라는 것입니다.

솔루션 1. "불투명도"

공식에서는 단일(브랜드) 색상을 추가한 다음 불투명도(텍스트 불투명도 또는 배경 불투명도)를 수정하여 색상의 밝은 음영을 갖도록 제안합니다.

<h1 class="text-brand text-opacity-75">Howdy</h1>

내부적으로 Tailwind CSS는 CSS 변수를 사용하여 색상의 알파 채널(RGBA 색상 모델의 A)을 수정합니다. 이는 매우 스마트합니다. 자세한 설명을 보려면 위의 YouTube 동영상을 시청하십시오. 요점은 다음과 같습니다.

.text-brand {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 0, --tw-text-opacity);
}

이것도 괜찮고 댄디하지만 더 어두운 색도 갖고 싶을 땐 어떡하지? 더 어두운 색상으로 시작하여 더 넓은 범위를 가질 수 있습니다. 사용자에게 "더 어두운"색상을 선택하라고 말할 수 있습니까? 아니. 그럴 수 없어. 당신은해서는 안됩니다.

솔루션 2. "HSL"

이러한 이유로 저는 HSL 색상 모델(H는 색조, S는 채도, L은 밝기를 나타냄)을 사용해 왔습니다. 기본 색상의 L 값(밝기)을 변경하여 더 밝고 어두운 전체 범위에 대해 괜찮은 모양의 팔레트를 얻을 수 있었습니다.

전체 팔레트를 생성하기 위해 정확히 이것을 사용하기 위해 Tailwind CSS Color Palette Generator이라는 PHP 패키지를 작성했습니다.

기본 색상을 지정하여 팔레트를 쉽게 생성할 수 있습니다.

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

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

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

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

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

Generated$palette는 키가 Tailwind CSS 색상 단계 및 값Color 개체인 배열입니다.

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

그런 다음 이를 반복하여 CSS 변수를 생성하거나 적절하다고 판단되는 대로 사용할 수 있습니다.

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

tailwind.config.js 파일에서 색상 설정을 확장하고 brand 색상 팔레트를 추가합니다.

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

그런 다음 색상을 일반 CSS Tailwind 클래스로 사용할 수 있습니다(예: text-brand-100 또는 bg-brand-300 ).

미세 조정에 대한 설명서 및 설정을 찾을 수 있습니다here.

생성된 팔레트는 공식 Tailwind CSS 색상 팔레트만큼 훌륭하지는 않지만 신중하게 손으로 고른 것입니다.