웹사이트를 만들거나 디자인 작업을 하다 보면 색상 코드를 다뤄야 할 때가 많습니다. 디자이너에게 받은 색상이 RGB 형식인데 CSS에서는 HEX 코드가 필요할 수 있습니다. 인쇄용으로 CMYK 값이 필요한 경우도 있습니다. 색상 변환기를 사용하면 이런 형식들을 자유롭게 바꿀 수 있습니다.
HEX RGB HSL의 차이
HEX는 샵 기호 뒤에 6자리 16진수로 색상을 표현합니다. FF5733처럼 생긴 코드가 HEX입니다. 웹 개발에서 가장 많이 씁니다. RGB는 빨강 초록 파랑 세 가지 값을 0에서 255 사이 숫자로 표현합니다. HSL은 색상 채도 명도로 색을 나타내는 방식으로 색상 조절이 직관적입니다. 세 형식 모두 같은 색상을 다르게 표기하는 방법입니다.
디자이너와 개발자 간 협업
디자이너가 포토샵이나 피그마에서 작업하면 RGB나 HSL 값을 주는 경우가 많습니다. 개발자는 이걸 CSS에 적용하려면 HEX로 바꿔야 할 때가 있습니다. 반대로 기존 웹사이트의 HEX 코드를 디자인 툴에 입력하려면 RGB로 변환해야 합니다. 컬러 코드 변환기에 아무 형식이나 입력하면 나머지 형식이 자동으로 계산됩니다.
CMYK와 인쇄 색상
화면에서 보는 색상과 인쇄물의 색상은 다릅니다. 모니터는 빛을 섞어서 색을 만들고 인쇄는 잉크를 섞어서 색을 만들기 때문입니다. 인쇄용 색상은 CMYK 형식을 사용합니다. 청록 마젠타 노랑 검정 네 가지 잉크 비율로 색을 표현합니다. 웹용 디자인을 인쇄물로 옮길 때는 CMYK 변환이 필요합니다. RGB CMYK 변환기로 인쇄 전에 색상 값을 확인할 수 있습니다.
컬러 피커와 조합 기능
정확한 색상 코드를 모를 때는 컬러 피커가 유용합니다. 원하는 색상을 눈으로 선택하면 해당 색상의 모든 코드 값을 알려줍니다. 보색이나 유사색 같은 조화로운 색상 조합을 찾는 기능도 있습니다. 메인 색상 하나를 정하면 어울리는 색상들을 자동으로 추천해줍니다.
정리
색상 코드 형식은 여러 가지지만 결국 같은 색상을 표현하는 방법입니다. 작업 환경에 맞는 형식을 쓰면 되고 변환이 필요하면 도구를 활용하면 됩니다. 온라인 색상 변환기로 HEX RGB HSL CMYK를 자유롭게 바꿔서 사용하세요.