웹디자인 작업 중 HEX 코드로 받은 색상을 CSS에서 rgba로 써야 할 때가 있습니다. #FF5733을 rgb(255, 87, 51)로 어떻게 바꿀까요? 색상 코드 변환이 필요한 상황과 방법을 정리했습니다.
HEX와 RGB의 차이
HEX는 16진수로 색상을 표현하고(#RRGGBB), RGB는 빨강, 초록, 파랑의 값을 0~255로 표현합니다. 둘 다 같은 색상을 나타내지만 사용하는 상황이 다릅니다. CSS에서 투명도를 넣으려면 rgba를 써야 해서 변환이 필요하죠.
변환이 필요한 상황
디자이너가 #FF5733으로 전달한 색상에 50% 투명도를 넣고 싶다면 rgba(255, 87, 51, 0.5)로 써야 합니다. 색상 코드 변환기에 HEX 값을 입력하면 RGB 값을 바로 알 수 있어요.
변환 방법
HEX #FF5733에서 FF는 빨강(255), 57은 초록(87), 33은 파랑(51)입니다. 16진수를 10진수로 계산해야 하는데 복잡하니까 HEX RGB 변환기를 쓰는 게 빠릅니다.
HSL 변환도 가능
색상의 밝기나 채도를 조절할 때는 HSL 형식이 편합니다. 온라인 색상 변환 도구에서 HEX, RGB, HSL을 자유롭게 변환할 수 있으니 필요에 따라 활용하세요.