색상 팔레트 생성기

프로젝트를 새로 시작할 때 가장 먼저 막히는 게 색입니다. 메인 컬러 하나를 정하는 것부터 손이 안 나가고, 어렵게 하나를 골라도 그 옆에 놓을 나머지 색이 도무지 안 떠오르죠. 색상 팔레트 생성기는 마음에 드는 색 하나만 정하면 그 색과 어울리는 조합을 여러 갈래로 자동으로 만들어 주는 도구입니다.

색 감각이 좋은 사람은 머릿속에서 채도와 명도를 조금씩 틀어 가며 조합을 찾지만, 대부분은 그 감을 가지고 있지 않습니다. 그래서 기준 색 하나를 넣으면 계산으로 조화로운 색들을 뽑아 주고, 그중 눈에 드는 조합을 골라 코드만 복사하면 되도록 만들었습니다.

사용 방법

1. 왼쪽 기준 색상의 동그라미를 클릭해 색상 선택기에서 색을 고르거나, HEX 코드 칸에 #33CEB2처럼 직접 값을 입력합니다.

   

2. 오른쪽에 기준 색을 바탕으로 만든 여러 팔레트가 나옵니다. 기본 그라데이션, 스킵 그라데이션, 스킵 쉐이드, 그레이 프렌즈, 스몰 스위치, 내추럴, 쉐이드 일곱 가지 유형 중 프로젝트 분위기에 맞는 조합을 고르세요.

   

3. 원하는 색 박스를 클릭하면 그 색의 HEX 코드가 복사됩니다. 복사됨 표시가 뜨면 CSS나 디자인 툴에 바로 붙여넣으면 됩니다.

   

첫 색부터 안 떠오를 때

메인 컬러가 정해지지 않았다면 정확한 색을 찾으려 애쓰지 말고, 만들려는 것의 분위기부터 떠올려 보세요. 차분하고 신뢰감 있는 서비스라면 파랑 계열, 따뜻하고 편안한 느낌이면 주황이나 갈색 계열, 이 정도만 정해도 출발점은 충분합니다. 대충 그 방향의 색을 하나 넣어 보세요.

이 도구의 진짜 쓸모는 여기서 나옵니다. 넣은 색이 딱 맞지 않아도, 생성된 일곱 갈래 조합을 훑다 보면 처음 넣은 색보다 옆 칸의 색이 더 마음에 드는 경우가 많습니다. 그럴 땐 그 색의 HEX 코드를 복사해 다시 기준 색으로 넣어 보세요. 원하는 조합에 가까워질 때까지 이 과정을 몇 번 반복하면, 맨손으로 색을 상상하는 것보다 훨씬 빠르게 자리를 잡습니다. 완성된 팔레트에서 색을 고르는 게, 빈 화면에서 색을 지어내는 것보다 쉽습니다.

촌스러운 색 조합 피하기

색이 따로 노는 가장 흔한 원인은 서로 관계없는 색을 감으로 붙여 놓는 것입니다. 이 도구는 색을 무작위로 뽑지 않고 기준 색 하나에서 색상·채도·명도를 계산으로 조금씩 굴려 만들기 때문에, 나온 색들끼리는 이미 한 뿌리로 묶여 있습니다. 조합이 어색해 보일 일이 줄어드는 이유입니다.

여기서 몇 가지 원칙을 더 지키면 결과가 안정됩니다. 내추럴이나 쉐이드처럼 같은 계열 안에서 명도만 나누는 유형은 배경과 텍스트, 강조 요소를 층층이 쌓기 좋습니다. 그레이 프렌즈는 기준 색에 톤을 맞춘 회색을 붙여 주니, 화려한 색을 절제하고 싶은 UI에 어울립니다. 반대로 채도 높은 색을 여러 개 나란히 쓰면 서로 튀어서 정신없어집니다.

색 개수도 욕심내지 마세요. 화면 하나에 강한 색이 두세 개를 넘어가면 어디를 봐야 할지 흐려집니다. 팔레트에서 메인 한 색, 보조 한 색, 나머지는 회색 계열로 받치는 식으로 역할을 나누면, 색이 적어도 오히려 완성도가 높아 보입니다.