색상 코드 변환·피커

HEX·RGB·HSL·CMYK, 무엇이 다른가

웹과 디자인 작업에서는 똑같은 색을 상황에 따라 서로 다른 방식으로 표기합니다. HEX는 #ff0000 처럼 빨강·초록·파랑 세 채널을 각각 두 자리 16진수로 이어 붙인 코드로, CSS와 대부분의 디자인 툴에서 가장 널리 쓰이는 표기입니다. RGB는 동일한 색을 0부터 255까지의 정수 세 개로 나타내며, 빛의 삼원색을 더해서 화면 색을 만드는 가산혼합 방식을 그대로 반영합니다. HSL은 색을 색상(Hue) 0도부터 360도, 채도(Saturation)와 밝기(Lightness)를 백분율로 나눠 표현해, 사람이 머릿속에 떠올린 색을 직관적으로 조절하기에 좋습니다. CMYK는 청록·자홍·노랑·검정 네 가지 잉크의 비율로 색을 나타내며 주로 인쇄 작업에 쓰입니다. 이 도구는 네 가지 표기를 한 화면에서 실시간으로 서로 바꿔 주기 때문에, 디자이너가 건넨 HEX 코드를 개발자가 RGB로 옮기거나 화면용 색을 인쇄용 CMYK 참고값으로 즉시 확인하는 일이 훨씬 수월해집니다. 값 하나만 입력하면 나머지 세 표기가 자동으로 계산되어, 색 코드를 손으로 환산하다 생기는 실수를 크게 줄여 줍니다.

색상 피커와 스포이드로 색 뽑기

이 도구에서 색을 고르는 방법은 세 가지입니다. 첫째, 화면의 색상 피커를 열어 사각형 팔레트에서 원하는 색을 직접 클릭하거나 드래그해 고를 수 있습니다. 둘째, 이미 알고 있는 값이 있다면 HEX·RGB·HSL·CMYK 입력란에 코드를 그대로 붙여 넣으면 됩니다. 예를 들어 #3366cc 를 HEX 칸에 입력하면 곧바로 rgb(51, 102, 204), hsl(220, 60%, 50%), cmyk(75, 50, 0, 20)가 함께 표시됩니다. 셋째, 최신 크롬·엣지 계열 브라우저라면 스포이드(EyeDropper) 버튼을 눌러 화면 어디에 있는 픽셀이든 색을 그대로 뽑아낼 수 있습니다. 웹페이지, 이미지, 다른 앱 위의 색까지 클릭 한 번으로 집어 오므로, 마음에 드는 배너나 로고의 색을 그대로 재현할 때 특히 편리합니다. 뽑아낸 색은 즉시 네 가지 표기로 변환되어 나오니, 복사 버튼으로 필요한 형식을 눌러 CSS나 디자인 파일에 바로 붙여 넣으면 됩니다. 스포이드는 브라우저가 지원하지 않으면 버튼이 비활성화되며, 이때는 색상 피커나 코드 입력을 이용하면 됩니다.

HSL로 색을 자유롭게 조절하기

HSL 표기는 색을 다듬을 때 진가를 발휘합니다. 색상(H) 값만 바꾸면 밝기와 채도는 그대로 둔 채 빨강에서 주황, 노랑, 초록으로 색조만 회전시킬 수 있어 같은 톤의 색 계열을 만들기 좋습니다. 채도(S)를 낮추면 색이 점점 회색에 가까워지고, 높이면 더 선명하고 쨍한 색이 됩니다. 밝기(L)를 올리면 흰색에 가까워지고 내리면 검정에 가까워지므로, 같은 색상에서 밝은 버전과 어두운 버전을 만들어 버튼의 기본·호버 상태나 그래프의 명암 단계를 손쉽게 구성할 수 있습니다. 예컨대 hsl(220, 60%, 50%)에서 밝기만 30%로 낮추면 더 짙은 남색이, 70%로 올리면 부드러운 하늘색이 됩니다. RGB나 HEX 숫자만으로는 이런 조절이 직관적이지 않지만, HSL에서 값 하나를 움직인 뒤 이 도구로 다시 HEX·RGB로 되돌리면 디자인 시스템에 바로 쓸 수 있는 일관된 색 팔레트를 빠르게 뽑아낼 수 있습니다. 색상환을 머릿속으로 그리며 서로 잘 어울리는 보색이나 유사색을 찾을 때도 HSL의 색상 각도가 좋은 길잡이가 됩니다.

CMYK 변환과 인쇄 색의 한계

HEX, RGB, HSL은 모두 화면에서 빛으로 색을 표현하는 방식이라 서로 정확하게 1대1로 변환됩니다. 하지만 CMYK는 사정이 다릅니다. 이 도구가 보여 주는 CMYK 값은 색 관리(ICC 프로파일) 없이 단순한 수식으로 계산한 참고용 추정치입니다. 실제 인쇄 결과는 사용하는 잉크, 용지의 종류와 흡수율, 인쇄 장비와 교정 방식에 따라 화면에서 본 색과 눈에 띄게 달라질 수 있습니다. 특히 화면에서 선명하게 보이는 형광빛 파랑이나 초록 같은 색은 CMYK 잉크로는 재현 범위를 벗어나 탁하게 나오는 경우가 많습니다. 따라서 명함, 브로슈어, 포장재처럼 색이 중요한 인쇄물을 준비한다면, 이 값은 어디까지나 출발점으로만 삼고 반드시 인쇄소에서 제공하는 실제 색상 견본(컬러 칩)이나 교정쇄로 최종 색을 확인하시길 권합니다. 이렇게 하면 화면과 인쇄물의 색 차이로 인한 재작업과 추가 비용을 미리 줄일 수 있습니다. 정밀한 브랜드 색이 필요하다면 별색(Pantone) 지정도 함께 고려하세요.

자주 묻는 질문