Tailwind Shade Generator: 손쉬운 맞춤형 컬러 스케일

Tailwind CSS에는 세심하게 제작된 색상 팔레트가 포함되어 있습니다. 각 색상에는 50에서 950까지의 11가지 음영이 있습니다. 이는 대부분의 사용 사례를 포괄하지만 브랜드의 특정 파란색이나 회사 로고와 정확히 일치하는 보라색을 사용해야 하는 순간에는 내장된 팔레트로는 충분하지 않습니다.

이것이 셰이드 생성기가 필수적인 곳입니다. 브랜드 기본 색상, 강조 색상, 의미 색상 등 하나의 색상을 제공하면 생성기가 Tailwind CSS 구성 개체와 정확히 일치하는 형식으로 완전한 50~950 스케일을 출력하여 tailwind.config.js에 넣을 준비가 됩니다.

이 가이드에서는 Tailwind의 셰이드 시스템 작동 방식, ColorFYI의 Shade Generator를 사용하여 사용자 정의 스케일을 생성하는 방법, 다크 모드를 포함하여 이를 효과적으로 사용하도록 Tailwind를 구성하는 방법에 대해 설명합니다.

Tailwind의 셰이드 시스템 작동 방식

Tailwind의 색상 척도는 11단계 숫자 시스템을 기반으로 구축되었습니다.

50  100  200  300  400  500  600  700  800  900  950

각 단계는 지각적 밝기 수준을 나타냅니다.

• 50은 가장 가볍습니다. 흰색에 가깝고 약간의 색상만 있을 뿐입니다.
• 500은 "순수한" 색상입니다. 채도가 완전히 높고 중간 정도의 밝기입니다.
• 950은 가장 어둡습니다. 거의 검은색에 가까운 짙은 색조입니다.

숫자는 임의적이지 않습니다. 그들은 가벼움의 지각적 점프를 대략 균일하게 만들기 위해 간격을 두고 있습니다. 100와 200 사이의 간격은 700와 800 사이의 간격과 거의 동일하게 보입니다.

왜 11단계인가요?

11단계는 UI의 모든 일반적인 사용 사례를 포괄하기에 충분한 세부성을 제공합니다.

이 시스템은 모든 Tailwind 색상이 그 자체로 미니 디자인 시스템처럼 작동한다는 것을 의미합니다. 채워진 버튼에서 읽을 수 있는 흰색 텍스트가 필요한 경우 -600를 사용하세요. 거의 존재하지 않는 배경 색조가 필요한 경우 -50를 사용하십시오.

50-950 스케일 자세히 보기

Tailwind에 내장된 violet 스케일을 사용한 구체적인 예를 살펴보겠습니다.

기본 색상 violet-500는 대략 57%의 밝기에 있습니다. 정확히 0~100%의 중간은 아니지만 눈금의 시각적 균형을 유지하기 위해 중간점보다 약간 위에 위치합니다. 사람의 눈은 밝은 색조보다 어두운 색조를 덜 정확하게 구별하기 때문에 매우 어두운 색조는 더 작은 밝기 범위(15~40%)로 압축됩니다.

사용자 정의 색상 스케일 생성

ColorFYI의 셰이드 생성기 사용

Shade Generator는 모든 16진수 코드를 가져와서 완전한 Tailwind 형식의 스케일을 출력합니다. 작업 흐름은 다음과 같습니다.

1단계: 입력 필드에 브랜드 색상을 입력합니다.

예를 들어, 귀하의 브랜드는 많은 기업 브랜드에서 사용하는 중간 정도의 진한 파란색인 정확한 파란색 #0057B8을 사용합니다.

2단계: 생성기는 지각적으로 균일한 알고리즘을 사용하여 11가지 음영을 모두 계산하고 각 단계의 16진수 코드와 시각적 미리보기를 표시합니다.

3단계: 생성된 Tailwind 구성 블록을 복사합니다.

#0057B8의 출력은 대략 다음과 같습니다.

brand: {
  50:  '#E6F0FF',
  100: '#CCE1FF',
  200: '#99C3FF',
  300: '#66A4FF',
  400: '#3386FF',
  500: '#0057B8',  // Your input color, anchored at 500
  600: '#0049A3',
  700: '#003B8A',
  800: '#002D6B',
  900: '#001F4D',
  950: '#001230',
},

"앵커링"의 의미

음영 생성기는 기본적으로 입력 색상을 500 위치에 고정합니다. 이는 입력 색상이 눈금의 중심이 된다는 것을 의미합니다. 즉, 그 위에는 5개의 밝은 음영이 생성되고 아래에는 5개의 더 어두운 음영이 생성됩니다.

