색상 변환기
HEX, RGB, HSL 색상을 상호 변환하고 가장 가까운 Tailwind CSS 클래스를 즉시 확인.
indigo-500
가장 가까운 Tailwind 색상 클래스
HEX RGB HSL Tailwind 색상 코드 변환 — 즉시 무료
UI를 개발할 때 색상 형식을 계속 변환하는 일은 번거롭습니다. Zolkit 색상 변환기는 HEX, RGB, HSL을 양방향으로 처리하고 가장 가까운 Tailwind CSS 색상 클래스까지 찾아줍니다 — 디자인 툴의 HEX 코드에서 유틸리티 클래스까지 한 번에.
세 가지 형식 동시 처리
HEX, RGB, HSL 중 어떤 형식이든 편집하면 나머지가 즉시 업데이트됩니다. 하나의 숫자를 바꾸면 모든 표현이 동기화됩니다.
Tailwind 색상 매칭
RGB 유클리드 거리를 사용해 Tailwind v3 전체 22개 색상 패밀리에서 가장 가까운 색상 클래스를 자동으로 찾습니다.
실시간 색상 스와치
큰 색상 피커로 값을 조정하는 즉시 선택한 색상의 시각적 미리보기를 확인할 수 있습니다.
원클릭 복사
각 형식 카드에서 원클릭으로 복사 — HEX 문자열, rgb() 함수, hsl() 함수, Tailwind 클래스 이름.
100% 안전
모든 색상 계산이 브라우저에서 로컬로 실행됩니다. 서버로 전송되는 데이터가 없습니다.
영구 무료
계정 불필요, 제한 없음, 결제 없음. 색상 변환은 항상 무료입니다.
색상 변환 방법
- 1
색상 피커를 클릭하거나 HEX, RGB, HSL 형식 필드에 직접 값을 입력하세요.
- 2
다른 모든 형식 필드가 자동으로 업데이트됩니다. Tailwind 카드에는 가장 가까운 유틸리티 클래스가 표시됩니다.
- 3
원하는 카드의 복사 버튼을 클릭하여 해당 형식을 클립보드에 복사하세요.
자주 묻는 질문
이 도구는 어떤 색상 형식을 지원하나요?
HEX(6자리, 예: #3b82f6), RGB(채널당 0–255), HSL(색조 0–360°, 채도와 명도 0–100%), Tailwind CSS 클래스 이름을 지원합니다. 어떤 형식이든 편집하면 나머지가 즉시 업데이트됩니다.
Tailwind 색상 매칭은 어떻게 작동하나요?
RGB 공간에서 유클리드 거리를 사용하여 입력 색상을 Tailwind v3 팔레트의 약 242개 색상(22개 색상 패밀리 × 11개 음영)과 비교합니다. 가장 가까운 색상이 'blue-500' 같은 유틸리티 클래스 이름으로 반환됩니다.
Tailwind 매칭이 항상 정확한가요?
항상 그렇지는 않습니다. 입력한 색상이 정확히 Tailwind 색상이면 완벽히 일치합니다. 임의의 색상에 대해서는 가장 가까운 색상을 반환하므로 시각적으로 동일하지 않을 수 있습니다. 클래스 이름 옆의 색상 스와치로 비교해 보세요.
어떤 버전의 Tailwind 팔레트를 사용하나요?
Tailwind CSS v3 기본 팔레트를 사용합니다. 22개 색상 패밀리(slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) 각각의 11개 음영(50부터 950까지)이 포함됩니다.
HSL 값을 직접 입력할 수 있나요?
네. HSL 세 개의 숫자 입력 필드(H, S, L) 중 하나를 클릭하여 값을 입력하세요. 색조는 0–360도, 채도와 명도는 0–100%입니다. 입력하는 즉시 HEX와 RGB 필드가 업데이트됩니다.
오프라인에서도 작동하나요?
네, 페이지가 로드된 이후에는 작동합니다. 모든 변환 계산과 Tailwind 조회 테이블이 JavaScript에 번들되어 있어 색상 변환 시 네트워크 요청이 발생하지 않습니다.