Adobe Color를 활용한 잘 어울리는 색상 선택하기

 개인 홈페이지를 관리하거나 Power Point Template을 만들 때마다 시각적으로 잘 어울리는 색상을 선택해서 사용하고 싶은 경우가 많습니다. 이럴 때 저는 Adobe Color 사이트를 주로 활용합니다.

https://color.adobe.com/ko/explore

 Adobe Color 사이트에는 자신이 원하는 색상을 특정 규칙을 통해 생성할 수도 있고, 키워드와 관련된 색상 테마를 검색할 수도 있고, 색상 트렌드를 볼 수도 있습니다.

Adobe Color 메뉴 구성

생성

 색상 하모니 규칙을 선택해서 자신에게 맞는 색상 5가지를 추출할 수 있습니다.

탐색

 자신이 원하는 색상 테마의 키워드를 통해 색상을 검색합니다. 제가 많이 사용하는 기능으로, 봄에는 spring, 열정적인 색상은 passion, 신뢰를 주는 색상은 trust 등으로 검색해서 주로 활용합니다.

트렌드

 트렌트 메뉴는 패션, 그래픽 디자인, 일러스트레이션, UI/UX, 건축, 게임 등, 업계에서 최근에 사용된 색상에 대한 정보를 제공합니다.

라이브러리

 개인 계정을 생성해서 관심 있는 색상 정보를 저장하는 곳입니다.

활용 방법

 색상 정보를 선택하면 #XXXXXXXX 이라는 6자리 코드로 되어 있습니다. R(Red), G(Green), Blue(B)로 각각 2자리의 16진수로 표현되어 있습니다. #RRGGBB입니다. 16진수 2자리로 나타낼 수 있는 최대의 숫자는 0~255까지입니다. 웹페이지의 CSS(Cascading Style Sheets)에서처럼 #RRGGBB 값을 그대로 사용할 수 있는 경우는 해당 값에 마우스를 가져가면 "복사"를 클릭해서 붙여 넣으면 됩니다.

 티스토리의 Header 부분에 대한 색상 정보도 다음과 같이 Adobe Color에서 찾은 색상을 사용했습니다.

 어떤 프로그램에서는 0~255까지의 숫자를 입력하게 되어 있습니다. 그림판의 경우도 그런데요. 이때는 계산기를 사용해서 16진수를 10진수값으로 쉽게 확인할 수 있습니다. 계산기의 표준모드를 프로그래머 모드로 변경합니다.

 그리고 HEX값을 클릭하면 좌측에 기준이 되는 진법에 파란색 바가 보이게 됩니다. 그리고 위의 예제에서 #9FC131값을 변환합니다. Red = 9F = 159입니다. 이런 식으로 Green = C1 = 193, Blue = 31 = 49입니다.

 그림판에서 해당 값을 입력해 보면 동일한 색상임을 알 수 있습니다. RGB에 대한 10진수를 필요로하는 프로그램에서는 이렇게 계산기로 RGB 각 값에 대해 변환해서 사용하시면 됩니다.