색상 변환·픽커 | HEX ↔ RGB ↔ HSL
HEX·RGB·HSL·HSV·CMYK를 상호 변환하고 실시간 컬러 픽커로 값을 확인·복사하세요. 대비 미리보기와 프리셋 지원—디자인·CSS·프론트엔드 워크플로에 유용하며 모든 처리는 브라우저 로컬에서 실행됩니다.
이 도구 사용 방법
- 1
컬러 픽커에서 색상을 선택하거나 HEX/RGB/HSL 코드를 붙여넣습니다
- 2
모든 형식(HEX, RGB, HSL, HSV, CMYK)으로 즉시 변환 결과를 확인합니다
- 3
슬라이더로 색조/채도/명도를 조정하면 모든 값이 실시간으로 갱신됩니다
- 4
원클릭 복사 또는 프리셋 팔레트를 사용합니다
- 5
WCAG 대비 미리보기로 접근성 기준 충족 여부를 확인합니다
사용 사례 및 예시
웹 디자인 & CSS 색상 선택
브랜드 색상을 선택하고 HEX/RGB/HSL 값으로 변환해 즉시 CSS에 붙여넣습니다.
그래픽 디자인 & 디지털 아트
도구·포맷 간 색상을 변환하고 팔레트/변형을 만들어 UI 키트에 반영합니다.
인쇄 디자인 & CMYK 변환
디지털 색상에서 CMYK 근사치를 미리 보고 웹→인쇄 핸드오프를 준비합니다.
브랜드 아이덴티티 & 스타일 가이드
웹·인쇄 전 채널에 걸친 색상 값을 문서화해 일관성을 유지합니다.
접근성 & 대비 테스트
텍스트 대비를 점검하고 명도/채도를 조정해 WCAG 기준을 충족합니다.
색상 모델 & 색공간 요약
RGB(가산혼합)와 CMYK(감산혼합)는 디스플레이와 인쇄라는 서로 다른 장치를 위한 모델입니다. HSL/HSV는 RGB를 직관적으로 조정하기 위한 좌표계입니다.
RGB/HEX/HSL/HSV 변환은 결정적이며, CMYK 매핑은 ICC 프로파일에 따라 달라집니다(예: sRGB ↔ Coated CMYK).
디바이스 색역(sRGB, Display-P3)에 따라 색 재현 범위가 달라지며, 컬러 관리가 없으면 화면 간 시각 차이가 발생할 수 있습니다.
자주 묻는 질문
Q.알파(투명도)도 지원하나요?
A. 지원합니다. CSS에서 RGBA/HSLA 표기(예: rgba(255,0,0,.5), hsla(0,100%,50%,.5))로 변환해 사용할 수 있습니다.
Q.반올림 규칙은 어떻게 되나요?
A. 표준 반올림 규칙을 적용합니다(소수점 0.5 이상 올림). 출력 형식에 따라 자릿수는 설정에 맞춰 고정됩니다.
Q.변환 결과는 정확한가요?
A. RGB↔HEX↔HSL/HSV 변환은 수학적으로 정확합니다. RGB→CMYK는 프린터/용지 ICC 프로파일에 따라 근사값이므로 참고용으로 활용하세요.
관련 도구
더 많은 개발자 도구를 둘러보세요
CSS 미니파이어 | 용량 압축·최적화
CSS 용량을 줄여 로딩을 가속—완전 로컬로 안전하게 미니파이.
PX ↔ REM 변환기 | 반응형 타이포그래피
루트 폰트 크기에 맞춰 px와 rem을 정확히 변환.