CSS에서 색상 표현하는 4가지 방법

CSS에서 색상을 지정하는 방법은 크게 네가지가 있습니다. 어렵지 않으니 한번 따라해 보시기 바랍니다.

색상명

말그대로 색상명을 입력하는 방법입니다. 빨간색인 경우면 영어로 RED죠? 그래서 영문 표기를 그대로 입력하는 방식입니다. 엄청 쉽죠? 이를테면 (일러봐라) 이런 경우입니다.

color: red;

이렇게 입력하면 폰트 색상이 빨간색으로 적용될 것입니다. 색상명을 입력하는 경우의 장단점은 다음과 같습니다.

장점 : 직관적인 표현이라 어떤 색이 적용되어있는지 바로 파악 가능

단점 : 다양한 색상 표현 어려움

그렇습니다. 영어만 읽을 줄 아시면 현재 어떤 색상이 적용되어 있는지 금새 파악이 가능합니다. 하지만 이렇게되면 마치 크래파스 20색처럼 정해진 색상으로만 표현을 해야 한다는 부분이 아쉽습니다. 따라서 이 색상 표현은 긴급할때만 사용하며 실무에서는 거의 쓰이지 않습니다.

16진수 헥사코드 (#RRGGBB 또는 #RGB)

현재 웹에서 가장 많이 사용하고 있는 색 표현 방법입니다. 관심 있으신 분들은 아마 한번쯤 보셨을 겁니다. 색상 앞에 #이 들어가고 뒤에는 알파벳과 숫자의 조합으로 입력되어있는 것을요. 이런 경우입니다.

color: #FF5544;

이렇게되면 폰트 색상이 FF5544의 색상으로 적용됩니다. 이런 경우에는 장단점이 색상명 표현 방법과 반대라고 알고 계시면 될 것 같습니다. 즉 이렇습니다.

장점 : 다양한 색상 표현 가능

단점 : 현재 어떤 색이 적용되어있는지 다소 파악하기 어려움

16진수 헥사코드를 모두 외우고 있다면 (이건 이것대로 대단함) 바로 파악이 가능할테지만 제 기준에서는 엄청난 색상 표현의 방식이기에 한 눈에 파악하는건 상당히 어렵지 않을까 싶습니다. 하지만 대략적인 파악은 가능합니다. 16진수 표기법은 RGB가 합쳐진 코드이기 때문입니다. 즉 위의 예제를 기준으로 말씀드리자면 FF는 R의 값, 즉 빨간색의 수치이고 55는 G의 값, 즉 녹색이며 44는 B의 값, 즉 파란색입니다. 이 방법은 현재까지 가장 많이 사용하고 있습니다.

RGBA (RGB)

위에서 RGB에 대해 잠깐 언급했었습니다. 빛의 3원색인 RGB를 그대로 사용하는 색상 표현 방식입니다. 단 소제목에도 보셨든 RGB 다음에 A가 있습니다. 우선 사용되는 예시는 다음과 같습니다.

color: rgba(255, 85, 68, 0.5);

이렇게 표현할 수 있습니다. 괄호 안의 각 숫자의 값이 R, G, B, A를 의미합니다. R은 빨강, G는 녹색, B는 파랑이며 A는 Alpha 값이라고 하는데 투명도 부분을 조율합니다. 즉 0.5라는건 50% 불투명도를 나타냅니다. RGB값은 0부터 255까지의 값을 입력해 표현하고 A만 0부터 1까지의 소수점을 사용해 표현합니다. 0은 0%이며 1은 100%입니다. 참고로 255, 85, 68값은 이전에 예시로 들었던 16진수 FF5544를 RGB로 변환한 값입니다. 참고로 A값을 지우면 알파값이 빠진 RGB 색상 표현으로 적용됩니다.

HSLA (HSL)

포토샵이나 일러스트레이터같은 2D 그래픽 프로그램을 자주 다뤄보신 분들이라면 아마 이 키워드는 많이 익숙하실 겁니다. 그렇습니다. Hue + Saturation + Lightness 를 합친 단어이며 한국어로 표현하자면 색상 + 채도 + 명도입니다. 마지막의 A는 방금전 RGBA에서 설명드린 바로 그 Alpha값입니다. 아래는 사용 예시입니다.

color: hsla(5, 100%, 63%, 0.5);

특이한 점은 Hue(색상) 값과 Alpha(알파) 값을 제외한 나머지 S와 L은 %로 표현한다는 부분입니다. 채도와 명도 부분이기에 %로 값이 입력되는 듯 합니다. 포토샵과 일러스트레이터를 자주 하시는 분들이라면 무슨 소린지 이해하실거에요. 즉 색상의 변화는 없고 진하고 옅기 정도로만 조율하기에 %로 적용됩니다. 참고로 색상은 0부터 360까지의 값으로 표현되며 R은 0, G는 120, B는 240입니다. 0을 시작으로 120씩 더해주면 각각 RGB가 됩니다.

부록 : 브라켓에서 자유롭게 변환 가능

위의 색상 표현 방식들이 햇갈린다면 브라켓을 사용해 보시기 바랍니다. 물론 다른 웹코딩 프로그램에서도 아마 지원할텐데 현재 저는 브라켓 외에는 다른 프로그램들을 다뤄본적이 없기에 브라켓(Bracket)만 언급한다는 점 참고하시기 바랍니다.

먼저 색상값을 입력한 항목에 마우스 커서를 활성화합니다. 그리고 Ctrl+E를 눌러주면 바로 아래에 색상 편집 에디터가 뜹니다. 여기에서 빨간색으로 표시한 부분에 있는 RGBa, Hex, HSLa 등의 다양한 색상 표현 방식을 변경할 수 있습니다. 이 방법은 무척 유용합니다. 가령 클라이언트가 16진수 코드 말고 RGBA로 바꿔달라고 요청했을 때 브라켓의 색상 에디터 기능을 사용하면 한방에 변환할 수 있습니다. 그리고 노란색으로 표시한 부분이 바로 A값을 조절하는 부분입니다. 막대바를 움직이면 그 즉시 A값이 적용됩니다. 끝.