CSS의 컬러값 알아보기

CSS(연속적 스타일 시트)는 웹 디자인의 필수 요소 중 하나입니다. 블로그를 포함하여 웹 사이트를 운영하고 있는 사람이라면 HTML과 더불어 CSS를 조금이라도 알아야 할 필요가 있습니다. 여기서는 CSS에서 다루는 컬러값에 관하여 알아보도록 하겠습니다.


본론으로 들어가기에 앞서 가산 혼합에 관하여 간략하게 알아야 할 필요가 있습니다.

RGB 컬러 모델

가산 혼합이란 다른 컬러를 섞었을 때 더 밝은 컬러가 되는 것을 의미합니다. 예를 들어 빨강과 초록을 섞었을 때 두 개의 컬러보다 밝은 노랑이 됩니다. 이것은 주로 빛을 사용하여 컬러를 표현하는 장치, 그러니까 텔레비전이나 스마트폰같은 디스플레이에 사용됩니다.

결론적으로 이것은 빛을 위한 혼합이기 때문에 빛의 삼원색인 빨강, 초록, 파랑을 기본으로 사용합니다. 앞서 말했듯이 다른 컬러가 섞일 수록 더 밝은 컬러가 되고 세 개의 컬러가 모두 섞이면 하양이 됩니다.

웹 또는 UI(사용자 인터페이스) 디자인 작업을 할 때에는 일반적으로 이 세 개의 컬러를 각 컬러 당 256단계의 밝기 중 하나, 다시 말해 0부터 255까지의 값 중 하나를 선택하여 사용합니다. 따라서 우리는 수천만 개의 컬러를 만들고 사용할 수 있습니다.

자, 이제 본론으로 돌아가 CSS의 컬러값에 관하여 알아보도록 합시다.


대표적인 CSS의 컬러값은 16진수(hexadecimal)와 rgba()입니다. 그 외 hsla() 컬러값도 있지만 헷갈림을 줄이기 위해 여기서는 설명하지 않을 것입니다.

16진수 컬러값

16진수 컬러값

16진수는 CSS의 컬러값 중 가장 많이 사용됩니다. 각 컬러를 16진수로 입력하며 00부터 ff까지의 값을 쓸 수 있습니다. 수가 작을수록 밝기는 낮습니다. 값을 입력할 때 #, 빨강, 초록, 파랑 순으로 입력합니다. 이 때 각 값은 띄어쓰기 없이 연속으로 입력합니다. 예를 들어 어두운 파랑을 표현하려면 #003c99로 입력합니다.

rgba() 컬러값

rgba() 컬러값

rgba()는 red, green, blue, alpha의 앞 글자를 따온 컬러값입니다. 이름에서 알 수 있듯이 이것은 괄호 안에 빨강, 초록, 파랑, 알파 순으로 입력합니다. 16진수 컬러값은 각 컬러를 16진수로 입력했다면 rgba()는 우리가 일상생활에서 사용하는 10진수로 입력합니다. 각 컬러 당 0부터 255까지의 값을 쓸 수 있습니다. 그리고 알파는 컬러의 불투명도를 의미합니다. 0부터 1까지의 값을 쓸 수 있고 작을수록 투명해집니다. 각 값은 쉼표로 구분합니다. 예를 들어 45% 투명한 주황을 표현하려면 rgba(255, 150, 0, 0.55)로 입력합니다.

참고로 알파를 꼭 입력할 필요는 없습니다. 이 때에는 rgb() 컬러값을 사용합니다.


CSS의 컬러값에 관하여 배웠음에도 불구하고 해당 컬러가 정확히 어떤 컬러인지 알기에는 쉽지 않습니다. 그렇지 않나요? 한 가지 꿀팁을 알려 드리겠습니다.

Google 검색

Google에 ‘컬러 피커’를 검색해 보세요. 검색 결과 상단을 보면 원하는 컬러를 선택할 수 있는 컬러 피커와 왼쪽에 해당 컬러값이 있을 것입니다. 눈으로 직접 컬러를 선택하고 해당 컬러의 컬러값을 바로 확인할 수 있으니 참으로 편할 수밖에 없겠죠?

티스토리 툴바