[HTML] 원하는 색상값을 코드로 찾아보자 + 간단팁

사진: Unsplash 의 Christina Rumpf

 

제가 웹디자인을 할 때 사소한 것 같지만 중요하게 여기는 부분은 메인컬러입니다. 그래서 클라이언트와 소통을 할 때 가장 먼저 메인 컬러를 잡고 작업을 시작하는 편입니다. 기본 디자인 툴을 다루실 줄 아는 분들이라면 일러스트레이터나 포토샵에서 색상값을 잡고, 팔레트에서 바로 hex코드를 뽑아내겠지만 디자인 툴을 따로 다루지 않는 분들의 경우 원하는 값을 찾기가 쉽지 않습니다.

일러스트레이터 색상 팔레트 화면

그런 분들을 위해 간단하게 이용하기 쉬운 사이트를 소개시켜드리고자 합니다.

 

1. 직접 원하는 색을 찾아 사용하고 싶을 때 : HTML Color Codes

첫번째 사이트는 원하는 값을 직접 찍어 사용하고 싶을 때 이용하는 사이트입니다.

HTML 컬러 차트. 원하는 색을 찍으면 컬러 코드 값이 나온다

HTML 컬러 픽커. 차트보다 더 세밀하게 값을 선택할 수 있다

한 화면에서 원하는 색을 고르는 컬러 차트와 더 세밀하게 선택할 수 있는 컬러 픽커 두 가지 모드가 있으니 편한 것으로 이용하시면 됩니다.

그 외 기능은 없이 단순합니다. 저는 이와 같이 단순하게 필요한 기능만 있는 사이트를 선호하는 편입니다. :)

 

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

HTML Color Codes

 

2. 여러 색 조합을 활용하고 싶을 때 : Color Hunt

두 번째는 한 가지 색상만 하는 것이 아니라 여러 색 조합을 비교해보고 활용하고 싶을 때 쓰기 좋은 사이트입니다. 

 

 

Color Hunt 웹페이지 화면

Color Hunt에서 한 조합을 선택한 화면

사이트에 들어가면 다양한 색조합이 있습니다. 왼쪽 메뉴에서 Popular를 클릭하면 유저들이 선호하는 컬러 조합들이 나옵니다. 인기가 많은 만큼 안전한 색 조합일 확률이 높겠지요. 색상을 고르는데 자신이 없는 분이라면 이 사이트를 추천합니다.

 

https://colorhunt.co

Color Palettes for Designers and Artists - Color Hunt

 

3. 간단한 미세팁

(1) 다른 사이트를 참고하는 법

다른 사이트의 값이 마음에 들 때 사파리나 크롬의 경우 개발자 모드로 들어가서 원하는 부분을 찍어 그 값을 확인해서 HEX코드를 찾는 방법도 있습니다. 어떤 색상의 경우 법적이지는 않더라도 도의적 책임이 있을 수 있으니 참고 정도로 하시는 게 좋겠지요? :)

사파리 개발자모드에서 한 요소를 선택한 화면

 

(2) HEX코드를 6자가 아닌 3자만 쓰는 경우나 다른 형식인 경우

HEX코드를 입력할 때 6자가 아니라 3자인 경우가 있습니다. 예를 들어 #51A 와 같이요. 이런 경우는 #5511AA와 동일한 값이라고 보면 됩니다. 

혹은 HEX코드가 아니라 rgb(150, 27, 27) 같은 모습이 나올 수도 있습니다. 이럴 경우 각각 Red Green Blue 값을 의미하며 0~255값을 입력해서 사용할 수 있습니다. 보통 투명도 까지 설정할 경우 다음과 같이 사용하는 방식입니다.

rgba(150, 27, 27, 0.5);

순서대로 R, G, B, 투명도 (0~1.0)를 의미합니다. 

 

 

좋은 컬러와 함께 즐거운 티스토리 생활 되기를 바랍니다.

읽어주셔서 감사합니다 :)