CanDoYa
KO

무료 색상 팔레트 생성기

브라우저에서 바로 실행됩니다. 업로드도, 회원가입도 없습니다.

배색 방식
CSS 변수
이 도구 공유하기

색상 팔레트 생성기란 무엇인가요?

색상 팔레트 생성기는 색상환 이론을 이용해 기본 색상 하나로부터 어울리는 배색을 만들어주는 도구입니다. 헥스 색상을 선택하거나 입력한 뒤 보색, 유사색, 삼각 배색, 단색 배색 같은 조화 방식을 고르면, 복사 가능한 헥스 코드가 붙은 색상 조합이 즉시 계산됩니다. 모든 과정은 브라우저 안에서만 실행됩니다.

사용 방법

  1. 1기본 색상 설정하기. 색상 선택 박스를 클릭해 눈으로 고르거나, #6366f1처럼 헥스 코드를 입력하거나, 랜덤 버튼으로 새로운 시작점을 얻어보세요.
  2. 2배색 방식 선택하기. 보색, 분할 보색, 유사색, 삼각 배색, 사각 배색, 단색, 명도 단계, 색조 단계 사이를 전환할 수 있습니다. 팔레트는 즉시 다시 계산됩니다.
  3. 3색상 복사하기. 색상 견본을 클릭해 해당 헥스 코드를 복사하거나, 복사 버튼으로 팔레트 전체를 CSS 변수 형태로 가져오세요.

이런 분께 추천

어떤 색을 조합해야 어울릴지 고민하는 데 디자인 시간을 낭비할 필요는 없습니다. 이 생성기는 색채 이론에서 배우는 색상환의 정통 배색 이론을 그대로 적용해, 감으로 맞추는 게 아니라 수학적으로 조화로운 팔레트를 만들어 줍니다. 색상 견본을 클릭하면 해당 헥스 코드가 복사되고, 팔레트 전체를 CSS 커스텀 속성 형태로 한 번에 복사할 수도 있습니다. 완전히 클라이언트에서만 동작하므로 회원가입도, 업로드도, 브랜드 색상 추적도 없습니다.

자주 묻는 질문

이 색상 팔레트 생성기는 무료인가요?

네, 회원가입도 워터마크도 횟수 제한도 없이 100% 무료입니다. 개인 프로젝트든 상업용 프로젝트든 원하는 만큼 팔레트를 만들고 복사할 수 있습니다.

제 색상 데이터가 어딘가에 업로드되나요?

아닙니다. 팔레트 계산은 순수 자바스크립트로 브라우저 안에서 전부 처리됩니다. 브랜드 색상, 입력값, 클릭 동작이 서버로 전송되는 일은 없습니다.

보색이란 무엇인가요?

보색은 색상환에서 기본 색상과 정반대에 위치한 색, 즉 색상값을 180도 회전시킨 색입니다. 파란색과 주황색 같은 보색 조합은 대비가 가장 강해서 브랜드 배경 위의 CTA 버튼 등에 자주 쓰입니다.

유사색 팔레트와 삼각 배색 팔레트의 차이는 무엇인가요?

유사색 팔레트는 기본 색상 기준 약 30도 이내의 인접한 색상값을 사용해 차분하고 통일감 있는 느낌을 줍니다. 삼각 배색 팔레트는 120도씩 떨어진 세 가지 색상값을 사용해 색 사이 대비가 강하고 생동감 있는 균형 잡힌 배색을 만듭니다.

명도 단계와 색조 단계는 무엇인가요?

명도 단계는 기본 색상의 명도를 검정 쪽으로 낮춰 어둡게 만든 것이고, 색조 단계는 흰색 쪽으로 높여 밝게 만든 것입니다. 둘 다 색상값과 채도는 그대로 유지하므로 호버 상태, 테두리, 하나의 브랜드 색상을 활용한 배경 레이어에 이상적입니다.

웹사이트 팔레트는 몇 가지 색상으로 구성해야 하나요?

흔히 쓰이는 원칙은 60-30-10 규칙입니다. 인터페이스의 약 60%를 차지하는 주요 색상, 30%를 차지하는 보조 색상, 10%를 차지하는 강조 색상으로 나누는 방식입니다. 먼저 여기서 3~5가지 색상으로 배색을 만든 뒤, 각 색상마다 상태와 표면에 맞춰 명도 단계와 색조 단계를 추가해 보세요.

회색이나 검정에서는 왜 팔레트가 거의 변하지 않나요?

회색, 검정, 흰색은 채도가 0이라서 배색 회전이 작용할 색상값 자체가 없습니다. 존재하지 않는 색상값을 회전시켜 봤자 같은 무채색으로 돌아올 뿐입니다. 대신 명도 모드로 무채색 단계를 만들어 보세요. 검정이나 어두운 회색에는 색조 단계를, 흰색이나 밝은 회색에는 명도 단계를, 중간 회색에는 단색 모드를 사용하면 됩니다.