HEX·RGB·HSL, 색 코드는 왜 여러 개일까

디자인 툴과 CSS, 인쇄 용도에 따라 색을 적는 방식이 다릅니다. 이미지 컬러 피커로 값을 뽑았다면, 그 숫자를 어디에 붙여 넣을지 이해하는 것이 다음 단계입니다. 이 글은 웹에서 가장 자주 만나는 표기를 중심으로 설명합니다.

HEX: 웹의 기본 언어

HEX는 #3D9CF5처럼 여섯 자리 16진수로 빨강·초록·파랑을 표현합니다. CSS, 많은 디자인 툴, 개발 협업에서 가장 흔합니다. 특별한 이유가 없으면 웹 작업의 기본 교환 형식으로 HEX를 쓰면 됩니다.

RGB는 각 채널을 0~255 숫자로 적습니다. HEX와 본질적으로 같은 색 정보이며, 투명도(알파)를 코드에서 다루거나 계산할 때 편한 경우가 있습니다. ‘값이 다르다’기보다 ‘표기만 다르다’고 이해하면 됩니다.

HSL은 색상·채도·밝기로 나눕니다. 버튼 hover 시 조금 밝게, 같은 톤의 단계적 팔레트를 만들 때 직관적입니다. 브랜드 메인 색을 정한 뒤 밝기만 바꿔 변형 색을 만들 때 유용합니다.

HSV는 그래픽 툴 색상 선택 UI와 가까운 표기입니다. CMYK는 인쇄용 개념이지만, 웹 도구의 단순 변환값은 참고용인 경우가 많습니다. 인쇄 최종본은 색상 프로파일이 있는 전용 프로그램에서 다루는 것이 안전합니다.

그라데이션·그림자·안티앨리어싱 경계는 중간값이 나오기 쉽습니다. 로고의 평평한 단색 영역을 확대 후 클릭하세요. 여러 점을 스와치에 모아 비교하면 ‘진짜 브랜드 색’에 가깝게 고를 수 있습니다. 실습은 이미지 컬러 피커, 자세한 조작은 컬러 피커 가이드를 참고하세요.

메인 색 하나와 밝은/어두운 변형 두 개, 중립 회색 한두 개만 정리해도 실무에 충분합니다. HEX를 기준값으로 적고, 필요 시 HSL 밝기만 바꿔 변형을 만드세요. 팀과 공유할 때는 이미지 파일보다 코드 목록이 재현성이 높습니다.

모니터마다 색이 달라 보여도, 파일에 기록된 코드 자체는 같습니다. 내 화면에서 예쁘다와 코드가 같다를 구분해 소통하면 수정 요청이 명확해집니다.

배경과 글자 색의 대비가 낮으면 가독성이 떨어집니다. 예쁜 파스텔 조합이라도 본문 텍스트에는 충분한 대비를 유지하세요. 색 코드 추출 후 실제 UI에 적용해 보고, 작은 글씨에서도 읽히는지만 확인하면 완성도가 올라갑니다.

색 코드는 디자인 언어의 기본 단위입니다. 이미지에서 추출한 값을 문서화해 두면 재작업과 커뮤니케이션 비용이 줄어듭니다.

예쁜 색과 읽기 쉬운 색은 다를 수 있습니다. UI 텍스트에는 대비를 우선하고, 포인트 색은 절제해 쓰는 편이 안전한 경우가 많습니다.

추출한 색을 CSS 변수(--brand, --brand-soft)로 이름 붙이면 재사용이 쉬워집니다. 디자인 툴과 개발이 함께 일할 때는 HEX를 단일 소스 오브 트루스로 정하고, HSL 변형은 문서에 부가적으로 적는 방식을 추천합니다.

컬러 피커는 이미지를 Canvas에 그린 뒤 getImageData로 픽셀을 읽습니다. 그래서 파일이 기기 밖으로 나가지 않습니다. 다만 확대·보간 때문에 경계 픽셀은 중간색이 나오기 쉬워, 로고의 평평한 단색 영역을 찍으라고 안내합니다.

Chrome/Edge의 EyeDropper API가 있으면 ‘화면에서 바로 색 추출’ 버튼을 노출합니다. Firefox·Safari는 지원하지 않아 버튼이 숨겨집니다. 외부 이미지 URL은 CORS에 막히면 실패하므로, 그때는 파일 업로드가 확실한 경로입니다.

웹·CSS는 HEX/RGB, 톤 조절은 HSL, 인쇄는 전용 CMYK 워크플로. 목적에 맞는 표기를 고르고, 이미지에서 뽑을 때는 깨끗한 단색 영역을 겨냥하세요.