CSS에서 16진수 색상(HEX 색상, 헥스 컬러)을 사용하는 방법을 알아보겠습니다.
16진수 표기법(hex color notation)은 RGB 색상을 표현하는 또 다른 방식입니다. RGB 함수보다 코드가 짧고 간결해서 실무에서 널리 사용됩니다.
HEX 색상은 세 개의 블록, 각 블록당 두 자리 값으로 구성됩니다.
- RR — 빨강(Red)
- GG — 초록(Green)
- BB — 파랑(Blue)
이 세 블록을 합치면 #RRGGBB 형태가 됩니다.
'헥사(Hexa)'는 그리스어로 숫자 6을 뜻하는데, RRGGBB가 총 여섯 자리로 이루어져 있어 이름과 딱 맞아떨어집니다.
RGB와 HEX의 가장 큰 차이점은, HEX는 단 두 자리만으로 0부터 255까지의 값을 표현할 수 있다는 점입니다.
예를 들어 아래와 같은 100% 흰색 RGB 색상은,
rgb(255, 255, 255);HEX 색상으로는 이렇게 표현할 수 있습니다.
#ffffff /* 100% 흰색 */나아가 두 자리가 서로 같을 때(예: FF FF FF)는 한 자리로 줄여 쓸 수도 있습니다.
#fff /* 100% 흰색의 축약 표기 */알파 채널(Alpha Channel)이 있는 HEX 색상
RGB에 RGBa가, HSL에 HSLa가 있는 것처럼 HEX에도 알파 채널(투명도 조절)이 있습니다. 두 자리 블록을 하나 더 추가하면 #RRGGBB가 #RRGGBBAA(A는 알파) 형태로 확장됩니다.
예를 들어 아래 HEX 색상은 마지막 두 자리(75)를 알파 값으로 지정해 반투명 효과를 적용한 100% 검정입니다.
#00000075 /* 알파 채널이 적용된 반투명 검정 */적용 결과는 다음과 같습니다.
참고로 HEX 색상 표기는 대문자든 소문자든 상관없습니다. #ffffff와 #FFFFFF는 완전히 동일하게 처리됩니다.
16진수 표기법의 브라우저 지원 현황
- #RRGGBB: 구형 브라우저를 포함한 모든 브라우저에서 지원됩니다.
- #RRGGBBAA: 모든 최신 브라우저에서 지원되지만, IE11에서는 작동하지 않습니다. (IE11을 여전히 '최신'이라 부른다면 말이죠.)