Tailwind 색상 팔레트 생성기.

색상 하나를 입력하면 50부터 950까지 11단계의 Tailwind 스타일 스케일이 나옵니다. 계산은 Tailwind v4의 기본 팔레트와 같은 OKLCH로 합니다. 입력한 색상은 명도가 가장 가까운 단계에 입력한 그대로 들어갑니다. 브라우저에서 실행되므로 입력한 내용은 업로드되지 않습니다.

색상색상 이름

입력한 색상은 500단계입니다.

50#F1F6FD
100#E0EBFB
200#C6DAFA
300#9EC2FB
400#659FFD
500#3B82F6
600#2873EA
700#215FC3
800#1E50A0
900#1F4482
950#0C2246

@theme {
  --color-brand-50: oklch(0.971 0.011 256.695);
  --color-brand-100: oklch(0.937 0.025 257.646);
  --color-brand-200: oklch(0.884 0.049 259.79);
  --color-brand-300: oklch(0.809 0.09 259.44);
  --color-brand-400: oklch(0.705 0.151 259.626);
  --color-brand-500: oklch(0.623 0.188 259.815);
  --color-brand-600: oklch(0.578 0.195 259.687);
  --color-brand-700: oklch(0.505 0.169 259.846);
  --color-brand-800: oklch(0.445 0.141 259.626);
  --color-brand-900: oklch(0.395 0.113 260.11);
  --color-brand-950: oklch(0.257 0.073 259.785);
}

브라우저 안에서 실행됩니다. 여기에 넣은 파일은 업로드되거나 저장되지 않습니다.

Tailwind 색상 스케일 만드는 방법

색상을 입력하세요. 색상 견본으로 고르거나 HEX, rgb(), hsl(), oklch()로 입력합니다. 처음에는 #3B82F6이 들어 있습니다.
스케일 이름을 정하세요. 이름은 --color-brand-500처럼 모든 변수의 일부가 되며, 처음에는 brand입니다. 소문자로 바뀌고, 영문자, 숫자, 하이픈 외의 문자는 하이픈이 됩니다.
스케일을 확인하세요. 가장 밝은 50부터 가장 어두운 950까지 견본 11개가 늘어서 있고, 각각 HEX 코드와 복사 버튼이 있습니다. 입력한 색상에는 테두리가 표시되고, “입력한 색상은 500단계입니다.”처럼 몇 단계인지 페이지에 나타납니다.
코드를 복사하세요. Tailwind v4 @theme 탭과 CSS 변수 탭에는 11단계 전체의 --color-<name>-<step>이 oklch() 값으로 들어 있습니다. 앞의 것은 @theme 안에, 뒤의 것은 :root 안에 들어갑니다.

스케일이 만들어지는 방식

명도는 Tailwind v4 기본 팔레트의 붉은색 스케일 곡선을 따릅니다. 50단계에서 약 0.97, 500단계에서 0.64, 950단계에서 0.26입니다.
채도(색이 얼마나 선명한지)는 같은 스케일의 곡선을 따르며 600단계에서 정점에 이르고, 입력한 색상의 채도에 맞춰 조정됩니다.
색조는 모든 단계에서 입력한 색상의 색조 그대로입니다.
입력한 색상은 자신의 명도에 가장 가까운 단계에 그대로 들어갑니다. 기본값 #3B82F6은 500단계입니다.
sRGB로 표현할 수 없는 단계는 채도를 낮춰 범위 안으로 되돌립니다. 그래서 견본에 표시되는 모든 HEX 코드는 화면에 표시할 수 있는 색상입니다.

Tailwind와 Codex에서 사용하기

Tailwind v4 프로젝트에서는 @theme 블록을 @import "tailwindcss"가 들어 있는 CSS 파일에 붙여 넣으세요. --color-brand-* 변수마다 bg-brand-500, text-brand-700, border-brand-200 같은 클래스가 생깁니다.

단계를 나누어 쓰는 흔한 방법은 이렇습니다. 50~~200은 옅은 색과 배경, 500~~600은 버튼과 링크, 700~900은 밝은 배경 위의 텍스트, 950은 가장 어두운 텍스트에 씁니다. 흰색 텍스트를 올릴 만큼 어두운 단계가 몇 번인지는 색조에 따라 달라지므로, 각 조합을 명도 대비 검사기로 확인하세요.

Codex가 스케일을 모든 곳에서 쓰게 하고 어긋나지 않게 하려면, 블록과 규칙을 함께 알려 주세요:

스케일 추가

Tailwind v4 프로젝트의 전역 CSS 파일에 이 스케일을 추가해 줘. @theme 블록이 이미 있으면 그 안에 넣어 줘: [@theme 블록 붙여넣기]. 기본 버튼과 링크에는 brand-600, 호버 상태에는 brand-700, 은은하게 색을 입힌 배경에는 brand-50, 가장 어두운 텍스트에는 brand-950을 써 줘. 다른 brand 색상은 추가하지 말고, 이 조합들 위의 텍스트가 명도 대비 4.5:1 이상인지 확인해 줘. 그다음 어느 단계를 어디에 쓰는지 DESIGN.md에 기록해 줘.

자주 묻는 질문

무료인가요?

네. 무료이고, 회원가입이 필요 없으며, 만들 수 있는 스케일 수에도 제한이 없습니다.

입력한 색상이 업로드되나요?

아니요. 스케일은 브라우저에서 만들어지며 어디로도 전송되거나 저장되지 않습니다. 사이트는 도구가 사용되었다는 사실만 집계하고 색상은 기록하지 않습니다.

Tailwind에 내장된 색상과 같은가요?

완전히 같지는 않습니다. Tailwind v4 붉은색 스케일의 명도 곡선을 모든 색조에 똑같이 적용하므로 단계 사이 간격이 고르고 익숙한 느낌이 나지만, Tailwind는 자체 색상을 하나씩 따로 다듬었습니다. 생성한 파란색은 Tailwind의 파란색과 느낌은 비슷하지만 똑같지는 않습니다.

Tailwind v3에서도 쓸 수 있나요?

@theme 탭은 Tailwind v4용입니다. v3에서는 견본의 HEX 코드를 tailwind.config의 colors 섹션에 brand 같은 이름으로, 단계 번호를 키로 해서 복사해 넣으세요.