"두 표기 다 같은 색이라며?"
웹 작업 처음 시작하는 친구가 자주 묻는 질문. #FFFFFF랑 rgb(255,255,255)는 같은 흰색인데 왜 두 가지 표기를 둘까. 한 번 풀어 본다.
HEX 표기란
HEX는 16진수 표기법. # 뒤에 6자리(또는 3자리) 숫자·알파벳 조합. 앞 두 자리는 빨강, 가운데 두 자리는 초록, 뒤 두 자리는 파랑. #FF0000은 빨강, #00FF00은 초록, #0000FF는 파랑.
RGB 표기란
RGB는 10진수 표기법. 빨강·초록·파랑 각각 0~255 사이 값. rgb(255,0,0)은 빨강, rgb(0,255,0)은 초록. 사람이 읽기 직관적인 형태.
같은 색, 다른 표기
- #FFFFFF = rgb(255,255,255) → 흰색
- #000000 = rgb(0,0,0) → 검정
- #FF0000 = rgb(255,0,0) → 빨강
- #808080 = rgb(128,128,128) → 회색
왜 두 가지를 두지?
- HEX → 짧고 코드에 옮기기 편함
- RGB → 색감 직관적, 투명도(alpha) 추가 가능
HTML·CSS는 두 표기를 모두 지원. 본인 자료에 맞춰 골라 쓰면 된다. 색상 변환기로 한 표기를 넣으면 다른 표기가 자동 떨어진다.
RGBA 표기
RGB에 투명도(alpha) 한 자리를 더한 형태. rgba(255,0,0,0.5)는 빨강 50% 투명. HEX도 #FF000080 같은 8자리 표기로 투명도 표현 가능.
실제 작업에서
- 디자인 시안 → HEX 자주
- 코드 작성 → 두 표기 자유
- 색감 조정 → RGB·HSL 직관적
- JS 동적 색 처리 → RGB 자주
변환 흐름
한 표기를 다른 표기로 변환하는 일이 잦다. 매번 손으로 환산하기보다 도구 한 번에 처리. 컬러 변환기를 즐겨찾기에 두면 변환에 들어가는 시간이 분 단위로 줄어든다.
마무리
두 표기는 같은 색을 다른 자리에 옮기기 위한 형태. 한 번 차이를 익혀 두면 다음 작업에서 헷갈리지 않는다.