🎨

색상 팔레트 생성

기본 색상에서 아름다운 색상 팔레트를 생성하세요. CSS, HEX, JSON으로 내보내세요.

디자인 도구 로컬에서 실행 데이터 전송 없음
팔레트 HSL 보색 디자인
기본 색상
팔레트 유형
개수 (단색만): 5
5
내보내기 형식
팔레트 미리보기
내보내기

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

기본 색상에서 아름다운 색상 팔레트를 생성하세요. 보색, 유사색, 삼각 배색, 단색 배색을 선택하고 CSS, HEX, JSON으로 내보내세요.

색상 팔레트 생성 사용 방법

  1. 기준으로 삼을 기본 색상을 선택하세요.
  2. 보색, 유사색, 단색 등 팔레트 스타일을 선택하세요.
  3. 생성된 스와치를 확인하고 필요하면 기본 색상을 조정하세요.
  4. 디자인 시스템이나 목업에서 재사용할 HEX 값을 복사하세요.

관련 도구

🎨
색상 선택기
HEX, RGB, HSL, CMYK 간에 색상을 변환하세요
 🌈
CSS 그라데이션 생성
실시간 미리보기로 CSS 선형 및 방사형 그라디언트를 만드세요
 ⚖️
WCAG 명도 대비 검사
접근성을 위해 WCAG AA 및 AAA 색상 대비율을 확인하세요
색상 팔레트 이해하기 ▾
예시
입력 기본 파란색에서 보색 팔레트 생성:
출력 보색은 색상환에서 정반대에 위치하여 고대비의 선명한 조합을 만듭니다.
일반적인 사용 사례
  • 기본 브랜드 색상으로 UI 색상 시스템을 구축하세요
  • 차트 또는 일러스트용 보조 강조 색상 생성
  • 디자인 핸드오프 전에 팔레트 방향 탐색
  • 소셜 게시물이나 슬라이드용 빠른 색상 세트 생성
자주 묻는 질문
적합한 조화 유형은 어떻게 선택하나요?

대담하고 대비가 높은 디자인에는 보색을 사용하세요. 부드럽고 일관된 UI 테마에는 유사색을 사용하세요. 균형 잡힌 세 가지 강조 색상이 필요할 때는 삼각 조화를 사용하세요. 단순함과 우아함이 우선일 때는 단색을 사용하세요.

팔레트가 접근성 대비를 확인하나요?

이 도구는 색상 조화 생성에 중점을 둡니다. WCAG 대비 검사에는 이 사이트의 Contrast Checker 또는 WCAG AA Checker 도구를 사용하세요.

팔레트를 Figma 또는 CSS로 내보낼 수 있나요?

예 — CSS 내보내기 형식을 사용하면 바로 붙여넣을 수 있는 CSS 사용자 정의 속성을 얻거나, HEX 값을 개별적으로 복사해 원하는 디자인 도구에 붙여넣을 수 있습니다.

단색 개수 슬라이더의 용도는 무엇인가요?

단색 유형을 사용할 때 생성되는 틴트와 셰이드 수를 제어할 수 있습니다(3–10). 이를 통해 세밀한 그레이스케일 또는 틴트 스케일로 작업할 수 있습니다.