색상 팔레트 생성기
기본 색상에서 보색, 유사색, 삼각 배색, 사각 배색 팔레트를 생성. HEX 입력 또는 색상 선택으로 4가지 조화로운 팔레트 즉시 미리보기. 단일 색상 복사 또는 팔레트 전체 HEX 복사 지원. 100% 클라이언트 처리.
사용 방법
- 입력 필드에 HEX 값(예:
#3b82f6)을 입력하거나 색상 선택기로 기본 색상을 선택합니다. - 4가지 팔레트 카드(보색, 유사색, 삼각 배색, 사각 배색)가 즉시 업데이트됩니다.
- 색상 스와치를 클릭하여 HEX 값을 복사합니다.
- 카드 오른쪽 상단의 모두 복사 버튼으로 해당 배색의 모든 HEX 값을 복사합니다.
색상 조화 방식 설명
보색 (Complementary)
색상환에서 180° 반대편에 위치한 2색. 강한 대비와 시각적 임팩트를 제공합니다. CTA 버튼, 강조 요소, 대비가 필요한 디자인에 적합합니다.
유사색 (Analogous)
기본 색상 좌우 ±30° 범위의 3색. 자연스럽고 조화로운 분위기. 자연 친화적 디자인과 시각적 편안함을 중시하는 UI에 잘 어울립니다.
삼각 배색 (Triadic)
색상환을 120° 간격으로 3등분한 3색. 균형감과 활기를 동시에 가집니다. 다채롭고 에너지 있는 브랜드 디자인에 적합합니다.
사각 배색 (Tetradic)
색상환을 90° 간격으로 4등분한 4색. 가장 풍부한 팔레트로 다양한 색상 표현이 가능합니다. 하나의 주색과 나머지 3색을 보조색으로 활용하는 것이 일반적입니다.
HSL 색상 모델
- 색조 (H): 색상환의 각도 (0–360°). 빨강=0°, 초록=120°, 파랑=240°.
- 채도 (S): 색상 선명도. 0%=회색, 100%=최고 채도.
- 명도 (L): 0%=검정, 50%=순색, 100%=흰색.
관련 도구
- 색상 변환기 — HEX, RGB, HSL 형식 간 변환
- 색상 쉐이드 생성기 — 기본 색상에서 10단계 색상 생성
- CSS 그라디언트 생성기 — 선형, 방사형, 원뿔형 그라디언트 생성
FAQ
생성할 수 있는 색상 팔레트 종류는?
HSL 색상환 기반의 4가지 색상 조화 방식을 생성합니다: 보색(기본색+180°), 유사색(±30° 인접), 삼각 배색(120° 간격 3색), 사각 배색(90° 간격 4색). 모든 색상은 기본 색상과 동일한 채도·명도를 유지하여 통일감 있는 팔레트를 만들어냅니다.
어떤 색상 형식을 입력할 수 있나요?
텍스트 필드에 6자리 HEX 값(예: #ff5500)을 직접 입력하거나, 내장 색상 선택기로 시각적으로 선택할 수 있습니다. Enter 키 없이 실시간으로 업데이트됩니다.
색상은 어떻게 복사하나요?
색상 스와치를 클릭하면 해당 HEX 값이 클립보드에 복사됩니다. 각 팔레트 카드 오른쪽 상단의 '모두 복사' 버튼을 누르면 해당 배색의 모든 HEX 값을 공백으로 구분하여 복사합니다(예: #ff5500 #0055ff).
왜 모든 배색의 명도가 같은가요?
채도(S)와 명도(L)를 고정하고 색조(H)만 회전시키는 것이 색상 조화 생성의 표준 방식입니다. 이를 통해 모든 색상이 시각적으로 균형을 이룹니다. 동일 색상의 명암 변형이 필요하다면 색상 쉐이드 생성기를 사용하세요.
도구는 완전히 클라이언트 측에서 실행되나요?
예. 모든 색상 계산은 JavaScript를 통해 브라우저에서 실행됩니다. 어떤 서버에도 데이터를 전송하지 않습니다.