색상 형식 이해하기: HEX, RGB, HSL 그리고 그 너머
이 변환기가 하는 일
같은 색이라도 표기하는 방법은 여러 가지이며, 이 도구는 하나의 색을 여섯 가지 표기로 한 번에 옮겨 줍니다. HEX, RGB, HSL 중 하나로 값을 입력하거나 시각적 색상 선택기로 고르면, 대응하는 HEX, RGB, HSL, HSV, CMYK, LAB 표기가 곧바로 나타납니다. HSL 슬라이더로 색상(Hue), 채도, 명도를 조절하면 나머지 형식도 함께 갱신됩니다.
여섯 가지 형식은 고정된 대응표가 아니라 같은 색에서 계산되기 때문에, 선택기나 슬라이더를 움직일 때마다 전체가 실시간으로 다시 계산됩니다. 그래서 복사한 값은 언제나 화면에 보이는 그 색 견본을 그대로 나타냅니다.
언제 어떤 형식을 쓰나요
작업마다 어울리는 표기가 다릅니다. HEX와 RGB는 CSS와 대부분의 디자인 도구에 붙여 넣는 표기이고, HSL은 어떤 색을 조금 더 어둡게 하거나 채도를 낮추고 싶을 때 다루기 쉽습니다. CMYK는 디자인을 인쇄로 넘길 때 의미가 생기고, LAB는 사람 눈에 균등한 간격으로 보이는 색이 필요할 때 유용합니다. 여섯 가지를 나란히 볼 수 있으니, 다른 변환기를 찾지 않고도 지금 하는 작업이 요구하는 표기를 바로 가져올 수 있습니다. 이 값들은 혼자 쓰이는 일이 드뭅니다. rgba() 문자열은 CSS 그림자 생성기에서 부드러운 그림자를 만들 때 그대로 필요하고, HEX 코드 하나는 메타 태그 생성기가 내보내는 theme-color 태그가 브라우저 주소 표시줄을 물들이는 데 쓰입니다.
예시: #FF5733 변환하기
주황색 #FF5733을 보겠습니다. RGB로는 rgb(255, 87, 51)로, 빨강은 최대, 초록은 약간, 파랑은 더 적습니다. HSL로는 대략 hsl(11, 100%, 60%)가 되는데, 색상환에서 빨강 쪽에 가까운 색상, 채도는 최대, 명도는 60%입니다. 인쇄용으로는 약 cmyk(0%, 66%, 80%, 0%)에 대응합니다. 어느 표기든 같은 색 견본을 가리키며, 단지 다른 숫자로 설명할 뿐입니다. 각 값 옆의 복사 버튼을 누르면 코드나 디자인 파일에 바로 붙여 넣을 수 있습니다.
형식 관련 참고 사항과 엣지 케이스
HEX와 RGB는 같은 정보를 담습니다. #FF5733과 rgb(255, 87, 51)은 표기만 다른 같은 색이라 서로 변환해도 잃는 것이 없습니다. 반면 HSL과 HSV는 그 정보를 사람의 직관에 맞게 재구성하므로, 색을 저장하기보다 손보기에 더 편합니다. CMYK는 화면보다 색역이 좁은 인쇄용 모델이라 그 값은 완벽한 일치가 아니라 가까운 근삿값이며, LAB는 장치에 의존하지 않고 지각적으로 균등한 색 공간입니다. 여기 표시되는 HEX, RGB, HSL 결과는 모두 CSS에 그대로 붙여 넣을 수 있습니다.