색을 숫자로 표현하는 세 가지 방법
화면에 보이는 모든 색깔은 숫자로 이루어져 있습니다. 디자이너가 Figma에서 파란색을 고르면 그 색은 수치로 저장되고, 개발자는 그 수치를 받아서 웹사이트에 적용합니다. 이때 같은 색을 서로 다른 방식으로 표현하는 세 가지 형식이 존재합니다.
세 가지 형식 이해하기
HEX는 디자인 도구에서 가장 흔하게 보이는 형식입니다. # 뒤에 여섯 자리 숫자와 알파벳으로 구성됩니다. Figma나 Adobe 같은 도구에서 색상 코드를 복사하면 보통 이 형식으로 나옵니다. 흰색은 #ffffff, 검은색은 #000000입니다.
RGB는 빨강, 초록, 파랑의 영어 첫 글자를 딴 이름입니다. 각각 0~255 사이의 숫자로 표현됩니다. 화면은 이 세 가지 색의 빛을 섞어서 모든 색을 만들어 냅니다. 세 값이 모두 0이면 검은색, 모두 255면 흰색입니다.
HSL은 색조, 채도, 밝기의 약자로, 사람의 직관에 가장 가까운 방식입니다. 색조는 빨간색부터 시작해 360도를 돌며 무지개 색상 순서로 배치됩니다. 채도는 색이 얼마나 선명한지, 밝기는 얼마나 밝은지를 나타냅니다. 비슷한 색의 배리에이션을 만들 때 편리합니다. 파란색의 밝은 버전, 어두운 버전을 만들고 싶다면 HSL에서 밝기 수치만 조절하면 됩니다.
실제로 언제 변환이 필요할까요?
디자이너가 HEX로 색상을 전달했는데 코드베이스가 RGB를 쓰는 경우, 포토샵에서 작업한 색을 CSS에 적용해야 하는 경우, 브라우저 개발자 도구로 알아낸 HEX 코드를 HSL 입력만 받는 도구에 넣어야 하는 경우가 가장 흔합니다.
사용 방법
HEX 입력창에 코드를 직접 입력하거나, 색상 선택기 아이콘을 클릭해서 시각적으로 색을 고릅니다. RGB나 HSL 칸에서 숫자를 바꾸면 나머지 형식이 실시간으로 업데이트됩니다. 각 형식 옆의 Copy 버튼으로 원하는 값을 바로 복사할 수 있습니다.
자주 묻는 질문
같은 색인데 HEX 코드가 다를 때가 있어요. 색 공간에 따라 약간의 차이가 생길 수 있습니다. 모니터마다, 도구마다 색을 처리하는 방식이 조금씩 다릅니다.
투명도는 어떻게 표현하나요? HEX에 두 자리를 더한 8자리 형식을 쓰면 됩니다. 예를 들어 #ff000080은 빨간색 50% 투명도입니다. RGB에서는 rgba(255, 0, 0, 0.5)처럼 마지막 숫자로 투명도를 지정합니다. 이 도구는 기본 6자리 HEX와 RGB, HSL을 지원합니다.
디자인을 배우고 싶은데 어떤 형식부터 익혀야 하나요? HEX부터 시작하는 것을 권장합니다. 디자인 도구와 개발 환경 모두에서 가장 널리 쓰이는 형식이기 때문입니다. HSL은 색 팔레트를 직접 만들거나 색상 시스템을 설계할 때 배우면 큰 도움이 됩니다.