Tailwind CSS 색상: 완전한 쉐이드 시스템 가이드

Tailwind CSS는 웹 개발에서 가장 널리 참조되는 색상 시스템 중 하나를 탑재하고 있습니다. 50부터 950까지의 숫자로 구성된 쉐이드 명명 규칙은 업계 표준이 되었으며, 실제로 Tailwind를 사용하지 않는 프로젝트에서도 디자인 도구, 다른 CSS 프레임워크, 커스텀 디자인 시스템에 영향을 미치고 있습니다. 이 시스템의 구조, 확장 방법, 그리고 Tailwind v4에서의 변화를 이해하면 실용적인 기술과 색상 스케일 디자인에 대한 사고 모델을 동시에 얻을 수 있습니다.

기본 팔레트 개요

Tailwind 기본 팔레트에는 22개의 색상 패밀리가 있으며, 각각 11개의 쉐이드(50~950)를 포함합니다. black, white, transparent, inherit 등 일부 색상은 단일 값 유틸리티로도 제공됩니다.

기본 팔레트의 핵심 색상 패밀리는 다음과 같습니다:

회색 패밀리(slate, gray, zinc, neutral, stone)는 주로 색조에서 차이가 납니다. slate는 파란-회색 톤을 띠고, stone은 따뜻한 색감을 가지며, neutral은 가장 순수한 무채색입니다. 프로젝트에 맞는 올바른 회색 패밀리를 선택하는 것은 많은 개발자가 생각하는 것보다 훨씬 중요합니다. 전체 UI에서 slate 회색과 stone 회색은 확연히 다른 느낌을 줍니다.

쉐이드 명명 규칙: 50~950

숫자 체계는 일관된 규칙을 따릅니다: 숫자가 높을수록 색이 어둡습니다. 스케일이 완벽하게 선형적이지는 않습니다. Tailwind 팀은 수학적 균일성보다 지각적 균일성을 위해 각 단계를 직접 조정했습니다. 하지만 관계성은 믿을 수 있습니다:

Tailwind 기본 blue-500은 #3B82F6 — 완전히 채도가 있는 중간 파란색으로 "정식" Tailwind 파란색입니다. blue-600 (#2563EB)은 파란 버튼의 표준 호버 상태입니다. blue-100 (#DBEAFE)은 파란 배지의 배경입니다. 이 관계는 팔레트의 모든 색상 패밀리에서 일관되게 적용됩니다.

950 추가

Tailwind v3.3에서 모든 색상 패밀리에 950 쉐이드가 추가되었습니다. 추가 전에는 900이 가장 어두운 옵션이었는데, 일부 색상 패밀리에서 다크 모드 배경으로 쓰기에는 너무 밝았습니다. 950 쉐이드는 이 간격을 채웁니다. 매우 어둡지만 상위 색조의 색감을 시각적으로 유지합니다. 예를 들어, blue-950 (#172554)은 어두운 네이비로 보이며, 순수한 검정이 아니어서 브랜드 특성을 유지하는 다크 모드 서피스에 유용합니다.

커스텀 색상 추가

기본 팔레트에 없는 브랜드 색상이 있는 프로젝트의 경우, Tailwind 설정에서 커스텀 색상 패밀리를 추가할 수 있습니다. 접근 방식은 Tailwind v3와 v4에서 다릅니다.

Tailwind v3: tailwind.config.js

v3에서 커스텀 색상은 기본값과 함께 추가하려면 extend.colors 객체에, 교체하려면 colors 객체에 넣습니다:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        // 커스텀 브랜드 색상 패밀리 추가
        brand: {
          50:  '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',  // 주요 브랜드 색상
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
        // 또는 기존 패밀리를 새 이름으로 참조
        primary: colors.indigo,
        danger: colors.red,
      },
    },
  },
};

이 설정 후 bg-brand-500, text-brand-700, border-brand-200 등의 클래스를 사용할 수 있습니다.

커스텀 스케일 생성

커스텀 색상 추가에서 어려운 부분은 단일 브랜드 헥스 값에서 완전한 11단계 스케일을 생성하는 것입니다. 수동으로 각 단계의 명도를 조절하면 일관성 없는 결과가 나옵니다.

쉐이드 생성기는 이를 자동화합니다: 브랜드의 기본 헥스를 입력하면 지각적으로 균일한 단계로 전체 50~950 스케일을 계산하여 Tailwind 설정에 바로 붙여넣을 수 있는 값을 출력합니다. 예를 들어, 브랜드 기본색이 #0EA5E9 (하늘색)라면, 생성기는 Tailwind 기본 팔레트의 명도 곡선에 맞게 보정된 완전한 11단계 스케일을 생성합니다.

