#FF000080처럼 8자리 HEX 코드를 본 적 있나요? 마지막 두 자리가 투명도(알파)를 나타냅니다. rgba() 대신 사용할 수 있는 이 표기법을 알아봅니다.
8자리 HEX 구조
앞 6자리는 기존 RGB, 뒤 2자리가 알파입니다. 00은 완전 투명, FF는 완전 불투명입니다. 80은 약 50% 투명도입니다. #FF000080은 반투명 빨강입니다.
rgba()와 비교
rgba(255, 0, 0, 0.5)와 #FF000080은 같은 색입니다. HEX가 더 짧고 복붙하기 편하지만, 투명도가 직관적으로 보이지 않는 단점이 있습니다. 색상 변환기로 두 형식을 변환해보세요.
브라우저 지원
모던 브라우저는 모두 지원합니다. IE는 지원하지 않지만, 2022년 이후로는 고려하지 않아도 됩니다. CSS-in-JS 라이브러리들도 대부분 지원합니다.
언제 사용할까
디자인 도구에서 복사한 값을 그대로 쓸 때 편합니다. 팀 컨벤션에 따라 선택하세요.
알파 채널 브라우저 지원 상세
Chrome 62+, Firefox 49+, Safari 10+에서 지원합니다. IE11은 지원하지 않지만 더 이상 고려할 필요가 없습니다. Edge는 처음부터 지원했습니다. 색상 변환기에서 8자리 HEX와 rgba 값을 모두 확인해두면 필요에 따라 선택할 수 있습니다.
디자인 도구와의 호환성
Figma는 8자리 HEX를 그대로 내보냅니다. 일부 도구는 #RRGGBBAA 대신 #AARRGGBB 형식을 사용하니 확인이 필요합니다. 웹 표준은 알파가 뒤에 오는 #RRGGBBAA 형식입니다.
실용적인 팁
색상 작업을 할 때 자주 쓰는 값들은 메모장이나 노션에 정리해두세요. 매번 검색하는 시간을 아낄 수 있습니다. 색상 변환기를 북마크해두면 필요할 때 바로 접속할 수 있습니다.