RGBA를 RGB로 변환하는 도구 (배경색 합성)
반투명한 전경색(RGBA)과 배경색을 지정하면 알파 블렌딩을 통해 두 색을 합성한 불투명 RGB 색상을 계산합니다. rgba() 미지원 환경을 위한 대체 색상 생성에 유용합니다.
알파 블렌딩 계산식
RGBA를 불투명한 RGB로 변환하는 처리는 "알파 블렌딩"(over 연산자)이라고 하며, R·G·B 각 채널에 대해 다음 식을 독립적으로 적용한 뒤 마지막에 소수점을 반올림합니다.
| 계산식 | result = foreground × alpha + background × (1 − alpha) |
|---|
사용 팁
- 메일 HTML 템플릿이나 일부 구버전 브라우저(IE 등)는 `rgba()`나 `opacity`를 지원하지 않을 수 있으므로, 이 도구로 계산한 불투명 RGB 값을 `background-color`의 대체값으로 함께 지정하면 안전합니다.
- 전경색과 배경색 모두 색상 선택기와 HEX 코드 직접 입력을 지원하므로, 디자인 도구에서 확인한 정확한 색상을 그대로 붙여넣어 사용할 수 있습니다.
- 불투명도(알파값)는 0~100% 슬라이더로 조절할 수 있습니다. 0%는 완전히 투명(즉 배경색 그대로), 100%는 완전히 불투명(즉 전경색 그대로)을 의미합니다.
- 배경색에 흰색·검정 프리셋 버튼을 제공하는 이유는 이 두 색이 실무에서 가장 자주 비교되는 대표적인 예(라이트 모드/다크 모드 배경)이기 때문입니다. 실제 페이지 배경색에 가까운 색을 직접 입력하면 더 정확한 대체 색상을 얻을 수 있습니다.
자주 묻는 질문
여담 ― 알파 블렌딩 기술의 기원
알파 블렌딩(alpha compositing)이라는 개념은 1984년 Thomas Porter와 Tom Duff가 컴퓨터 그래픽스 분야에서 발표한 논문 "Compositing Digital Images"에서 비롯된 것으로 알려져 있습니다. 그 이전까지는 전경과 배경을 합성할 때 색상 정보만 다루는 것이 일반적이었지만, 이 논문에서 불투명도를 나타내는 네 번째 채널(알파 채널)을 색상 정보와 함께 다루는 방법이 체계화되었고, 이후 CG·이미지 편집 소프트웨어의 표준적인 사고방식이 되었습니다.
오늘날에는 PNG나 SVG 같은 이미지 포맷, CSS의 `rgba()`/`opacity`, 대부분의 그림 그리기 소프트웨어의 레이어 기능에 이르기까지 투명도를 다루는 거의 모든 기술이 이 알파 블렌딩의 사고방식을 기반으로 하고 있습니다. "over 연산자"라고 불리는 가장 기본적인 합성 방법(전경을 배경 위에 겹치는 방식)이 바로 이 도구가 채택한 계산식입니다.
한편 구버전 메일 클라이언트나 레거시 브라우저와의 호환성 문제는 오늘날까지도 완전히 해소되지 않았습니다. 특히 HTML 메일은 렌더링 엔진의 제약이 커서 최신 CSS의 투명 표현 기법을 그대로 사용할 수 없는 경우가 많기 때문에, 미리 불투명 색상으로 변환한 대체값을 준비해 두는 실무 기법이 지금도 널리 사용되고 있습니다.