일부 발전기를 사용하면 다른 위치에 고정할 수 있습니다. 브랜드 색상이 이미 매우 어두운 남색인 경우 700 또는 800에 고정하면 더 유용한 범위를 생성할 수 있습니다. 매우 밝은 파스텔인 경우 200 또는 300에 고정하는 것이 더 합리적입니다. Shade Generator를 사용하면 앵커 포인트를 조정할 수 있습니다.

지각의 균일성이 중요한 이유

단순한 셰이드 생성기는 HSL L 값을 95%, 85%, 75%, 65%, 55%, 45%, 35%, 25%, 15% 등의 증분으로 줄일 수 있습니다. 수학은 간단하지만 시각적 결과는 고르지 않습니다. 인간의 시각은 중간톤의 밝기 차이에 더 민감하기 때문에 스케일의 밝은 끝 부분의 전환은 어두운 끝 부분보다 더 멀리 떨어져 있는 것처럼 보입니다.

ColorFYI의 생성기는 시각적으로 등거리로 나타나는 단계를 생성하는 OKLCH 밝기 보간법을 사용하여 Tailwind가 직접 제작한 기본 스케일의 지각 품질과 일치합니다.

tailwind.config.js 구성

사용자 정의 색상으로 확장

맞춤 색상 스케일을 추가하는 가장 안전한 방법은 Tailwind의 기본값을 바꾸는 대신 확장하는 것입니다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#E6F0FF',
          100: '#CCE1FF',
          200: '#99C3FF',
          300: '#66A4FF',
          400: '#3386FF',
          500: '#0057B8',
          600: '#0049A3',
          700: '#003B8A',
          800: '#002D6B',
          900: '#001F4D',
          950: '#001230',
        },
      },
    },
  },
}

이를 추가한 후 프로젝트 전체에서 bg-brand-500, text-brand-700, border-brand-200 및 hover:bg-brand-600와 같은 클래스를 사용할 수 있습니다.

내장 색상 교체

기본 색상을 완전히 교체하려는 경우(예: Tailwind의 blue를 브랜드 파란색으로 교체):

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50:  '#E6F0FF',
          // ... through 950
        },
      },
    },
  },
}

bg-blue-500, text-blue-700와 같은 클래스는 이제 Tailwind에 내장된 파란색 대신 사용자 정의 배율을 사용합니다.

런타임 테마에 CSS 변수 사용

런타임 테마 전환이 필요한 애플리케이션(예: 화이트 라벨 제품, 사용자 정의 가능한 테마)의 경우 스케일을 CSS 사용자 정의 속성으로 정의합니다.

/* globals.css */
:root {
  --color-brand-50:  #E6F0FF;
  --color-brand-100: #CCE1FF;
  --color-brand-200: #99C3FF;
  --color-brand-300: #66A4FF;
  --color-brand-400: #3386FF;
  --color-brand-500: #0057B8;
  --color-brand-600: #0049A3;
  --color-brand-700: #003B8A;
  --color-brand-800: #002D6B;
  --color-brand-900: #001F4D;
  --color-brand-950: #001230;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  'var(--color-brand-50)',
          100: 'var(--color-brand-100)',
          // ... through 950
        },
      },
    },
  },
}

이제 런타임 시(JavaScript를 통해) CSS 변수를 변경하면 전체 UI 색상이 즉시 변경됩니다.

Tailwind v4 구성

Tailwind CSS v4는 @theme를 사용하여 구성을 완전히 CSS로 이동합니다.

@import "tailwindcss";

@theme {
  --color-brand-50:  #E6F0FF;
  --color-brand-100: #CCE1FF;
  --color-brand-200: #99C3FF;
  --color-brand-300: #66A4FF;
  --color-brand-400: #3386FF;
  --color-brand-500: #0057B8;
  --color-brand-600: #0049A3;
  --color-brand-700: #003B8A;
  --color-brand-800: #002D6B;
  --color-brand-900: #001F4D;
  --color-brand-950: #001230;
}

tailwind.config.js가 필요하지 않습니다. --color-brand-* 변수는 유틸리티 클래스(bg-brand-500, text-brand-700 등)로 자동으로 사용 가능합니다.

다크 모드 음영

다크 모드는 색상 스케일을 반전시키지 않고 사용하는 음영을 반전시킵니다. 밝은 모드와 어두운 모드 모두에 동일한 규모가 적용됩니다. 눈금의 어느 쪽 끝이 배경을 처리하고 어느 쪽이 텍스트를 처리하는지 바꾸기만 하면 됩니다.

반전 원리

채워진 버튼 색상(brand-500)은 두 모드 모두에서 동일하게 유지됩니다. 이는 앵커 포인트입니다. 주위의 모든 것이 뒤집힙니다. 밝은 배경은 어두운 배경이 되고, 어두운 텍스트는 밝은 텍스트가 됩니다.

