HEX, RGB, HSL — 색상 코드 읽는 법
2026년 7월 28일 검토
Boltpic
현재 Boltpic 도구의 동작을 설명하고 관련 기술 자료를 연결했습니다. 이미지·브라우저·기기에 따라 달라지는 결과는 고정값이 아니라 조건과 함께 안내합니다.
빨강 하나를 세 가지로 적어 보겠습니다. #e63946, rgb(230, 57, 70), hsl(355, 78%, 56%). 화면에 찍히는 픽셀도, 눈에 보이는 색도 완전히 같습니다. 세 가지 색이 아니라 세 가지 표기법이고, 각각 편리한 용도가 다를 뿐입니다.
세 표기의 관계를 알면 브랜드 색을 맞추거나 버튼의 호버 색을 만들고, 글자와 배경의 대비를 설명하기가 쉬워집니다.
HEX: 짧고 복붙하기 좋은 표기
HEX 코드는 숫자 세 개를 변장시킨 것입니다. # 뒤의 두 글자씩이 각각 빨강·초록·파랑 채널이고, 16진수라서 00이 0, ff가 255입니다. #e63946을 풀면 빨강 e6(230), 초록 39(57), 파랑 46(70)이 됩니다. 세 쌍이 모두 같은 글자의 반복이면 줄여 쓸 수 있어서 #ffffff는 #fff가 됩니다.
알아 두면 좋은 것 두 가지. #e6394680처럼 8자리로 쓰면 네 번째 쌍이 불투명도가 되는데, 80이면 약 50%입니다. 그리고 HEX는 대소문자를 가리지 않아서 #E63946과 #e63946은 같은 색입니다. HEX가 사실상 표준이 된 이유는 하나입니다. 채팅, 이슈 티켓, 스타일시트 어디에든 붙여 넣기 가장 짧고 확실한 형태거든요.
RGB: 화면이 실제로 생각하는 방식
rgb(230, 57, 70)은 같은 내용을 10진수로 말합니다. 빨강·초록·파랑 빛을 각각 0~255 중 얼마나 섞을지요. 화면은 말 그대로 이렇게 동작합니다 — 픽셀마다 작은 빛 세 개가 있으니까요. 그래서 빛 자체를 다룰 때는 RGB가 가장 자연스럽습니다. 알파 값을 붙이면 rgba(230, 57, 70, 0.5), 반투명 버전이 됩니다.
RGB의 약점은 손으로 색을 고치려는 순간 드러납니다. 문제: rgb(230, 57, 70)을 같은 빨강으로 유지하면서 조금만 어둡게 하려면? 세 숫자를 감으로 낮추다 보면 색조 자체가 틀어지기 십상입니다. 바로 이 문제를 푸는 게 HSL입니다.
HSL: 사람을 위해 설계된 표기
hsl(355, 78%, 56%)는 색상환의 색조 355°, 채도 78%, 명도 56%라는 뜻입니다. 색의 계열, 선명한 정도, 검정과 흰색 사이의 위치를 나눠 조절하므로 관련 색을 만들기 쉽습니다.
호버용으로 더 어두운 색을 만들 때는 색조와 채도를 유지하고 명도를 낮출 수 있습니다. 더 차분한 버전에는 채도를 낮추세요. 아래처럼 기준색 하나에서 작은 명암 체계를 만들 수 있습니다.
--brand: hsl(355, 78%, 56%);
--brand-hover: hsl(355, 78%, 46%);
--brand-soft: hsl(355, 60%, 92%);
--brand-text: hsl(355, 70%, 32%);(더 파고들면 최신 CSS에는 같은 일을 더 정확한 인지 모델로 하는 oklch()와 신형 디스플레이용 광색역 표기도 있습니다. 존재를 알아 두는 정도면 충분하고, 일상 작업은 HSL로 다 됩니다.)
그래서 뭘 쓰면 되나요?
CSS는 세 표기를 모두 지원합니다. 값을 공유·보관할 때는 HEX, 색상을 조정하거나 변형을 만들 때는 HSL, 코드나 다른 도구가 채널 값을 제공할 때는 RGB를 사용할 수 있습니다. 표기를 섞어도 동작하지만, 팀 안에서는 일관된 규칙을 정하는 편이 유지보수에 유리합니다.
이미지에서 정확한 값 뽑아내기
실제 색 작업은 대부분 “이 색이 뭐지?”에서 시작합니다. 로고 파일, 참고하는 사이트의 스크린샷, 분위기를 가져오고 싶은 사진에서요. 스포이드가 그 질문에 정확히 답합니다. Boltpic 컬러픽커는 커서 주변을 확대경으로 키워 보여 줘서 원하는 픽셀 하나를 정확히 집을 수 있고, 값을 HEX·RGB·HSL로 한 번에 알려 줍니다. 한 픽셀이 아니라 이미지 전체의 분위기가 필요하면 팔레트 추출 도구가 대표색들을 한 번에 뽑아 줍니다.
글자 대비 확인하기
색상 코드를 안다고 조합이 자동으로 읽기 좋아지는 것은 아닙니다. WCAG 2.2의 AA 기준은 예외 조건을 제외하고 일반 글자에 4.5:1 이상, 큰 글자에 3:1 이상의 대비를 사용합니다. 흰색 배경의 #aaaaaa 글자는 약 2.3:1입니다. 배포 전에 실제 글자색과 배경색 조합을 검사하세요.