파일은 서버로 업로드되지 않습니다 · 브라우저 내 처리
이미지
색상 팔레트 생성기
색상 코드를 입력하거나 이미지를 업로드해 팔레트를 생성하세요.
내보내기
언제 쓰면 좋나요?
디자인 작업에서 이미지 색감을 그대로 팔레트로 뽑고 싶을 때, 또는 기준 색상에서 보색·유사색을 자동으로 생성할 때 유용합니다. Tailwind CSS 프로젝트에서 커스텀 컬러를 설정할 때도 바로 내보낼 수 있습니다.
주요 기능
- •이미지 업로드로 대표 색상 자동 추출
- •HEX 입력으로 보색·유사색·모노크롬 팔레트 생성
- •HEX · RGB · HSL 변환
- •Tailwind CSS · CSS 변수 형식으로 내보내기
사용 방법
- 이미지를 업로드하거나 기준 HEX 코드를 입력합니다.
- 팔레트 규칙(보색·유사색·모노크롬 등)을 선택합니다.
- 색상 카드를 클릭해 HEX·RGB·HSL 코드를 복사합니다.
- CSS 변수 또는 Tailwind 형식으로 팔레트 전체를 내보냅니다.
색상 팔레트 생성기 자세히 알아보기
기준 HEX 코드를 입력하거나 이미지를 업로드해 자동으로 색상 팔레트를 생성하는 도구입니다. 보색(complementary)·유사색(analogous)·3색(triadic)·단색(monochromatic) 4가지 팔레트 규칙, 50~950까지 11단계 Tailwind 쉐이드, 그라디언트 변형, 팔레트 색상 조합 WCAG 대비율 매트릭스를 한 화면에서 확인할 수 있습니다. "색상 팔레트 추천", "이미지 색상 추출", "Tailwind 색상 생성"이 흔한 검색어입니다.
더 알아보기접기
이미지 업로드 시 업로드한 사진은 외부로 전송되지 않으며, 브라우저 안에서 픽셀 분석으로 대표 색상 6개를 추출합니다. 결과 팔레트는 CSS 변수(--color-primary 등) 또는 Tailwind config(tailwind.config.js의 colors 객체) 형식으로 내보내거나 PNG 카드로 저장할 수 있어 디자인 시스템 작업에 그대로 연결할 수 있습니다.
이럴 때 사용하세요
- •브랜드 메인 컬러 하나에서 보색·유사색을 자동 추천받아 디자인 시스템을 시작할 때
- •사진·일러스트·로고에서 자동으로 대표 색상 6개를 뽑아 팔레트로 활용할 때
- •Tailwind CSS 프로젝트의 커스텀 컬러(50~950) 11단계를 한 번에 생성할 때
- •팔레트 안에서 어떤 색끼리 텍스트·배경 조합이 WCAG AA 통과인지 매트릭스로 확인할 때
- •URL 공유 기능으로 팔레트를 팀원에게 보내 함께 검토할 때
색상 팔레트 생성기 자주 묻는 질문
이미지에서 어떻게 색을 뽑나요?
업로드한 이미지를 캔버스에 그리고 픽셀을 균등하게 샘플링한 뒤 색상 군집화로 대표 색상 6개를 추출합니다. 사진은 브라우저 안에서만 처리되어 외부 서버로 전송되지 않습니다.
팔레트 4종류는 무엇이 다른가요?
보색은 색상환 반대편(180°), 유사색은 양 옆 인접 색(±30°), 3색은 120° 간격 균등 분포, 단색은 같은 hue에서 밝기만 단계별로 변화시킵니다. 보색은 강한 대비, 유사색은 차분, 단색은 통일감 있는 디자인에 어울립니다.
Tailwind 쉐이드가 실제 Tailwind 기본 색과 다른가요?
Tailwind 기본 팔레트는 디자이너가 수작업 보정한 값입니다. 본 도구는 HSL의 lightness를 알고리즘으로 단계별 보간하므로 실제 Tailwind 색조와 약간 다를 수 있으나, 커스텀 브랜드 컬러의 단계 분포로는 충분합니다.
내보내기로 받은 코드를 그대로 쓸 수 있나요?
CSS 변수 형식은 :root 안에 그대로 붙여넣으면 되고, Tailwind 형식은 tailwind.config.js의 theme.extend.colors 안에 객체로 붙여넣으면 됩니다. 이름(키)은 필요에 따라 brand·primary 등으로 바꿔 쓰세요.
공유 URL은 어떻게 동작하나요?
공유 버튼을 누르면 현재 색상과 팔레트 종류가 URL 쿼리(?color=…&type=…)에 인코딩됩니다. 그 링크를 열면 같은 팔레트가 자동 복원되어 팀원 간 검토에 편리합니다.