FreeOnlineTool

HEX를 가장 가까운 Tailwind 색상으로 매칭

HEX 코드를 테일윈드 컬러로 변환. #3182ce처럼 포토샵에서 뽑은 색을 Tailwind 기본 팔레트와 RGB 유클리드 거리로 비교해 bg-sky-600 같은 클래스와 스와치를 바로 복사합니다.

HEX · RGB 색상

포토샵·피그마에서 뽑은 HEX를 넣으면 Tailwind 기본 팔레트 288색과 RGB 유클리드 거리로 가장 가까운 토큰을 찾습니다. bg-/text-/border- 클래스를 바로 복사하세요.

입력 · #3182ce

가장 가까운 Tailwind · #0084d1

최근접 토큰

sky-600

#0084d1 · ΔRGB 49.1

  • blue-500 · #2b7fff · 49.5
  • cyan-600 · #0092b8 · 56.0
  • blue-600 · #155dfc · 65.3
  • blue-400 · #51a2ff · 66.7
  • sky-700 · #0069a8 · 66.9
  • blue-700 · #1447e6 · 70.0
  • sky-500 · #00a6f4 · 71.7
[Tailwind color match]
input #3182ce
nearest sky-600 #0084d1  ΔRGB 49.1
bg-sky-600
text-sky-600
border-sky-600
runners-up:
  blue-500 #2b7fff  ΔRGB 49.5
  cyan-600 #0092b8  ΔRGB 56.0
  blue-600 #155dfc  ΔRGB 65.3
  blue-400 #51a2ff  ΔRGB 66.7

사용 방법

작동 원리

색 이름 표나 눈대중 피커가 아닙니다. Tailwind CSS color matcher는 기본 팔레트(블랙·화이트·스케일 50–950, v4 oklch를 sRGB HEX로 환산)와 입력색의 RGB 유클리드 거리를 계산해 가장 가까운 토큰을 고릅니다.

  1. HEX(#3182ce) 또는 rgb(49, 130, 206)를 붙입니다. 3자리 #38c도 됩니다.
  2. 입력 스와치와 최근접 스와치를 나란히 보여, 디자인 가이드 색이 얼마나 가까운지 눈으로 확인합니다.
  3. bg-sky-600, text-sky-600, border-sky-600, HEX를 한 번에 복사합니다.
  4. 2~8위 러너업도 거리와 함께 나와, blue-500이 더 나은지 바로 고를 수 있습니다.

v4 기본색은 oklch라 v3 때의 #2563eb = blue-600과 숫자가 다릅니다. 이 도구는 지금 설치된 Tailwind 기본 팔레트에 맞춥니다. 계산은 브라우저에서만 이뤄집니다.

자주 묻는 질문

왜 #3182ce가 blue-600이 아닌가요?

유클리드 RGB로 재면 sky-600이 더 가깝습니다. 예전 치트시트 암기와 실제 거리 최솟값은 다를 수 있습니다.

커스텀 테마 색은요?

기본 tailwindcss/colors만 봅니다. theme.extend에 넣은 브랜드 색은 프로젝트 설정에 있습니다.