왜 색상 포맷이 이렇게 많을까?
CSS나 디자인 도구, 이미지 편집 소프트웨어를 다뤄봤다면 같은 색상을 여러 방식으로 표현하는 걸 보셨을 겁니다. 선명한 빨강이 #FF0000일 수도, rgb(255, 0, 0)일 수도, hsl(0, 100%, 50%)일 수도 있죠. 전부 같은 색인데 왜 다른 포맷이 존재할까요? 각 포맷은 고유한 목적에 맞게 설계되었고, 이를 이해하면 디자인과 개발 작업이 훨씬 수월해집니다.
HEX: 웹의 표준
HEX 컬러 코드는 웹에서 가장 널리 쓰이는 색상 표기법입니다. #3A86FF처럼 16진수 두 자리씩 세 쌍으로 빨강, 초록, 파랑 채널을 나타내며, 각각 00부터 FF까지(10진수로 0~255) 값을 가집니다. 네 번째 쌍을 추가하면 투명도도 지정할 수 있습니다.
HEX 코드는 간결하고 복사·붙여넣기가 편해서 자주 쓰입니다. 다만 사람이 읽기에는 직관적이지 않습니다. #3A86FF만 보고 어떤 색인지 바로 떠올리기 어렵죠.
RGB: 화면의 기본 언어
RGB는 Red, Green, Blue의 약자로 화면이 빛을 섞어 색을 만드는 방식을 그대로 반영합니다. rgb(58, 134, 255)는 각 채널의 강도를 0에서 255 사이로 지정합니다. rgba()를 쓰면 투명도도 조절할 수 있습니다.
RGB는 디스플레이의 원래 언어이므로, 프로그래밍으로 색상을 조작할 때 자연스럽습니다. 특정 채널만 살짝 조정하고 싶을 때 — 예를 들어 파랑을 조금 더 넣고 싶을 때 — RGB가 가장 직관적입니다.
HSL: 사람을 위한 포맷
HSL은 Hue(색상), Saturation(채도), Lightness(명도)의 약자로, 사람이 색을 인식하는 방식에 가깝게 설계되었습니다. 색상은 색상환의 각도(0~360), 채도는 색의 선명함(0~100%), 명도는 밝기(0~100%)입니다.
HSL은 컬러 팔레트를 만들 때 빛을 발합니다. 브랜드 색상을 좀 더 어둡게? 명도를 내리면 됩니다. 차분한 톤으로? 채도를 줄이면 됩니다. HSL에서는 직관적인 이 조정이 HEX나 RGB에서는 번거로운 계산을 요구합니다.
HSV/HSB: 디자이너의 선택
HSV(Hue, Saturation, Value) — HSB(Brightness)라고도 부릅니다 — 는 HSL과 비슷하지만 밝기 처리 방식이 다릅니다. HSV에서 Value 100%는 해당 색의 가장 선명한 상태를 뜻하고, HSL에서 Lightness 100%는 항상 흰색입니다. Figma나 Photoshop 같은 디자인 도구의 컬러 피커 대부분이 HSV를 쓰는 이유가 여기 있습니다.
CMYK: 인쇄를 위한 포맷
HEX, RGB, HSL이 빛을 더하는 가산혼합이라면, CMYK(Cyan, Magenta, Yellow, Key/Black)는 잉크를 겹치는 감산혼합 모델입니다. 화면은 검정에서 빛을 더하고, 프린터는 흰 종이에 잉크를 올립니다. 화면에서 선명하게 보이는 색이 인쇄하면 탁해지는 경우가 있는 건 이 차이 때문입니다.
상황에 맞는 포맷 선택법
CSS에서 빠르게 색을 지정하고 공유할 때는 HEX. 프로그래밍으로 개별 채널을 조작할 때는 RGB. 색상 시스템이나 테마, 접근성을 고려한 팔레트를 구성할 때는 HSL이 적합합니다. 포맷 간 변환이 필요하다면, 전용 색상 변환 도구를 쓰면 오차 없이 정확하게 변환할 수 있습니다.