색상 코드 변환기이란?
색상 코드 변환기는 어떤 색상 값이든 HEX, RGB, HSL, CMYK, HSV로 동시에 변환합니다. 코드를 입력하거나 rebeccapurple 같은 CSS 색상 이름을 붙여 넣거나, 스와치를 클릭해 시각적으로 색을 골라 보세요. 나머지 형식이 즉시 갱신되므로 스타일시트나 인쇄 입고에 필요한 형식만 복사하면 됩니다.
#FF5733, rgb(255,87,51), hsl(11,100%,60%), cmyk(0%,66%,80%,0%), hsv(11,80%,100%) 같은 임의 형식이나 tomato, cornflowerblue 같은 CSS 색상 이름을 입력하거나 붙여 넣으세요. 도구가 형식을 감지하고 나머지 네 가지 값을 채워 줍니다. 옆의 색상 칩이 입력이 올바르게 해석되었음을 즉시 보여 주고, 클릭하면 기기 기본 컬러 피커가 열려 어떤 색조든 시각적으로 골라낼 수 있습니다. 디자인 파일은 한 형식인데 스타일시트, 디자인 도구 또는 인쇄소가 다른 형식을 요구할 때 유용합니다.
사용 방법
- 1단계 - 지원되는 형식 중 하나로 색상 값을 입력하거나 tomato 같은 CSS 색상 이름을 입력하세요(예: #FF5733, rgb(255,87,51), hsl(11,100%,60%)).
- 2단계 — 도구가 입력 형식을 자동 감지하고 실시간으로 다른 모든 형식으로 변환합니다.
- 3단계 - 변환된 값을 클릭해 복사하거나, 색상 미리보기를 클릭해 시각 피커를 열고 새 색조를 골라내세요.
사용 시기
- 브랜드 HEX 값을 CMYK로 변환해 인쇄소에 넘기기 전 단계.
- 스크린샷에서 읽은 RGB 값을 CSS용 HEX로 다시 변환.
- 디자이너가 보내온 HSL 색조가 브랜드 가이드의 원본 HEX와 일치하는지 확인.
결과
웹 개발자가 디자인 파일에서 가져온 브랜드 색상 #2196F3의 RGB 값이 CSS 애니메이션에 필요할 때, 도구가 즉시 rgb(33, 150, 243)과 함께 HSL 및 CMYK 값을 보여줍니다.
자주 묻는 질문
- 왜 인쇄 소프트웨어의 CMYK 값과 약간 다르게 나오나요?
- 화면은 RGB 가산혼합, 인쇄는 CMYK 감산혼합을 씁니다. 도구는 표준 공식을 적용하지만 상업 인쇄 프로파일(Coated FOGRA39, GRACoL 등)은 실제 잉크와 종이에 맞춰 몇 퍼센트 조정합니다. 출력된 CMYK는 가까운 출발점으로 사용하세요.
- #ZZZ처럼 유효하지 않은 값을 입력하면 어떻게 되나요?
- 다른 형식 칸은 비어 있고 색상 칩도 표시되지 않습니다. 입력이 HEX, RGB, HSL, CMYK 중 하나의 유효 패턴과 일치할 때만 결과가 갱신되므로 어중간한 변환 결과로 오해할 일이 없습니다.
- #F53 같은 3자리 HEX도 인식하나요?
- 네. 3자리 HEX는 6자리의 축약 표기로, #F53은 #FF5533과 동일합니다. 도구는 두 가지 형식을 모두 받아들이며, 출력은 항상 6자리 완전 형식으로 통일되어 다른 곳에 붙여 넣어도 모호함이 남지 않습니다.
- HSL과 HSV의 차이는 무엇인가요?
- 둘 다 색조(Hue)에서 시작하지만 HSL은 검정에서 흰색까지의 명도를 나타내고, HSV(HSB라고도 부름)는 순색 대비 밝기를 나타냅니다. 이 변환기는 이제 HSL과 HSV를 나란히 보여 줍니다. CSS는 HSL을, 포토샵은 HSV를 쓰기 때문에 디자이너가 두 형식을 자주 오가며 변환해야 하기 때문입니다.
- 투명도(알파 채널)도 지원하나요?
- 이 변환기는 지원하지 않습니다. 여기의 HEX, RGB, HSL, CMYK는 모두 불투명 값으로 다룹니다. 투명도를 표현하려면 8자리 HEX(#RRGGBBAA)나 rgba()를 써야 하며, 이는 본 도구가 변환하는 네 가지 형식 범위 밖입니다.