CSS에서 16진수 색상을 사용하는 방법

16진수 색상 사용 방법 알아보기 (CSS에서는 "16진수 색상"이라고도 합니다.

16진수 표기법(또는 16진수 색상 표기법)은 RGB 색상을 표현하는 대체 방법입니다.

16진수 색상 표기법은 각각에 두 개의 값이 있는 세 개의 블록으로 지정됩니다.

함께하면 #RRGGBB가 됩니다.

그리스어로 Hexa는 숫자 6을 의미하며, 보시다시피 RRGGBB의 총합은 6입니다.

16진수 색상이 RGB와 다른 점은 16진수 색상이 0에서 255까지의 값을 2자리로 표현한다는 것입니다.

예를 들어 아래의 100% 흰색 RGB 색상:

rgb(255,255,255);

다음과 같이 16진수 색상으로 표현할 수 있습니다.

#ffffff /* 100% white */

한 단계 더 나아가 두 자리 숫자가 같으면 1자리로 단축할 수 있습니다(예:FF FF FF):

#fff /* shortcut for 100% white */

알파 채널이 있는 16진수

RGB에 RGBa가 있고 HSL에 HSLa가 있는 것처럼 Hex에도 두 자리 블록을 추가하여 표현되는 알파 채널이 있으므로 16진수 색상 표기법 #RRGGBB #RRGGBBAA가 됩니다. (알파의 경우 A).

예를 들어 다음 16진수 색상은 100% 검정색이고 25% 불투명도(75)입니다. ):

#00000075 /* Black with 25% opacity */

결과:

알파 채널이 있는 16진수 색상

Btw:대문자 또는 소문자를 사용하여 16진수 색상 표기법을 작성할 수 있습니다. #ffffff를 쓰든 #FFFFFF를 쓰든 상관없습니다.