[컬러바 생성기] 컬러바 참고 사이트

디자인 작업에 필요한 컬러바 사이트는 많지만, 심플하고 단순한 컬러바 사이트 하나를 알게 되어 기록한다. 이 곳에서는 컬러 그룹별로 카드 형식으로 컬러를 한 눈에 볼 수 있다는 장점이 있고, 컬러 코드만 입력하면 간단하게 대비 색상을 찾는 데 유용하다.

 

 

 

https://www.colorxs.com/

Color Names and Codes - Best color finder (color picker) for your design - colorxs.com

 

 

컬러 구성

상단 바로 아래 컬러명이 정리되어 있는데(Blue/Green/Red 등), 해당 컬러명을 클릭하면 같은 계열의 컬러카드를 한눈에 볼 수 있다. Pink를 클릭한 결과는 아래처럼 카드형태로 볼 수 있다.

 

 

 

컬러 팔레트 보기

상단 메뉴에서 Color Pallets를 선택하면 다양한 이미지에서 추출된 컬러 팔레트를 볼 수 있다. 컬러팔레트의 기준이 된 이미지는 인테리어 사진, 로고, 기업 홈페이지, 캐릭터 등 다양하게 쓰였다.

 

눈길을 끄는 틱톡 로고 컬러 팔레트를 클릭해서 들어가면, 아래와 같이 컬러명과, 컬러 코드가 나타난다. 컬러 코드에 맞는 컬러명을 찾고 싶을 때도 유용해 보인다. 페이스북, 트위터, 핀터레스트 등에 공유할 수도 있다.

 

팔레트를 다운로드하면 PNG파일로 저장할 수 있고, Pallet Editor를 통해 컬러를 변경할 수도 있다.

 

 

 

팔레트 에디터 이용하기

 

틱톡 로고에서 추출된 팔레트를 기준으로 바로 편집이 가능하고, 그렇지 않더라도 팔레트를 추가해가면서 색상을 추가할 수도 있다. 색상 카드 위에 ◑모양 아이콘을 클릭하면 일정한 비율로 밝아지거나 어두워지는 명도의 변화를 줄 수도 있다.

 

대비 색상 찾기

 

상단 메뉴에서 Oppsite Color를 클릭 후 들어가면 아래와 같은 화면이 뜬다. 여기서 기준이 되는 컬러명이나 컬러 코드를 입력하면 아래처럼 바로 대비색을 찾아준다.

 

네이비 블루(000080)를 입력 후 Generate를 클릭하면 레이저 레몬(FFFF7F) 색상을 찾아준다. 

 

대비 색상을 이용하면 효과적으로 강조하고 싶은 부분을 강조할 수 있어서, 컬러바를 구성할 때 꼭 포함하는 편이다.

 

 

 

랜덤 컬러

 

가끔 색상을 고르기가 애매할 때, 랜덤 컬러를 이용해 볼 수도 있다. 상단 메뉴에서 Random color를 선택하면 아래와 같이 랜덤하게 색상이 추천된다.