동적 알파를 위한 withOpacityValue 사용

Tailwind v3에서 색상 유틸리티는 슬래시 문법(bg-blue-500/50으로 50% 투명도)을 통해 임의 투명도를 지원합니다. v3에서 커스텀 색상을 정의할 때 withOpacityValue 패턴으로 CSS 커스텀 프로퍼티를 사용하면 이 기능이 동작합니다:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: 'rgb(var(--color-brand-500) / <alpha-value>)',
        },
      },
    },
  },
};

그런 다음 CSS에서 원시 채널 값을 정의합니다:

:root {
  --color-brand-500: 14 165 233; /* #0EA5E9의 R G B 값 */
}

이렇게 하면 bg-brand-500/30 (30% 투명도)이 생성된 CSS에서 올바르게 작동합니다.

설정에서 팔레트 확장

커스텀 색상 패밀리 외에도 Tailwind 설정을 통해 시맨틱 별칭과 임의 값으로 팔레트를 확장할 수 있습니다.

시맨틱 별칭

팔레트를 참조하는 시맨틱 별칭으로 브랜드 색상을 정의하는 방법:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.violet,
        success: colors.green,
        warning: colors.amber,
        danger: colors.red,
        neutral: colors.slate,
      },
    },
  },
};

이제 bg-primary-500은 bg-blue-500과 동일한 CSS를 생성하지만, 클래스 이름이 색상이 아닌 목적을 전달합니다. 이 패턴은 디자인 토큰의 시맨틱 명명 방식을 반영합니다. 나중에 주요 색상이 파란색에서 인디고로 바뀌어도 동일한 클래스가 작동합니다.

단일 값 시맨틱 색상

전체 스케일 없이 명명된 색상을 원하는 디자인 시스템의 경우:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary':    '#0EA5E9',
        'brand-secondary':  '#7C3AED',
        'text-on-primary':  '#FFFFFF',
        'surface-dark':     '#0F172A',
      },
    },
  },
};

bg-brand-primary, text-text-on-primary 등으로 사용할 수 있습니다.

Tailwind v4: CSS 변수 방식

Tailwind v4는 근본적으로 다른 설정 모델을 도입합니다. JavaScript 설정 파일 대신, 전체 디자인 시스템을 커스텀 프로퍼티와 CSS 기반 설정을 사용하여 CSS에서 정의합니다.

@theme 지시어

Tailwind v4에서 색상은 CSS 파일의 @theme 지시어를 사용하여 정의합니다:

@import "tailwindcss";

@theme {
  /* 기본 팔레트 재정의 또는 확장 */
  --color-brand-50:   #f0f9ff;
  --color-brand-100:  #e0f2fe;
  --color-brand-200:  #bae6fd;
  --color-brand-300:  #7dd3fc;
  --color-brand-400:  #38bdf8;
  --color-brand-500:  #0ea5e9;
  --color-brand-600:  #0284c7;
  --color-brand-700:  #0369a1;
  --color-brand-800:  #075985;
  --color-brand-900:  #0c4a6e;
  --color-brand-950:  #082f49;
}

Tailwind v4는 --color-* 커스텀 프로퍼티를 읽어 해당 유틸리티 클래스를 자동으로 생성합니다: bg-brand-500, text-brand-700, border-brand-200 등.

v4의 시맨틱 색상

v4 방식은 표준 CSS 커스텀 프로퍼티를 사용하기 때문에 시맨틱 색상 별칭이 매우 깔끔합니다:

@import "tailwindcss";

@theme {
  --color-primary:           var(--color-blue-600);
  --color-primary-hover:     var(--color-blue-700);
  --color-primary-subtle:    var(--color-blue-50);

  --color-success:           var(--color-green-600);
  --color-danger:            var(--color-red-600);
  --color-warning:           var(--color-amber-500);
}

이제 bg-primary가 유효한 Tailwind 클래스가 됩니다. CSS 커스텀 프로퍼티를 참조하기 때문에, Tailwind 설정을 건드리지 않고 다크 모드 블록이나 테마 선택자에서 재정의할 수 있습니다:

[data-theme="dark"] {
  --color-primary: var(--color-blue-400);
}

이것이 v4 색상 시스템에서 가장 중요한 개선점입니다. 테마 설정이 순수 CSS로 이루어지며, 테마 전환에 빌드 단계가 필요 없습니다.

v4의 P3 및 OKLCH 색상