Tailwind의 어두운 모드 구현

<!-- Background: light-50 in light, dark-950 in dark -->
<div class="bg-brand-50 dark:bg-brand-950">

  <!-- Card: light-100 in light, dark-900 in dark -->
  <div class="bg-brand-100 dark:bg-brand-900 rounded-lg p-6">

    <!-- Heading: dark-900 text in light, light-100 in dark -->
    <h2 class="text-brand-900 dark:text-brand-100">Card Title</h2>

    <!-- Body text: dark-700 in light, light-300 in dark -->
    <p class="text-brand-700 dark:text-brand-300">Card content goes here.</p>

    <!-- Button: always brand-500, hover shifts direction per mode -->
    <button class="bg-brand-500 hover:bg-brand-600 dark:hover:bg-brand-400 text-white">
      Action
    </button>

  </div>
</div>

별도의 다크 팔레트 생성

일부 디자인 시스템, 특히 밝은 모드와 어두운 모드가 시각적으로 크게 구분되어 있는 시스템의 경우 별도의 "어두운" 스케일을 생성할 수 있습니다. 이는 다음과 같을 수 있습니다:

• 동일한 색상의 약간 더 따뜻하거나 차가운 버전(어두운 배경이 동일하게 보이려면 더 선명한 색상이 필요하므로 어두운 모드의 채도가 더 높음)
• 어두운 배경에 더 잘 어울리는 보색

Shade Generator를 사용하여 두 스케일을 모두 생성하고 별도의 토큰으로 정의합니다.

:root {
  /* Light mode scale */
  --color-brand-500: #0057B8;
}

[data-theme="dark"] {
  /* Dark mode scale (slightly more saturated) */
  --color-brand-500: #3386FF;
}

일반적인 사용자 정의 확장 시나리오

브랜드 컬러와 정확히 일치

많은 브랜드 지침에서는 단일 Pantone 또는 16진수 코드를 지정합니다. 브랜드 색상이 #E63946(선명한 빨간색)인 경우 500에 고정된 스케일을 생성합니다. 브랜드 빨간색은 brand-500가 되며 전체 범위의 디자인 유연성을 얻을 수 있습니다.

따뜻한 뉴트럴 그레이를 더하다

Tailwind의 기본 그레이 스케일은 쿨하게 기울어져 있습니다. 주황색이나 빨간색 원색과 조화를 이루는 따뜻한 회색을 만들려면 #8B7355와 같이 채도가 낮은 따뜻한 색상에 대한 음영 스케일을 생성한 다음 이를 중간 회색으로 사용합니다. 약간의 따뜻함이 기본 색상과 시각적 일관성을 만들어냅니다.

의미론적 색상 척도 만들기

디자인 시스템에는 의미론적 척도가 필요할 수 있습니다.

• 성공: #16A34A와 같은 녹색에서 생성
• 경고: #D97706와 같은 앰버에서 생성
• 오류/위험: #DC2626와 같은 빨간색에서 생성
• 정보: #0284C7와 같은 하늘색에서 생성

각각은 브랜드 primary 및 neutral 스케일과 함께 구성(success, warning, error, info)에서 명명된 스케일이 됩니다.

주요 내용

• Tailwind의 50-950 셰이드 시스템은 흰색에 가까운 것부터 검은색에 가까운 것까지 인지적으로 간격을 둔 11가지 밝기 단계를 제공하며 모든 UI 사용 사례를 포괄하도록 설계되었습니다.
• ColorFYI의 Shade Generator는 지각적으로 균일한 알고리즘을 사용하여 단일 16진수 코드를 완전한 Tailwind 지원 스케일로 변환합니다.
• theme.extend.colors를 사용하여 tailwind.config.js를 확장하여 Tailwind의 기본값을 잃지 않고 사용자 정의 배율을 추가합니다. Tailwind v4에서 @theme를 사용하세요.
• 런타임 테마 전환 및 화이트 라벨 애플리케이션에 CSS 사용자 정의 속성(var(--color-brand-500))을 사용합니다.
• 다크 모드에는 다른 색상이 필요하지 않습니다. 동일한 비율을 거꾸로 사용합니다. 밝은 색상은 배경이 되고, 어두운 색상은 텍스트가 됩니다.
• 기본, 중립/회색 및 의미(성공, 경고, 오류, 정보) 색상에 대해 별도의 스케일을 생성하여 완전한 디자인 시스템을 구축합니다.
• 숫자 명명 규칙을 일관되게 사용하여 개발자가 어떤 색상에 도달해야 하는지 정확히 알 수 있습니다. 호버 상태의 경우 600, 액세스 가능한 흰색 텍스트의 경우 700, 미묘한 배경의 경우 100.