디자이너에게 필요한 색상 조합 무료 사이트 목록

디자인하면서 은근 오래 걸리고 까다로운 것이 바로 색상 조합이다. 디자인에 가장 적합한 색상을 찾거나 조합을 찾는다면 무조건 최적의 사이트로 컬러 팔레트를 만드는게 시간을 단축시키는 일이다. 실제 업무를 하면서 여러가지 사용하는데 그 중에서 몇 가지 소개하려고 한다. 

1. Adobe Color (https://color.adobe.com/ko/)

생성, 탐색, 트랜드와 같은 메뉴를 통해서 다양한 컬러를 추출해볼 수 있다. 나는 생성보다는 탐색과 트랜드에서 많은 컬러이 방향성을 찾는다. 처음에 어떤 컬러로 시작할지 고민할때 이 사이트를 쓰면 도움이 될 것이다. 

탐색

트렌드

 

2. Khroma (https://www.khroma.co/)

제품 디자이너 조지 헤이스팅스가 머신 러닝 기술을 사용하여 선호하는 색상 일부를 추출한 사이트이다.
나의 취향인 컬러 50가지를 선택하면 알고리즘에 따라 5가지 디스플레이를 생성해준다. 스크롤을 내릴 때마다 새로운 조합을 생성해주기 때문에 다양한 견해로 색상을 선택할 수 있다.

색상 50가지를 먼저 취향껏 선택하는게 정말 힘들다. 중간중간 필요한 색상을 알려줘서 맞춰서 계속해서 뽑아냈다. 실제로 사용해보니 그라데이션에서 너무 편하게 볼 수 있는게 장점이다. 프로젝트에 실제로 사용하게 될 때는 제품의 컨셉을 생각하면서 색상을 선택하게 되면 정말 예쁘게 잘 뽑힐지 궁금해진다. 현재는 베타로 운영 중이다. 

우선, 색상 50가지를 선택해주세요.

내가 뽑은 색상의 면/텍스트 조화

컬러 조합 다양화

그라데이션 조합 다양화

 

3. Coolors (https://coolors.co/)

웹사이트에 들어오면 무작위 5가지 컬러의 조합으로 보여준다. 스페이스 바를 누르면 더 많은 색상표를 볼 수 있고, 선택할 수 있다. 원하는 조합을 찾았다면 마우스 호버를 하여서 컬러값을 가져갈 수 있다. 색상 뿐만 아니라 채도와 밝기도 조절할 수 있으니 컬러 선택 마무리 단계에서 사용하면 좋다. 

특히 이미지 업로드하여 컬러 추출하는 방식도 많이 사용하기도 한다. 원하는 팔레트를 생성했다면 URL, png 파일과 같은 확장자로 다운로드 받을 수 있다.

 

4. Color tool- Meterial design (https://m3.material.io/styles/elevation/overview)

구글에서 일괄된 시각적 언어를 보장하기 위해 만든 머테리얼 디자인 툴이다. 구글 머테리얼 디자인은 모든 디자이너들이 한번씩 보았겠지만, 컬러 툴이 있는지는 늦게 알게 되었다. 사이트에 들어가면 Elevation부터 컬러 스타일 전부를 볼 수 있고 가이드에 따라서 적용하면 된다. 피그마 파일을 공유하고 있으며 사용하면 된다.

처음이거나 더 디테일하고 파고들고 싶다면 바로 이 사이트를 꼭 정독하길 

구글 머테리얼 디자인

피그마로 받아보는 컬러 시스템

 

5. Color Space(https://mycolor.space/)

내가 원하는 색상코드 값을 넣으면 추천 조합을 색상 팔레트를 보여준다. 색상 팔레트를 빠르게 추출하기에는 컬러 스페이스가 제일 적절한 것 같다. 적당히 색상 조합이라서 좋을 것 같다. 특히 그라데이션으로 스트레스받는 디자이너라면 정말 추천하는 기능은 바로 3-color-gradient 이다. 다양한 그라데이션 사이트를 찾아본 건 아니지만, css코드로 나오기 때문에 개발자에게 전달하기도 쉬운 것 같다. 

컬러 조합 다양하게 볼 수 있어 편리

너무 편해.. 기능 너무 추천해!

 

 

+ 색상 팔레트와는 거리가 멀지만 색상에 대한 영감을 얻고싶을 때 쓰기 좋은 기능까지 추가로 설명하려고 한다. 

6. Designspiration (https://www.designspiration.com/)

이번에 찾다가 나온 사이트인데 색상을 지정하면 그 색상에 맞는 이미지를 나열해주어 이 색상에서 느껴지는 이미지나 분위기를 얻을 수 있다. 색상으로 영감을 얻을 수 있는 것이라 브랜드 디자인을 하는 분야에서 더 많이 사용하지 않을까 생각한다. 

앞으로도 프로젝트할 때 색상 추출 전에 써보면 많이 도움이 될 것 같다. 

 

 

 

 

끝 ! ><