컬러 팔레트 생성기
기본 색상을 선택하면 밝은 색부터 어두운 색까지 부드럽게 이어지는 팔레트가 즉시 생성됩니다. 바로 디자인 시스템에 복사해 사용하세요.
🔒 브라우저에서 로컬로 처리됩니다
Loading…
사용 방법
- "기본 색상" 필드에 HEX 코드를 입력하거나, 색상 견본 선택기를 클릭해 시각적으로 색상을 고르세요.
- 유효한 색상이 인식되면 그 아래에 전체 색상 팔레트가 자동으로 표시됩니다 — 별도의 버튼을 누를 필요가 없습니다.
- 팔레트는 매우 밝은 색조부터 매우 어두운 색조까지 이어지며, 모두 기본 색상과 동일한 색상(Hue)을 유지합니다.
- 원하는 견본을 클릭하면 해당 HEX 코드가 클립보드에 복사됩니다 — 잠시 "복사되었습니다!" 메시지가 나타나 성공을 알려줍니다.
기능
- 어떤 기본 색상에서든 부드러운 9단계 밝음-어두움 색상 스케일 생성
- Tailwind의 색상 스케일처럼 모든 단계에서 동일한 색상과 채도 유지
- 근사값이 아닌 입력한 정확한 기본 색상을 팔레트에 포함
- 각 견본의 HEX 코드를 클릭 한 번으로 복사
- 100% 클라이언트 사이드 — 색상 값이 브라우저 밖으로 전송되지 않음
자주 묻는 질문
이 도구가 제 색상을 어딘가로 전송하나요?
아니요. 팔레트 전체는 브라우저 내에서 단순한 자바스크립트 연산으로 생성됩니다 — 어떤 데이터도 업로드되거나 서버로 전송되지 않습니다.
색상 스케일은 어떻게 계산되나요?
이 도구는 먼저 기본 색상을 HSL로 변환한 다음, 색상(Hue)과 채도를 고정한 채 명도를 매우 밝은 값에서 매우 어두운 값까지 균등하게 단계별로 조정합니다. 입력한 정확한 기본 색상은 스케일의 중간 지점에 배치됩니다.
이 팔레트를 Tailwind나 다른 디자인 시스템에서 사용할 수 있나요?
네. 이 팔레트는 Tailwind의 50/100/.../900 색상 스케일과 같은 방식 — 하나의 색상(Hue)을 밝음에서 어두움까지 변화시키는 방식 — 을 따르므로, HEX 코드를 그대로 자신의 테마나 CSS 변수에 복사해 사용할 수 있습니다.
어떤 색상 형식을 입력할 수 있나요?
HEX 코드만 지원하며, 맨 앞의 # 유무와 상관없이 3자리 축약형(#abc 등) 또는 6자리(#3b82f6 등) 모두 입력할 수 있습니다. 시각적으로 선택하고 싶다면 색상 선택기를 사용하세요.
왜 오류 메시지가 표시되나요?
입력한 텍스트가 인식 가능한 HEX 색상 형식과 일치하지 않습니다. #3b82f6(또는 3b82f6, 축약형인 #abc)와 같은 형식인지 확인해 보세요.