[Research] 내가 원하는 컬러로 구성된 디자인 자료를 검색할 수 있는 웹사이트

내가 원하는 컬러로 구성된 디자인 자료를 찾을 때 효율적인 검색 서비스를 제공하는 웹사이트를 알아보도록 하겠습니다. 디자인 기획과 콘셉트에서 결정된 브랜드 컬러(Brand Color)나 주제색(Primary Color) 등이 있다면 효과적으로 관련 색상이 사용된 디자인 레퍼런스를 찾을 수 있습니다.

  • 드리블(dribbble)
    헥스 코드(Hex Code)로 검색할 수 있는 기능 제공으로 좀 더 정확하게 원하는 자료 서치 가능

  • 어워즈(awwwards.)
    기본 컬러 분류에서 해당 색상을 선택해서 검색

1. 드리블 dribbble

https://dribbble.com

드리블(dribbble)은 글로벌 디자이너 커뮤니티로서 다양한 디자인 분야의 전문적인 작품을 검색할 수 있는 곳입니다. 컬러 팔레트를 제공하고, 색상의 헥스 코드(Hex Code)를 알고 있으면 해당 컬러의 디자인 자료를 보다 정확하게 알아볼 수 있습니다.

https://dribbble.com
  1. “Filters”를 선택한 후
  2. “Color”의 컬러 팔레트(Color Palette)에서 해당 색상을 선택하거나
  3. 헥스 코드(Hex Code)를 입력하여 검색할 수 있습니다.

헥스 코드에 관련된 내용은 하단의 설명을 참조해주세요.


2. 어워즈 awwwards.

https://www.awwwards.com/

어워즈(awwwards)는 “인터넷상의 창의적이고 혁신적인 디자인 어워즈”를 표방하는 세계 최고의 개발자, 디자이너 및 웹 에이전시의 재능과 노력을 인정하고 홍보하는 웹사이트입니다. 디자인 작품의 경쟁, 투표를 통해서 수상작을 선정하여 선보이고 있습니다.

아래와 같이 “검색(SEARCH) > 필터 표시(SHOW FILTERS) > 필터 조건(Filter By): 색상(COLORS)” 경로를 통해 제시된 컬러를 선택하면 해당 색상으로 구성된 디자인 자료를 조사할 수 있습니다.

Step 1. 검색(SEARCH) 아이콘 클릭
Step 2. “필터 표시(SHOW FILTERS)” 클릭
Step 3. “필터 조건(Filter By)”의 “색상(COLORS)”에서 해당 컬러 선택
Step 4. 선택한 컬러에 해당하는 디자인 검색 결과 (예: 녹색 Green)

단점은 제시한 컬러가 갈색(Brown), 검은(Black), 노랑(Yellow), 녹색(Green), 빨간(Red), 은색(Silver), 주황색(Orange), 푸른(Blue), 핑크(Pink), 흰색(White)으로 총 10개의 색상으로만 구분되어 있어 드리블(dribbble)에서와 같이 더욱 자세한 컬러로 검색은 할 수 없습니다.

참고로 한국어를 지원하는 서비스를 제공하고 있는 장점이 있습니다.


헥스 코드(Hex Code)

헥스 코드(Hex Code) 표기 방식

헥스 코드(Hex Code)는 RGB 방식의 색상 코드 표기법으로 “#”과 “여섯 자리의 영어 알파벳 또는 숫자”로 구성된 컬러 표기 방식입니다. 여섯 자리의 각 두 자리는 Red, Green, Blue의 값을 나타냅니다.

헥스 코드(Hex Code) 흰색(White)과 검은색(Black) 표기 방식

헥스 코드의 “F”값은 해당 색의 강도가 가장 높은 값이고, “0”은 강도가 가장 낮은 값을 나타냅니다.

  • “#FFFFFF”는 해당 RGB 값이 가장 높기 때문에 흰색(White)
  • “#000000″은 해당 RGB 값이 가장 낮기 때문에 검은색(Black)
헥스 코드(Hex Code) 빨간색(Red), 녹색(Green), 파란색(Blue) 표기 방식

그래서 “#FF0000″은 Red 값이 가장 높고 나머지 컬러는 낮기 때문에 빨간색(Red)을 표현하고, 같은 원리로 “#00FF00″은 녹색(Green), “#0000FF”는 파란색(Blue)을 나타냅니다.

헥스 코드는 다양한 소프트웨어에서 컬러를 입력/분석하는 기능을 사용하면 손쉽게 알아낼 수 있습니다.

어도비 일러스트레이터(Adobe Illustrator)의 색상 피커(Color Picker)

예를 들어 어도비(Adobe)사의 대부분 소프트웨어에서 제공하는 색상 피커(Color Picker)에서 이 헥스 코드를 입력/분석할 수 있습니다.

파워포인트(PowerPoint)의 “다른 채우기 색”

파워포인트와 같은 소프트웨어에서도 헥스 코드를 입력/분석할 수 있습니다. “도형 채우기” 등과 같은 색에 관련된 기능에서 “다른 채우기 색” 등을 통해 헥스 코드값을 알아낼 수 있습니다.



참조
https://namu.wiki