안드로이드 색상 투명도 hex를 다룰 때 많은 사람이 #RRGGBB는 익숙하지만 #AARRGGBB에서 멈춥니다. 이번 글에서는 alpha와 AARRGGBB 규칙, 그리고 alpha 퍼센트를 hex로 바꾸는 방법을 XML과 Compose 예시까지 포함해 한 번에 정리해보겠습니다.
먼저 빠르게 보는 법부터 정리
이 글을 길게 읽기 전에 아래 3가지만 먼저 잡으면 됩니다.
1. #RRGGBB는 색상만 표현합니다.
2. #AARRGGBB는 alpha와 색상을 함께 표현합니다.
3. 안드로이드에서는 alpha가 맨 앞에 옵니다.
예를 들어 #80FF0000은 80이 alpha이고 FF0000이 빨강이므로, 50% 정도 투명한 빨강입니다.
자주 쓰는 alpha 값은 아래만 먼저 외워도 실무에서 훨씬 편합니다. 00 = 0%, 1A = 10%, 33 = 20%, 80 = 50%, CC = 80%, FF = 100%.
안드로이드 색상 투명도 hex는 왜 자주 헷갈릴까
많은 개발자는 웹 색상 코드인 #RRGGBB에는 익숙하지만, 안드로이드에서 자주 보는 #80FFFFFF, #33FFFFFF, #CC000000 같은 값은 바로 해석하지 못하는 경우가 많습니다. 핵심 이유는 안드로이드에서는 alpha가 맨 앞에 온다는 규칙을 몸에 익히지 못했기 때문입니다.
#RRGGBB와 #AARRGGBB 차이
#RRGGBB는 색상만 표현합니다. 반면 #AARRGGBB는 alpha(투명도)까지 포함한 형식입니다. 즉, 안드로이드 색상 hex에서 맨 앞 두 자리는 색상이 아니라 alpha입니다.
- AA: alpha(투명도)
- RR: red
- GG: green
- BB: blue
예를 들어 #80FF0000은 50% 정도 투명한 빨강이고, #33000000은 낮은 투명도의 검정색입니다.
AARRGGBB를 한 칸씩 뜯어보면
예를 들어 #80FF0000을 두 글자씩 나누면 80은 alpha, FF는 red, 00은 green, 00은 blue입니다. 즉, 색상 자체는 뒤 6자리 RRGGBB이고, 맨 앞 2자리 AA가 얼마나 보일지를 정합니다.
alpha는 무엇을 뜻할까
alpha는 색 자체가 아니라 얼마나 보이게 할지를 뜻합니다. 00은 완전 투명, FF는 완전 불투명입니다. 즉 값이 작을수록 더 투명하고, 값이 클수록 더 선명하게 보입니다.
왜 50%가 50이 아니라 80일까
alpha 값은 퍼센트가 아니라 0~255 범위의 정수로 저장됩니다. 그래서 50%는 50이 아니라 50 × 255 / 100 = 127.5를 반올림한 128이고, 이를 16진수로 바꾸면 80입니다. 즉, 50% = 80입니다.
alpha 퍼센트를 hex로 바꾸는 공식
공식은 아주 단순합니다. hex alpha = round(퍼센트 / 100 × 255) 입니다.
예를 들어 35%라면 35 / 100 × 255 = 89.25, 반올림하면 89, 16진수로는 59가 됩니다. 즉 35%는 59입니다.
Android XML에서는 이렇게 쓴다
XML에서는 아래처럼 쓰면 됩니다.
<color name="overlay_black_50">#80000000</color>
<color name="white_20">#33FFFFFF</color>
<color name="brand_red_80">#CCFF0000</color>여기서 #80000000은 50% 투명 검정, #33FFFFFF는 20% 정도 투명한 흰색, #CCFF0000은 80% 정도 불투명한 빨강입니다. XML에서는 #AARRGGBB 순서를 그대로 지켜야 합니다.
Jetpack Compose에서는 이렇게 쓴다
Compose에서는 아래 두 방식 중 하나를 많이 씁니다.
val OverlayBlack = Color(0x80000000)
val White20 = Color(0x33FFFFFF)
val OverlayBlack2 = Color.Black.copy(alpha = 0.5f)
val White20_2 = Color.White.copy(alpha = 0.2f)Compose에서는 XML의 #AARRGGBB를 0xAARRGGBB로 옮겨 쓸 수도 있고, copy(alpha = ...)를 사용해 더 읽기 쉽게 표현할 수도 있습니다.
자주 하는 실수
- alpha를 뒤에 붙이는 경우
- 50%를 50으로 쓰는 경우
- #RRGGBB와 #AARRGGBB를 섞어 읽는 경우
- Compose에서 #을 그대로 쓰려는 경우
예를 들어 50% 투명 빨강은 #FF000080이 아니라 #80FF0000입니다. 또한 50%는 50이 아니라 80입니다.
빠르게 해석하는 방법
실무에서는 먼저 앞 2자리가 alpha인지 보고, 뒤 6자리가 무슨 색인지 본 뒤, 자주 쓰는 alpha 값(00, 33, 80, CC, FF)을 빠르게 떠올리면 훨씬 편합니다.
이 글에서 꼭 기억하면 좋은 한 문장
안드로이드 색상 투명도 hex에서 alpha는 맨 앞이고, 50%는 80이다. 이 한 문장만 기억해도 절반은 정리됩니다.
마무리
안드로이드 색상 hex는 처음에는 낯설지만 구조를 한 번 이해하면 생각보다 단순합니다. #RRGGBB는 색상만, #AARRGGBB는 alpha까지 포함하고, alpha는 맨 앞에 옵니다. 그리고 퍼센트는 0~255로 바꾼 뒤 16진수로 표현합니다.
필요할 때마다 이 글의 alpha 표를 참고하면, 안드로이드 색상 투명도 hex와 alpha 값을 다시 찾는 시간을 꽤 줄일 수 있을 것입니다. 안드로이드 UI 구조를 더 넓게 이해하고 싶다면 ViewModel은 왜 필요할까 글도 함께 읽어보면 좋습니다. Compose 색상 API 자체는 Android Developers의 Color 문서도 참고할 수 있습니다.
