웹사이트 디자인하다 보면 RGB와 HEX를 오가는 일이 잦다. 디자이너가 RGB로 주면 개발자는 HEX가 필요하고, 그 반대도 마찬가지. 색상 변환기로 간단히 해결할 수 있는데, 원리를 알면 더 이해가 깊어진다.
RGB와 HEX의 관계
RGB는 Red, Green, Blue 각각 0~255 범위의 값이다. HEX는 16진수로 표현한 것. RGB(255, 128, 0)을 HEX로 바꾸면 #FF8000이 된다. 255는 16진수로 FF, 128은 80, 0은 00이다. 색상 변환기가 이 계산을 자동으로 해준다.
16진수 변환 원리
10진수를 16으로 나누고 나머지를 역순으로 읽는다. 255 ÷ 16 = 15 나머지 15, 15와 15는 각각 F이므로 FF. 128 ÷ 16 = 8 나머지 0이므로 80. 수학적으로 정확하지만 매번 계산하긴 번거롭다.
실무에서 활용
CSS에서는 주로 HEX를 쓴다. #FFFFFF, #000000 같은 표기가 익숙하다. 하지만 투명도를 넣으려면 rgba() 형식이 필요하다. rgba(255, 128, 0, 0.5)처럼. 상황에 따라 형식을 바꿔야 해서 색상 변환기가 유용하다.
색상 체계 이해의 중요성
디자이너와 개발자가 같은 색상을 다른 형식으로 말하면 혼란이 생긴다. 색상 코드 체계를 이해하면 소통이 원활해지고 실수도 줄어든다.
변환 원리 상세
RGB 각 채널(0~255)을 16진수로 변환합니다. 255는 FF, 128은 80, 0은 00입니다. 예: RGB(255, 128, 64) → #FF8040. 역변환은 두 자리씩 끊어서 10진수로 바꾸면 됩니다. 색상 변환기에서 이 과정을 자동으로 처리해줍니다.
JavaScript 구현
const hex = "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join(""); 이 한 줄로 RGB를 HEX로 변환할 수 있습니다. padStart로 한 자리 숫자도 두 자리로 만들어줍니다.