글 작성자: 택시 운전사

🤯 CSS 색상 선정을 도와줄 사이트 모음

들어가기 전

웹사이트 제작에서 가장 고민되는 순간 중하나가 CSS(Cascading Style Sheets, 연속적 스타일 시트)의 색상을 선정하는 순간일 것이다. 색상에 따라 웹사이트가 풍기는 이미지가 바뀔 수도 있기 때문에 다른 요소들이 잘 굴러간다고해도, 한 순간 거부감이 들 수 있는 부분이기 때문이다. 유명 브랜드들도 본인들만의 로고 색상을 통해 브랜드의 이미지를 표현하고 있다.

브랜드별 색상표

가산혼합

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

결론적으로 이것은 빛을 위한 혼합이기 때문에 빛의 삼원색인 빨강(Red, R), 초록(Green, G), 파랑(Blue, B)을 기본으로 사용합니다. 앞서 말한 것 처럼, 다른 색이 섞일 수록 더 밝은 색이 되고, 세 개의 색이 모두 섞이면 하얀색이 됩니다.

빛의 삼원색 빨강, 초록, 파랑

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

대표적인 CSS의 색상값 표현은 16진수(hexadecimal)과 rgba()입니다.

16진수 색상값

16진수는 CSS 색상값 중 가장 많이 사용됩니다. 각 색상을 16진수로 입력하여 00부터 FF까지 값을 쓸 수 있습니다. 수가 작을 수록 밝기가 낮습니다. 값을 입력할 때 #로 시작하고, 빨강, 초록, 파랑 순으로 입력합니다. 이 때 각 값은 띄어쓰기 없이 연속으로 입력합니다. 예를 들어 밝은 주황을 표현하려면 #FFBA00으로 입력합니다.

rgba() 색상값

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