웹 디자인 작업을 하다 보면 디자이너가 색상 코드를 보내준다. #FF5733 같은 HEX 코드로 오는 경우가 많은데, CSS에서는 RGB로 써야 할 때가 있다. 특히 투명도를 조절하려면 RGBA 형식이 필요하다.
HEX와 RGB의 차이
HEX(16진수) 코드는 #RRGGBB 형식으로, 빨강, 초록, 파랑 각각을 00-FF(0-255)로 표현한다. RGB는 같은 정보를 10진수로 표현한 것이다. #FF5733을 풀어보면 FF는 255, 57은 87, 33은 51이니까 rgb(255, 87, 51)이 된다.
손으로 계산하려면 16진수를 10진수로 변환해야 한다. F는 15니까 FF는 15*16 + 15 = 255. 이런 계산을 매번 하기는 번거롭다.
색상 변환 도구 활용
색상 변환기에 HEX 코드를 입력하면 RGB, HSL 등 다른 형식으로 바로 변환된다. 반대로 RGB 값을 넣으면 HEX 코드를 얻을 수 있다.
색상 코드 형식별 특징
- HEX (#RRGGBB): 간결하고 웹에서 많이 사용
- RGB (R, G, B): 각 색상 채널을 직관적으로 표현
- RGBA (R, G, B, A): RGB에 투명도 추가 (0-1)
- HSL (H, S%, L%): 색상, 채도, 밝기로 표현
RGBA로 투명도 조절하기
배경색에 투명도를 주고 싶을 때 RGBA를 쓴다. #FF5733을 50% 투명하게 만들려면 rgba(255, 87, 51, 0.5)로 쓰면 된다. 마지막 숫자 0.5가 투명도인데, 0이면 완전 투명, 1이면 완전 불투명이다.
색상 변환기에서 변환된 RGB 값을 가져다가 RGBA로 쓸 수 있다. 미리보기 기능으로 색상이 어떻게 보이는지 확인할 수도 있어서 편리하다.
디자인 협업 팁
피그마나 스케치에서 색상을 추출할 때 HEX로 복사되는 경우가 많다. 개발할 때는 상황에 따라 형식을 바꿔서 써야 하니까, 변환 도구를 즐겨찾기 해두면 좋다. 색상 팔레트 전체를 정리할 때도 여러 형식으로 저장해두면 나중에 작업할 때 편하다.