본문으로 건너뛰기
SPCXTools

컬러 팔레트 생성기

색상을 하나 선택하면 색채 이론에 기반한 조화로운 5색 팔레트를 만들어 줍니다.

로컬 실행 — 파일이 기기 외부로 전송되지 않습니다

도구 불러오는 중…

컬러 팔레트 생성기 사용 방법

  1. 1색상 선택기로 기본 색상을 고르거나 HEX/RGB/HSL 값을 직접 입력하세요. 랜덤 버튼을 클릭해도 됩니다.
  2. 2보색, 유사색, 삼색조 등 원하는 색상 조합을 선택하세요.
  3. 3색상 견본을 클릭하면 HEX 코드가 복사됩니다.
  4. 4전체 팔레트를 CSS 사용자 지정 속성이나 JSON 형식으로 복사할 수 있습니다.

단일 색상으로 컬러 팔레트 만들기

웹사이트, 앱, 프레젠테이션, 로고 또는 포스터를 디자인할 때 잘 어울리는 색상을 고르는 것은 가장 어려운 작업 중 하나입니다. 색채학은 색상환에서 색상 간의 검증된 관계를 제공하며, 이 컬러 팔레트 생성기는 이를 자동으로 적용해 줍니다. 마음에 드는 색상이나 브랜드 색상으로 시작하여 배색을 선택하고, 프로젝트에 바로 복사해서 사용할 수 있는 조화로운 5가지 색상을 얻어보세요.

주요 기능

  • 7가지 배색: 보색, 유사색, 삼보색, 분열 보색, 사보색, 단색, 명암.
  • 다양한 시작 색상 지원: HEX, RGB, HSL, CSS 색상 이름으로 입력하거나 무작위로 선택할 수 있습니다.
  • 클릭하여 복사: 색상 견본을 클릭하면 바로 복사됩니다.
  • 내보내기: CSS 사용자 지정 속성 또는 JSON 배열로 내보낼 수 있습니다.
  • 가독성 높은 라벨: 대비를 위해 배경색에 따라 텍스트가 흑백으로 자동 전환됩니다.

어떤 배색을 사용해야 할까요?

배색 느낌 추천 용도
보색 강렬함, 높은 대비 CTA(콜투액션) 버튼, 스포츠, 세일
유사색 차분함, 조화로움 자연, 웰빙, 배경
삼보색 생동감, 균형감 유아동 제품, 일러스트레이션
분열 보색 선명하지만 덜 부담스러움 강한 포인트가 하나 필요한 웹사이트
사보색 풍부함, 다채로움 인포그래픽 및 차트
단색 우아함, 미니멀 기업 웹사이트, 포트폴리오
명암 체계적 디자인 시스템, UI 상태

팔레트에서 디자인까지

팔레트를 완성했다면 색상 대비 검사기로 모든 배경에서 텍스트가 잘 읽히는지 확인하고, 색상 변환기를 통해 색상을 RGB, HSL 또는 인쇄용 CMYK로 변환한 다음, CSS 그라데이션 생성기를 사용해 두 가지 색상으로 부드러운 배경을 만들어 보세요.

자주 묻는 질문 (FAQ)

보색 배색이란 무엇인가요?
보색은 파란색과 주황색처럼 색상환에서 서로 마주 보는 색입니다. 강한 대비 효과로 강조 요소나 행동 유도 버튼(CTA)을 눈에 띄게 만듭니다. 한 가지 색을 주조색으로 사용하고 보색은 포인트로만 적게 사용하는 것이 좋습니다.
유사, 삼각, 사각 배색의 차이점은 무엇인가요?
유사 배색은 색상환에서 인접한 색상들로 구성되어 차분하고 통일감 있는 느낌을 줍니다. 삼각 배색은 120° 간격으로 균등하게 떨어져 있어 생동감 있으면서도 균형 잡힌 느낌을 줍니다. 사각(정사각형) 배색은 90° 간격의 네 가지 색상을 사용하며 가장 화려합니다. 보통 하나의 주조색을 사용할 때 가장 효과적입니다.
웹사이트에서 5색 팔레트를 어떻게 사용해야 하나요?
가장 일반적인 방법은 60-30-10 규칙을 적용하는 것입니다. 약 60%는 중립적인 배경색, 30%는 주조색, 10%는 강조색으로 사용합니다. 텍스트에는 가장 어두운 색을 사용하고, 색상 대비 검사기로 모든 텍스트와 배경의 조합을 확인하세요.
내 브랜드 색상으로 시작할 수 있나요?
네. 브랜드의 HEX 코드를 기본 색상으로 입력하면, 이를 바탕으로 모든 배색이 생성됩니다. 로고나 웹사이트 스크린샷에서 브랜드 색상을 추출하려면 이미지 색상 추출기를 사용하세요.
색상은 어떻게 계산되나요?
기본 색상은 HSL(색상, 채도, 명도)로 변환됩니다. 배색은 색상환의 고정된 각도만큼 색상을 회전시켜 생성되며, 단색 팔레트와 음영은 색상을 유지한 채 명도만 조절합니다.

관련 도구

색상 대비 검사기텍스트의 가독성을 확인하고, WCAG 기준을 통과하는 가장 가까운 색상을 찾아보세요.색상 변환기HEX, RGB, HSL, HSV, CMYK 색상을 자유롭게 변환하고 명암비를 확인하세요.이미지 색상 추출기이미지의 원하는 곳을 클릭해 정확한 HEX, RGB, HSL 색상 코드와 주요 색상 팔레트를 확인하세요.CSS 그라데이션 생성기선형, 방사형, 원뿔형 그라데이션 배경을 시각적으로 디자인하고 CSS 코드를 복사하세요.박스 섀도우 생성기실시간 미리보기를 통해 부드럽고 선명한 다중 또는 내부 그림자를 세밀하게 조정하고 CSS 코드를 복사하세요.색맹 시뮬레이터색각 이상자의 시선으로 이미지를 미리 확인하여 디자인 접근성을 검토해 보세요.