디자인하면서 어떤 색 고를 지 고민한 적 있잖아?

반응형

🤯 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() 색상값으로도 사용 가능합니다.

추천 사이트

1. HTML Color Names

HTML Color Names

우선 이름이 있는 색상을 먼저 고려해봅시다, 이름이 있는 색상의 경우 사용 빈도도 많고 웬만한 경우 사용 했을 때 크게 거부감이 안드는 값들로 구성되어 있습니다. 사이트는 w3school에 올라온 이름이 있는 HTML 색상 표를 모아놓은 페이지입니다. 

2. Flat UI Colors 🎨

특정 국가가 생각나는 색 배열을 원한 다면 이 곳이 제격입니다. 미국부터 중국, 인도 여러 나라가 생각 나는 듯한 색들을 모아놓은 사이트입니다. 클릭만으로 색상값이 복사되기 때문에 굉장히 간편하게 사용할 수 있습니다.

3. BrandColors

특정 브랜드는 어떤 색상을 사용하는 지 궁금하다면 BrandColors에 검색해봅시다, 각 브랜드별 색상표가 아주 자세하게 나와있다. Flat UI Colors와 마찬가지로 클릭만으로 색상값이 복사되어 편하게 사용 가능합니다.

4. cssgradient.io

사이트에 그라데이션 색상이 있다면 좀 더 멋져보이겠다고 생각한 적 있다면 이 사이트가 큰 도움을 줄 것입니다. cssgradient는 포토샵처럼 여러 종류의 그라데이션 코드를 만들고 시각적으로 확인해볼 수 있습니다. 

반응형

저작자표시

'Web > CSS' 카테고리의 다른 글

디자인하면서 어떤 색 고를 지 고민한 적 있잖아?  (0)	2019.02.03
[CSS] em과 rem의 공통점, 차이점  (0)	2018.12.26
[CSS] 🐸 게임으로 Flex 박스 CSS 익혀보자! Flexbox Froggy  (0)	2018.12.24