색상 팔레트 생성기

다섯 가지 방법으로 컬러 팔레트 생성

이 컬러 팔레트 생성기는 여러 개의 독립된 도구를 하나로 대체합니다. 생성 버튼으로 랜덤 컬러 팔레트를 만들거나, 기본 색상에서 색상 조화를 선택하거나, 이미지나 사진에서 색상을 추출하거나, 단일 HEX 코드를 완전한 스킴으로 확장하거나, 색상 이름이나 단어를 반복 가능한 팔레트로 변환할 수 있습니다. 3~10가지 색상으로 설정하고, 마음에 드는 색상을 잠근 뒤 나머지를 다시 생성하세요 — 계정 불필요, 브라우저 밖으로 데이터가 나가지 않습니다.

스워치를 클릭해서 값을 복사하고, HEX·RGB·HSL 사이에서 형식을 전환하며, 드래그해서 순서를 변경할 수 있습니다. 스페이스바로 즉시 새 팔레트를 생성하세요 — Coolors가 대중화한 바로 그 워크플로우를 여기서 무료로 사용할 수 있습니다.

이미지, HEX 코드, 색상 이름에서 색상 추출

이미지에서: 사진을 드롭하면 도구가 숨겨진 HTML5 Canvas에서 미디언 컷 알고리즘을 사용해 주요 색상을 추출합니다 — 제품 사진, 브랜드 이미지, 무드보드에 맞는 팔레트를 만들 때 유용합니다. 이미지는 기기에 남아있으며 서버로 업로드되지 않습니다. Coolors는 이 기능을 Pro 구독자에게만 제공하지만, 여기서는 무료입니다.

HEX 코드에서: 브랜드 색상을 붙여넣어 앵커로 유지하면서 생성기가 유사색, 보색, 밝기 변형을 자동으로 만들어줍니다. 이름에서: 단어를 입력하면 결정론적 해시가 팔레트를 생성하므로, 같은 이름은 항상 같은 색상을 만들어냅니다 — 매번 다른 결과를 내는 AI 팔레트 생성기보다 안정적인 오프라인 대안입니다.

실제 색채 이론을 기반으로 한 색상 조화

조화 모드는 컬러 휠에서 색조를 회전시켜 색채 이론을 적용합니다. 보색은 180°에 위치해 강한 대비를 만들고, 유사색은 ±30° 이내로 차분하고 통일된 느낌을 주며, 트라이어드는 120° 간격의 세 가지 색조를, 테트라드는 90° 간격의 네 가지를 사용하고, 스플릿 보색은 150°/210°에서 대비 충돌을 완화하며, 단색은 하나의 색조를 유지하면서 밝기를 변화시킵니다.

생성된 각 색상에는 50에서 900까지의 완전한 틴트 및 셰이드 스케일도 포함됩니다 — 실제 UI 디자인 시스템에서 호버 상태, 테두리 색상, 배경 변형에 필요한 밝고 어두운 단계들입니다.

UtiloKit vs Coolors, Adobe Color, Paletton 비교

Coolors는 가장 인기 있는 팔레트 도구로, 뛰어난 잠금/재생성 워크플로우와 큰 탐색 커뮤니티를 갖고 있습니다. Coolors Pro(월 $4)는 이미지 추출, 고급 내보내기, 팔레트 기록을 유료 장벽 뒤에 두고 있습니다. 네이티브 Tailwind 내보내기는 무료 플랜에 없습니다. Adobe Color는 WCAG 접근성 검사와 색상 조화 시각화가 우수하지만, 팔레트 저장에 무료 Adobe 계정이 필요하고 내보내기까지 클릭이 더 많습니다.

Paletton은 색채 이론에 강하지만 네 가지 조화 유형만 표시하고 이미지 추출은 포함하지 않습니다. UtiloKit은 세 도구의 핵심 강점을 모두 결합합니다 — Coolors 스타일 잠금, Adobe Color의 WCAG 패널, 이미지 추출, Tailwind/SCSS 내보내기 — 계정 없음, 유료 장벽 없음, 도구에 광고 없음.

마음에 드는 색상을 잠그고 계속 반복 조정

좋은 팔레트는 한 번의 생성이 아니라 반복에서 탄생합니다. 스워치를 잠그면 고정됩니다. 생성을 누르거나 스페이스바를 누르면 잠기지 않은 것들만 바뀝니다. 마음에 드는 주색을 유지하고 강조색을 바꾸면서 전체 팔레트가 맞을 때까지 조정한 뒤 바로 내보내기로 이동하세요.

여러 색상을 동시에 잠글 수 있습니다. 브랜드 기본색과 중성 배경색을 잠그고 도구가 강조색을 제안하도록 하세요. 맞는 강조색을 찾으면 잠그고 서포팅 톤을 재생성합니다. 이것이 디자이너들이 수동으로 팔레트를 만드는 방식을 모방한 것이지만 훨씬 빠릅니다.

CSS, Tailwind, SCSS, JSON, PNG, 공유 링크로 내보내기

팔레트가 준비되면 프로젝트에 필요한 형식으로 내보냅니다. CSS는 커스텀 속성의 :root 블록을 생성합니다. Tailwind는 tailwind.config.js에 바로 붙여넣을 수 있는 theme.extend.colors 객체를 생성합니다. SCSS는 Sass 호환 $변수 선언을 생성합니다. JSON은 JavaScript나 디자인 토큰 파이프라인용으로 각 색상을 HEX·RGB·HSL로 나열합니다. 브랜드 문서나 프레젠테이션용 PNG 스워치 시트를 다운로드하세요. 팔레트를 URL에 인코딩한 공유 링크를 복사해서 팀원이 똑같은 것을 열어볼 수 있게 하세요.

내장 WCAG 명암비 검사

텍스트가 읽기 쉬울 때까지 팔레트는 완성되지 않습니다. 명암비 패널은 각 색상의 WCAG 명암비를 흰색 및 검정 텍스트에 대해 보여주고 AA·AAA 합격/불합격 배지를 표시합니다. WCAG 2.1 AA는 일반 텍스트에 4.5:1, 큰 텍스트에 3:1을 요구합니다. AAA는 일반 텍스트에 7:1을 요구합니다. 대부분의 팔레트 도구는 이 단계를 건너뛰거나 프리미엄 기능으로 숨겨두는데, 여기서는 내장되어 스워치를 생성하거나 수정할 때 실시간으로 작동합니다.

회원가입 없음, 업로드 없음, 브라우저 밖으로 아무것도 나가지 않습니다. 랜덤 생성·이미지 추출·조화 계산·명암비 검사·내보내기의 모든 팔레트 작업이 로컬 JavaScript에서 실행됩니다. 웹 디자인·브랜드 아이덴티티·일러스트·슬라이드·계절 또는 웨딩 팔레트를 위해 이 무료 컬러 팔레트 생성기를 북마크해두세요.