Tailwind CSS 색상 팔레트

Tailwind CSS는 26개 색 계열의 팔레트를 제공하며, 각 계열은 50(가장 밝음)부터 950(가장 어두움)까지 11단계입니다. v4는 이를 OKLCH로, v3는 HEX로 정의합니다. 이 도구는 모든 값을 두 형식으로 나열하고, v4 색을 HEX로 변환하며, 바로 쓸 수 있는 @theme CSS나 tailwind.config.js 코드를 만들어 줍니다. 커스텀 모드에서는 색상이 가장 가까운 Tailwind 계열을 본떠 브랜드 색으로 50–950 전체 스케일을 만듭니다.

사용 방법

1. "기본 Tailwind 팔레트"와 계열(또는 전체)을 고르거나 "내 색으로 만드는 커스텀 스케일"을 고릅니다.
2. 코드 형식에 맞게 Tailwind v4 또는 v3를 고릅니다.
3. 커스텀 스케일은 내 색과 brand 같은 이름을 입력합니다.
4. 코드를 CSS(v4)나 설정 파일(v3)에 복사하고 bg-brand-500 같은 클래스를 사용하세요.

계산식

커스텀 스케일: 기준 색은 명도가 가장 가까운 단계에서 값을 그대로 유지하고, 더 밝은 단계는 L = 1 − (1 − Lᵢ)(1 − L_b)/(1 − L_k), 더 어두운 단계는 L = Lᵢ · L_b/L_k, 채도는 C = C_b · Cᵢ/C_k입니다. Lᵢ, Cᵢ는 본뜬 계열에서 가져옵니다.

L_b, C_b는 내 색의 OKLCH 명도와 채도, L_k, C_k는 해당 단계에서 본뜬 계열의 값입니다. 색상은 본뜬 계열의 단계별 작은 변화를 따릅니다. sRGB 밖의 색은 채도를 낮춥니다.

예시

blue-500은 v4에서 oklch(62.3% 0.214 259.815), v3에서 #3b82f6입니다. 커스텀 모드에 #3B82F6을 입력하면 blue를 본뜬 스케일의 500단계에 놓이므로 --color-brand-500은 정확히 #3b82f6이고, 나머지 열 단계가 그 주변으로 밝고 어둡게 만들어집니다.