색상 휠이란?
기본 색상을 선택하면 보색, 유사색, 삼색, 분할 보색, 사색, 모노크로매틱 배색이 인터랙티브 휠에 표시됩니다. 각 색상 칩에는 흰색과 검정 대비 WCAG 명도 대비가 함께 표시되며, 전체 팔레트는 일반 텍스트 또는 공유용 PNG로 내보낼 수 있습니다.
휠은 HSL 기반이라 기본 색상을 드래그하거나 HEX 값을 입력하면 어울리는 색이 실시간으로 자리를 잡습니다. 채도와 명도 슬라이더로 전체 조합을 한 번에 조정할 수 있고, 각 색은 클릭 한 번으로 HEX·RGB·HSL·CMYK·OKLCH 중 원하는 형식으로 복사됩니다. 휠 위에는 각 조화점이 라벨이 붙은 원으로 표시되어 색끼리 어떤 관계인지 한눈에 보입니다.
사용 방법
- 색상 휠을 클릭하거나 드래그하여 기본 색조를 선택하거나, 입력 필드에 특정 HEX 값을 직접 입력하세요.
- 배색 유형(보색, 유사색, 삼색, 분할 보색 또는 사색)을 선택하면 해당하는 색상이 휠에 강조 표시됩니다.
- 색상 견본을 클릭하여 생성된 색상을 HEX, RGB, HSL, CMYK 또는 OKLCH로 복사하세요. 전체 팔레트를 내보내 디자인 도구에서 활용할 수 있습니다.
사용 시기
- 메인 컬러가 정해진 후 브랜드 키트용 보조 컬러 3~4개를 선정할 때.
- 배경과 시각적으로 대립하는 버튼 색을 골라 대비를 극대화할 때.
- 관련 색상이 서로 부딪히지 않고 차분하게 보여야 하는 UI 팔레트를 만들 때.
결과
웹 디자이너가 브랜드 색상으로 #E87040을 선택하고 삼색 배색으로 전환하면, 랜딩 페이지에 사용할 균형 잡힌 세 가지 포인트 색상을 클릭 한 번으로 얻습니다.
자주 묻는 질문
- 유사색 조화와 삼각 조화의 차이는 무엇인가요?
- 유사색은 휠에서 인접한 색(약 30도 이내)을 골라 차분하고 통일감 있는 느낌을 줍니다. 삼각 조화는 120도 간격으로 세 색을 배치해 대비가 강하면서도 균형이 잡혀, 디자인에 활력을 더하는 조합입니다.
- 보색과 분할 보색은 언제 다르게 써야 하나요?
- 보색은 정반대 두 색으로 임팩트를 최대화하지만 둘 다 채도가 높으면 부딪힙니다. 분할 보색은 기본 색에 정반대 색의 양옆 두 색을 짝지어, 긴장감은 살리되 충돌은 부드러워 균형 잡기가 더 쉽습니다.
- 명도 슬라이더를 움직이면 조화 색도 같이 바뀌는 이유는?
- 휠은 색상 사이의 상대 오프셋은 유지하지만, 사용자가 정한 채도와 명도를 모든 결과에 그대로 적용하기 때문입니다. 그래서 명도 40%의 유사색 그린은 모두 어두운 숲 톤이 되고, 진녹과 네온그린이 섞이지 않습니다.
- 팔레트를 CSS 변수나 디자인 툴 형식으로 가져올 수 있나요?
- 원하는 색 스와치를 클릭하면 HEX, RGB, HSL, CMYK, OKLCH 중 하나로 클립보드에 복사됩니다. 그대로 CSS 파일에 --brand-primary: #E87040처럼 붙여 넣거나, Figma의 HEX 입력란, Tailwind 커스텀 컬러 설정 어디에나 바로 적용할 수 있습니다.
- 사각 조화는 직사각형 조화와 같은 건가요?
- 네. 사각 조화(직사각형 조화라고도 함)는 휠 위에서 직사각형을 이루는 네 색을 선택하는 방식, 즉 보색 쌍 두 개입니다. 팔레트가 풍부해지지만 주조색을 정하지 않으면 디자인이 산만해집니다.