색상 변환기 (Hex, RGB, HSL)
색상 미리보기
#6366f1
사용 가이드
색상 변환기는 HEX, RGB, HSL, HSV, CMYK 형식 간에 색상 값을 변환하는 온라인 도구입니다 — 모든 것이 브라우저에서 로컬로 실행됩니다. 색상 형식 변환은 디자이너와 프런트엔드 개발자의 일상 작업입니다: Figma는 HEX 코드를 내보내고, CSS는 HEX와 RGB/HSL을 모두 사용하며, 인쇄 워크플로는 CMYK 값이 필요합니다. 이 도구는 유효한 색상 값을 수락하고 지원되는 모든 형식에서 동등한 값을 즉시 표시합니다. 큰 색상 견본은 즉각적인 시각적 확인을 제공합니다.
- 색상 값 입력 — 입력 필드에 색상 값을 입력하거나 붙여넣습니다: HEX 코드(#6366f1 또는 #fff), RGB 값, HSL 값 또는 CSS 색상 이름. 변환기가 형식을 자동으로 감지합니다.
- 색상 선택기 사용 — 색상 견본 또는 색상 선택기 버튼을 클릭하여 브라우저의 기본 색상 선택기를 엽니다.
- 모든 형식 동등값 읽기 — 도구가 선택한 색상을 HEX, RGB(0–255), RGB(0–1 정규화), HSL, HSV 및 CMYK로 동시에 표시합니다.
- 개별 채널 조정 — RGBA에서 알파 채널만 변경하거나 HSL에서 색조를 조정하여 색상을 미세 조정합니다.
- 모든 형식 복사 — 형식 행 옆의 "복사" 버튼을 클릭하여 해당 특정 값을 클립보드에 복사합니다.
- 견본으로 확인 — 큰 색상 미리보기 견본은 항상 실제로 렌더링된 색상을 표시합니다. 복사하기 전에 변환된 값이 의도한 색상에 해당하는지 시각적으로 확인하는 데 사용합니다.
자주 묻는 질문
이 도구는 어떤 색상 형식을 지원하나요?
세 가지 널리 사용되는 CSS 색상 형식 간 변환을 지원합니다: HEX(#RRGGBB), RGB(rgb(r, g, b), 값 0–255), HSL(hsl(h, s%, l%) — 색상 0–360°, 채도와 명도 0–100%). "tomato"나 "deepskyblue" 같은 CSS 색상 이름도 입력으로 허용합니다.
RGB와 HSL의 차이점은 무엇인가요?
RGB는 빨강, 초록, 파랑 빛의 강도(각 0–255)로 색상을 표현합니다. HSL은 색조(색상환 위치, 0–360°), 채도(색채감, 0–100%), 명도(밝기, 0–100%)로 색상을 표현합니다. HSL은 명도나 채도를 직관적으로 조정할 수 있어 디자이너에게 더 편리합니다.
이 색상 변환이 서버에서 이루어지나요?
아니요. 모든 변환 로직은 네이티브 JavaScript를 사용하여 브라우저 내에서 실행됩니다. 어떤 서버에도 전송되지 않습니다.
오프라인으로 사용할 수 있나요?
2Kit은 PWA입니다. 첫 방문 후 캐시되어 완전히 오프라인으로 작동합니다.
왜 색상 형식 간 변환이 필요한가요?
도구와 워크플로우마다 다른 색상 형식을 사용합니다. 디자인 도구는 주로 HEX로 출력하고, CSS 애니메이션과 테마 시스템은 프로그래밍 방식으로 조작하기 쉬운 HSL을 선호할 수 있습니다.
기술 구현
모든 처리는 브라우저 내에서만 실행됩니다 — 어떤 서버에도 데이터를 전송하지 않습니다. 이 도구는 프로그레시브 웹 앱(PWA)으로 완전한 오프라인 사용이 가능합니다: 첫 방문 후 모든 페이지와 리소스가 Service Worker에 의해 캐시되어 인터넷 연결 없이도 사용할 수 있습니다. 입력 데이터가 기기를 벗어나지 않아 API 키, 비밀번호, 개인 설정, 기밀 문서 등 민감한 콘텐츠를 안전하게 처리할 수 있습니다.