CSS 색상을 표현하는 16진수 그리고 rgba 사용 방법

CSS에서 색상을 표현하는 방법은 대표적으로 고유명사가 있습니다. 빨간색이면 red, 노란색이면 yellow, 파란색이면 blue 등등의 색 이름을 직접 사용하여 표현하는 방법이죠. 하지만 이 방법은 색상이 이미 정해져있으니 특별한 상황이 아니면 거의 사용하지 않는 방식입니다. 가장 많이 사용하는건 16진수 색상코드입니다.

 

16진수 색상코드

HTML에서 색상을 표현하는 16진수는 0부터 F까지의 숫자와 알파벳 조합으로 완성된 6자리 코드입니다.

 

보통 색상코드는 #(샵)을 붙이며 뒤에는 6자리 숫자와 A~F까지 알파벳을 조합하여 입력합니다. 빛의 3원색은 빨강, 초록, 파랑이라고 학창시절에 배웠던것이 기억나시는지요? 빛의 삼원색이 모두 중첩되면 흰색이 되죠. 이 빛의 3원색을 영어 앞글자를 따서 RGB 색상이라고 부르기도 하고요. 6자리 색상 코드에서 맨 왼쪽의 두 자리는 빨간색을 표현하는 코드이고 가운데 두 자리는 초록색을, 마지막 맨 오른쪽 두 자리 코드는 파란색을 표현한다고 보시면 됩니다.

 

포토샵을 많이 사용해보신분들이라면 아마 더 이해가 쉬울 것입니다. 숫자가 가장 낮은 0이 가장 어두운 색이며 흔히 검정색을 표현합니다. 그리고 가장 높은 F의 경우가 검정색의 반대인 흰색을 표현합니다. 따라서 값이 높을수록 화이트 색상에 가까워지고 낮을수록 어두운 블랙 표현이 됩니다. 그러면 검정색과 흰색 표현은 이렇게 하면 될 것입니다.

 

#000000 : 검은색

#FFFFFF : 흰색

 

참고로 알파벳은 대소문자 구별이 없습니다. 자유롭게 사용하시면 되지만 기왕이면 대문자를 사용합시다. 알아보기가 쉬우니까요.

 

그래픽 프로그램에 반드시 존재하는 기능이 바로 색상 선택 창입니다. 위의 예시는 일러스트레이터에 포함되어있는 색상 선택창입니다. 보시면 색상바를 옮길때마다, 색 커서의 위치를 바꿀때마다 #부분에 입력된16진수 색상 코드가 실시간으로 변하고 있음을 알 수 있습니다. 따라서 원하는 색을 선택 후 색상 코드만 그대로 복사해서 사용하는 방식으로 원하는 색을 HTML, CSS서 지정해 표현할 수 있습니다. 그럼 만약 그래픽 프로그램이 없다면 원하는 색의 16진수 코드를 알 수 없는 것일까요? 그렇지 않습니다.

 

https://html-color-codes.info/Korean/

HTML 컬러 코드

HTML 컬러 코드를 제공하는 웹페이지가 있습니다. 위의 페이지에서 편리하게 원하는 색을 선택 후 코드를 그대로 가지고 와서 적용하면 됩니다.

 

그런데 가끔 다른 웹페이지를 참고하려고 크롬 개발자툴로 색상을 살펴보는데 6자리가 아닌 3자리 코드로 입력된 경우도 목격하셨을지도 모르겠습니다. 이 경우는 RGB를 담당하는 각 코드의 값이 서로 같은 경우입니다. 위의 예시에서 검정색과 흰색을 각 #000000과 #FFFFFF로 표현했잖습니까? 이 경우는 RRGGBB 의 각 색을 담당하는 코드가 서로 같죠. 따라서 이 경우에는 3자리로 압축할 수 있는 것입니다. #000과 #FFF로 말입니다. 이해되시죠?

 

#0F0 = #00FF00

#5A8 = #55AA88

#F54 = #FF5544

 

이런 의미인 것입니다. 이제 방법을 알았으니 16진수 색상코드로 CSS에서 원하는 색을 얼마든지 표현할 수 있을 것입니다.

 

RGBA

이번에는 rgba 값입니다. 방금 위에서 색의 3원색을 언급했었죠? 그렇습니다. rgba에서의 rgb가 바로 빛의 3원색입니다. 다시 색상 선택창으로 살펴보겠습니다.

 

포토샵이나 일러스트레이터에 있는 색상 선택창을 살펴보시면 #16진수 입력 외에도 RGB에 대한 값을 입력하는 옵션도 있습니다. 각 레드, 그린, 블루를 담당하고 0부터 최대 255까지 입력 가능합니다. 완전 순도 100% 초록색의 경우라면 위의 예시처럼 R과 B의 값을 0으로 완전 미적용시키고 G값만 최대치인 255로 입력하면 됩니다. 직관적인 표현 방법이라 16진수 코드보다 색 표현이 더 쉬울 수 있습니다.

 

그럼 과연 A는 무엇일까요? A는 알파(Alpha)라고 부르는 값입니다. RGBA의 A는 색상 투명도를 담당합니다. 포토샵에서도 레이어에 채널이라는 기능이 있는데 그 중 알파채널의 명암 농도를 조절해서 투명도를 설정할 수 있습니다. 게임 엔진에서도 알파값은 비슷한 의미로 사용되기도 하죠. 만약 위의 스크린샷 예시 경우를 실제로 rgba 값으로 만든다면 이렇게 적용할 수 있습니다.

 

{ color : rgba(0, 255, 0, 0.5) }

 

rgba 다음에 오는 괄호 안의 값은 각각 r, g, b, a에 대한 설정값입니다. 마지막 0.5는 50%의 투명도를 뜻합니다. 만약 1을 입력하면 뭘까요? 그렇습니다. 100%라는 의미죠. 따라서 불투명 상태입니다. 반대로 0을 입력하면 완전 투명한 상태를 말합니다. 투명도를 적용시키는 경우는 거의 없지만 이다금씩 정말 이쁘고 멋진 레이아웃 테마를 구성할 때 rgba 표현 방식으로 색을 적용시키면 멋진 컬러가 완성될수도 있습니다. 참고로 a값은 앞 자리인 0을 생략해서 .5로만 입력해도 상관 없습니다. 끝.