Tailwind 색상 생성기
HEX 색상과 가장 가까운 Tailwind 클래스를 찾아드립니다
📖 가장 비슷한 Tailwind 색상을 찾는 법 — RGB 대신 CIE Lab을 쓰는 이유 가이드 보기
Tailwind 색상 생성기
임의의 HEX 색상을 입력하면(3자리 축약형 #RGB와 6자리 #RRGGBB 모두 인식) Tailwind CSS에서 가장 가까운 색상 클래스를 찾아드립니다. 단순히 RGB 값 차이를 비교하지 않고, sRGB → XYZ → CIE Lab 색 공간으로 변환한 뒤 유클리드 거리를 계산합니다 — Lab 공간은 사람 눈이 느끼는 색상 차이와 수치 차이가 비례하도록 설계되어 있어, 단순 RGB 거리 비교보다 "실제로 가장 비슷해 보이는" 색상을 더 정확히 찾아냅니다. 예를 들어 디자인에서 #6366F1을 사용하고 있다면 indigo-500과 같이 대응하는 Tailwind 클래스를 바로 확인할 수 있습니다. 전체 Tailwind 컬러 팔레트도 함께 표시되어 색상 선택에 활용할 수 있습니다.
자주 묻는 질문
Tailwind CSS 색상 클래스란?
bg-blue-500, text-red-300처럼 색상명과 명도(50~950)를 조합한 CSS 클래스입니다. Tailwind CSS 프레임워크에서 기본 제공합니다.
정확히 일치하는 색상이 없을 때는 어떻게 찾나요?
RGB 값을 그대로 비교하는 대신 CIE Lab 색 공간으로 변환해 유클리드 거리를 계산합니다. Lab 공간은 인간의 색상 지각 차이에 비례하도록 설계되어 있어, RGB 숫자상으로는 멀어 보여도 실제로는 비슷해 보이는 색(또는 그 반대)을 더 정확히 가려냅니다. 색상 거리가 작을수록 원래 색과 유사합니다.
커스텀 색상을 Tailwind에 추가하려면?
tailwind.config.js의 theme.extend.colors에 추가하면 됩니다: colors: { brand: '#6366F1' }
Tailwind 색상 클래스 숫자의 의미는?
50이 가장 밝고 950이 가장 어둡습니다. 500이 기준 색상입니다.
팔레트에서 색상을 클릭하면?
해당 색상의 HEX 값이 클립보드에 복사됩니다.
3자리 축약형 HEX(예: #f0a)도 입력할 수 있나요?
네. #f0a처럼 3자리로 입력하면 각 자리를 두 번씩 반복해 #ff00aa로 자동 확장한 뒤 분석합니다. 네이티브 색상 선택기(input type=color)는 6자리만 인식하므로, 확장된 6자리 값이 선택기에도 동기화됩니다.
Tailwind v3 기준인가요?
예. Tailwind CSS v3의 기본 색상 팔레트를 사용합니다.
색상을 TailwindCSS에서 사용하는 방법은?
bg-{color}-{shade} (배경), text-{color}-{shade} (텍스트), border-{color}-{shade} (테두리) 형식으로 사용합니다.