Tailwind v4의 기본 팔레트는 지각적 균일성을 위해 내부적으로 OKLCH 값을 사용합니다. v4의 팔레트는 색조 전반에서 더 시각적으로 일관된 단계를 생성합니다. 특히 이전 팔레트에서 명도 단계가 고르지 않았던 주황색과 노란색 같은 따뜻한 색상에서 눈에 띄게 개선되었습니다.

색상 변환기를 사용하여 브랜드 색상의 OKLCH 값을 생성하면 @theme 블록에 바로 적용할 수 있습니다:

@theme {
  /* 광역 색영역 P3 디스플레이 지원을 위해 OKLCH로 정의된 브랜드 색상 */
  --color-brand-500: oklch(60% 0.18 220);
}

광역 색영역 디스플레이(대부분의 MacBook, iPhone)를 사용하는 최신 브라우저는 이를 P3 색 공간에서 렌더링하여 sRGB로 제한된 동등한 색보다 눈에 띄게 더 선명한 파란색을 표현합니다.

실용적인 색상 선택 팁

패밀리 효과적으로 조합하기

Tailwind의 회색 패밀리는 특정 강조색을 보완하도록 설계되었습니다. 일반적인 조합:

• slate + blue/indigo — 차갑고, 기업적이며, 약간 기술적인 느낌
• stone + amber/orange — 따뜻하고, 장인적이며, 인간적인 느낌
• zinc + violet/purple — 중성적이고, 현대적이며, 약간 어두운 느낌
• neutral + any — 가장 다재다능한 회색으로, 모든 색과 어울림

동일한 UI에서 서로 다른 회색 패밀리를 혼용하면(예: 배경에 slate-100과 zinc-200) 미묘한 시각적 불일치가 발생합니다. 프로젝트당 하나의 회색 패밀리를 선택하고 일관되게 사용하세요.

100/700 텍스트-배경 규칙

Tailwind에서 안정적으로 대비를 유지하는 조합: 동일 패밀리 내에서 100번 배경에 700번 텍스트를 사용하세요. 예를 들어, bg-blue-100 위의 text-blue-700은 WCAG AA를 통과하는 읽기 쉬운 파란 배지를 만듭니다. 비표준 조합은 대비 검사기로 확인하세요.

다크 모드 쉐이드 매핑

Tailwind에서 다크 모드에 일반적으로 사용되는 패턴은 쉐이드 스케일을 반전시키는 것입니다. 라이트 모드에서 700이었던 것이 다크 모드에서는 300이 됩니다:

<p class="text-gray-700 dark:text-gray-300">
  본문 텍스트 — 라이트 모드에서는 어두운 회색, 다크 모드에서는 밝은 회색
</p>

<div class="bg-gray-100 dark:bg-gray-800">
  섬세한 배경 — 라이트에서는 거의 회색, 다크에서는 어두운 서피스
</div>

이 대칭성이 작동하는 이유는 Tailwind 스케일이 100+900=1000, 200+800=1000이 되도록 설계되어 있기 때문입니다. 쉐이드 쌍은 지각적 명도 면에서 거울상입니다.

핵심 요약

• Tailwind의 22개 색상 패밀리는 각각 50(거의 흰색)에서 950(거의 검정)까지 11개의 쉐이드를 가지며, 500이 정식 "정체성" 쉐이드이고 600이 기본 인터랙티브 상태입니다.
• 프로젝트당 하나의 회색 패밀리(slate, gray, zinc, neutral, stone)를 선택하고 일관되게 사용하세요. 회색 패밀리를 혼용하면 미묘한 시각적 불일치가 발생합니다.
• 커스텀 색상 패밀리는 Tailwind v3에서는 extend.colors를, v4에서는 @theme을 통해 추가합니다. 쉐이드 생성기는 어떤 단일 브랜드 헥스 값에서도 완전한 50~950 스케일을 생성합니다.
• Tailwind v4에서 색상은 @theme 아래의 CSS 커스텀 프로퍼티로, 리빌드 없이 순수 CSS 테마 설정이 가능합니다. [data-theme="dark"] 블록에서 시맨틱 색상 변수를 재정의하세요.
• 시맨틱 별칭(primary: colors.blue)은 클래스 이름이 외관이 아닌 목적을 전달하게 하여, 클래스 이름 리팩토링 없이 미래의 브랜드 색상 변경에도 유연하게 대응합니다.
• 색상 변환기는 모든 헥스 색상의 OKLCH 등가값을 제공합니다. P3 디스플레이를 활용하는 v4 광역 색영역 색상 정의에 유용합니다.